toshiki-notebook/assets/application_vitepress-plugin-shiki-twoslash_api_annotations.md.9b5dddc8.js

95 lines
33 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as c}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.250b3e56.js";import{_ as i,C as d,o,c as t,H as e,k as s,a,w as p,Q as n}from"./chunks/framework.b7580407.js";import"./chunks/commonjsHelpers.725317a4.js";const Pn=JSON.parse('{"title":"Meta Annotations","description":"Annotations provide a way to provide outside commentary on your code.","frontmatter":{"description":"Annotations provide a way to provide outside commentary on your code.","title":"Meta Annotations"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","lastUpdated":1711521027000}'),_={name:"application/vitepress-plugin-shiki-twoslash/api/annotations.md"},y=s("h1",{id:"queries",tabindex:"-1"},[a("Queries "),s("a",{class:"header-anchor",href:"#queries","aria-label":'Permalink to "Queries"'},"")],-1),h=s("p",null,"Sometimes the thing you want to say is about the code, annotations provide a way to provide outside commentary on your code.",-1),u=s("h2",{id:"annotate-left-right-overrides-text",tabindex:"-1"},[s("code",null,"@annotate: [left|right] [overrides] - [text]"),a(),s("a",{class:"header-anchor",href:"#annotate-left-right-overrides-text","aria-label":'Permalink to "`@annotate: [left|right] [overrides] - [text]`"'},"")],-1),A=s("p",null,"Annotate has a lot more controls than most of the other Twoslash commands, because each use of it probably needs to feel a bit different. Here's an example based on the TypeScript home page, click it to get it running so we can talk about what it does:",-1),C={class:"vp-code-group vp-adaptive-theme"},m=n('<div class="tabs"><input type="radio" name="group-_uPpL" id="tab-GuVhpW3" checked="checked"><label for="tab-GuVhpW3">output</label><input type="radio" name="group-_uPpL" id="tab-_amQ84p"><label for="tab-_amQ84p">markdown</label></div>',1),D={class:"blocks"},g={class:"language-ts vp-adaptive-theme active line-numbers-mode"},b=s("button",{title:"Copy Code",class:"copy"},null,-1),v=s("span",{class:"lang"},"ts",-1),B={class:"language-ts"},f={class:"tag-container"},E={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},T=s("div",{class:"language-id"},"ts",-1),F={class:"code-container"},w=s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"function"),s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#ADBAC7"}},"("),s("span",{style:{color:"#F69D50"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#ADBAC7"}},") {")],-1),q={class:"line"},x=s("span",{style:{color:"#ADBAC7"}}," ",-1),k=s("span",{style:{color:"#F47067"}},"if",-1),S={style:{color:"#ADBAC7"}},P=s("data-lsp",{lsp:"any"},"orr",-1),V=s("span",{style:{color:"#6CB6FF"}},[s("data-lsp",{lsp:"any"},"length")],-1),I=n('<span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span>',6),N=s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),R=s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"any"},"trim")],-1),M=n('<span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span>',5),L=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Y=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),X=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#F47067"}},"return"),s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),H=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},"}")],-1),O={class:"twoslash-annotation left",style:{top:"0rem"}},Q={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},W=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),$=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),G={class:"tag-container"},j={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},z=s("div",{class:"language-id"},"ts",-1),J={class:"code-container"},K=s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"function"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#24292E"}},"("),s("span",{style:{color:"#E36209"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#24292E"}},") {")],-1),U={class:"line"},Z=s("span",{style:{color:"#24292E"}}," ",-1),ss=s("span",{style:{color:"#D73A49"}},"if",-1),as={style:{color:"#24292E"}},ns=s("data-lsp",{lsp:"any"},"orr",-1),os=s("span",{style:{color:"#005CC5"}},[s("data-lsp",{lsp:"any"},"length")],-1),ts=n('<span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span>',6),es=s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),ls=s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ps=n('<span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span>',5),rs=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),cs=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),is=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"return"),s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ds=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"}")],-1),_s={class:"twoslash-annotation left",style:{top:"0rem"}},ys={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},hs=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),us=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),As=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Cs=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#ADBAC7;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#768390;">// @errors: 2304</span></span>
<span class="line"><span style="color:#768390;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F47067;">function</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">compact</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">arr</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">if</span><span style="color:#ADBAC7;"> (orr.</span><span style="color:#6CB6FF;">length</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr.</span><span style="color:#DCBDFB;">trim</span><span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#ADBAC7;">\`\`\`</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#6A737D;">// @errors: 2304</span></span>
<span class="line"><span style="color:#6A737D;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">compact</span><span style="color:#24292E;">(</span><span style="color:#E36209;">arr</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (orr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr.</span><span style="color:#6F42C1;">trim</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6A737D;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#24292E;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),ms=n("<p>First up, cool — it adds some text to the left hand side of the code. It features quite a few different options, so lets go through them one by one:</p><ul><li><p><code>left</code> or <code>right</code>: It&#39;s currently <code>left</code>. It&#39;s worth noting the arrow flips also, and <code>90deg</code> isn&#39;t a great option. Let&#39;s look at that next.</p></li><li><p><code>{ &quot;arrrowRot&quot;: &quot;90deg 8px 27px&quot; }</code> - This JSON object is used to manipulate the annotation, you have 3 controls for arrow positioning and rotation: <code>degrees x y</code>. I recommend keeping those in degrees and px, but it&#39;s your life. These are overrides from defaults which are okay, but not really something you ever want to ship.</p></li><li><p><code>{ &quot;textDegree&quot;: &quot;3deg&quot; }</code> - Rotates the text, you probably want something between <code>-3deg</code> and <code>3deg</code>. Optional, defaults to <code>0</code>.</p></li><li><p><code>{ &quot;top&quot;: &quot;0rem&quot; }</code> - Sets the y coordinates for the annotation relative to the code sample, if it&#39;s not included then it becomes <code>[lineNum]rem</code>.</p></li></ul><p>What&#39;s not included in this sample is <code>flipped</code>, which can be used to flip the arrow&#39;s orientation. Here&#39;s some examples:</p><p>A horizontal right example:</p>",4),Ds={class:"vp-code-group vp-adaptive-theme"},gs=n('<div class="tabs"><input type="radio" name="group-ArA-H" id="tab-ykbYs63" checked="checked"><label for="tab-ykbYs63">output</label><input type="radio" name="group-ArA-H" id="tab-73Wbu5N"><label for="tab-73Wbu5N">markdown</label></div>',1),bs={class:"blocks"},vs={class:"language-ts vp-adaptive-theme active line-numbers-mode"},Bs=s("button",{title:"Copy Code",class:"copy"},null,-1),fs=s("span",{class:"lang"},"ts",-1),Es={class:"language-ts"},Ts={class:"tag-container"},Fs={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},ws=s("div",{class:"language-id"},"ts",-1),qs={class:"code-container"},xs=s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"function"),s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#ADBAC7"}},"("),s("span",{style:{color:"#F69D50"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#ADBAC7"}},") {")],-1),ks={class:"line"},Ss=s("span",{style:{color:"#ADBAC7"}}," ",-1),Ps=s("span",{style:{color:"#F47067"}},"if",-1),Vs={style:{color:"#ADBAC7"}},Is=s("data-lsp",{lsp:"any"},"orr",-1),Ns=s("span",{style:{color:"#6CB6FF"}},[s("data-lsp",{lsp:"any"},"length")],-1),Rs=n('<span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span>',6),Ms=s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),Ls=s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Ys=n('<span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span>',5),Xs=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Hs=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Os=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#F47067"}},"return"),s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Qs=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},"}")],-1),Ws={class:"twoslash-annotation right",style:{top:"3rem"}},$s={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Gs=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),js=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),zs={class:"tag-container"},Js={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},Ks=s("div",{class:"language-id"},"ts",-1),Us={class:"code-container"},Zs=s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"function"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#24292E"}},"("),s("span",{style:{color:"#E36209"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#24292E"}},") {")],-1),sa={class:"line"},aa=s("span",{style:{color:"#24292E"}}," ",-1),na=s("span",{style:{color:"#D73A49"}},"if",-1),oa={style:{color:"#24292E"}},ta=s("data-lsp",{lsp:"any"},"orr",-1),ea=s("span",{style:{color:"#005CC5"}},[s("data-lsp",{lsp:"any"},"length")],-1),la=n('<span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span>',6),pa=s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),ra=s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ca=n('<span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span>',5),ia=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),da=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),_a=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"return"),s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ya=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"}")],-1),ha={class:"twoslash-annotation right",style:{top:"3rem"}},ua={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Aa=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),Ca=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),ma=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Da=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#ADBAC7;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#768390;">// @errors: 2304</span></span>
<span class="line"><span style="color:#768390;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F47067;">function</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">compact</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">arr</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">if</span><span style="color:#ADBAC7;"> (orr.</span><span style="color:#6CB6FF;">length</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr.</span><span style="color:#DCBDFB;">trim</span><span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#ADBAC7;">\`\`\`</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#6A737D;">// @errors: 2304</span></span>
<span class="line"><span style="color:#6A737D;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">compact</span><span style="color:#24292E;">(</span><span style="color:#E36209;">arr</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (orr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr.</span><span style="color:#6F42C1;">trim</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6A737D;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#24292E;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),ga=s("p",null,"Upside down arrow pointing at the error, using flipped to re-flip the arrow:",-1),ba={class:"vp-code-group vp-adaptive-theme"},va=n('<div class="tabs"><input type="radio" name="group-AvOTz" id="tab-BDoxjha" checked="checked"><label for="tab-BDoxjha">output</label><input type="radio" name="group-AvOTz" id="tab-K6lqGe2"><label for="tab-K6lqGe2">markdown</label></div>',1),Ba={class:"blocks"},fa={class:"language-ts vp-adaptive-theme active line-numbers-mode"},Ea=s("button",{title:"Copy Code",class:"copy"},null,-1),Ta=s("span",{class:"lang"},"ts",-1),Fa={class:"language-ts"},wa={class:"tag-container"},qa={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},xa=s("div",{class:"language-id"},"ts",-1),ka={class:"code-container"},Sa=s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"function"),s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#ADBAC7"}},"("),s("span",{style:{color:"#F69D50"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#ADBAC7"}},") {")],-1),Pa={class:"line"},Va=s("span",{style:{color:"#ADBAC7"}}," ",-1),Ia=s("span",{style:{color:"#F47067"}},"if",-1),Na={style:{color:"#ADBAC7"}},Ra=s("data-lsp",{lsp:"any"},"orr",-1),Ma=s("span",{style:{color:"#6CB6FF"}},[s("data-lsp",{lsp:"any"},"length")],-1),La=n('<span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span>',6),Ya=s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),Xa=s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Ha=n('<span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span>',5),Oa=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Qa=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Wa=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#F47067"}},"return"),s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),$a=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},"}")],-1),Ga={class:"twoslash-annotation right",style:{top:"-0.7rem"}},ja={style:{transform:"translateX(8px) translateY(46px) rotate(190deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},za=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),Ja=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(-3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Ka={class:"tag-container"},Ua={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},Za=s("div",{class:"language-id"},"ts",-1),sn={class:"code-container"},an=s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"function"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#24292E"}},"("),s("span",{style:{color:"#E36209"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#24292E"}},") {")],-1),nn={class:"line"},on=s("span",{style:{color:"#24292E"}}," ",-1),tn=s("span",{style:{color:"#D73A49"}},"if",-1),en={style:{color:"#24292E"}},ln=s("data-lsp",{lsp:"any"},"orr",-1),pn=s("span",{style:{color:"#005CC5"}},[s("data-lsp",{lsp:"any"},"length")],-1),rn=n('<span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span>',6),cn=s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),dn=s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"any"},"trim")],-1),_n=n('<span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span>',5),yn=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),hn=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),un=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"return"),s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),An=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"}")],-1),Cn={class:"twoslash-annotation right",style:{top:"-0.7rem"}},mn={style:{transform:"translateX(8px) translateY(46px) rotate(190deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Dn=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),gn=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(-3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),bn=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),vn=n(`<div class="language-md vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki github-dark-dimmed vp-code-dark"><code><span class="line"><span style="color:#ADBAC7;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#768390;">// @errors: 2304</span></span>
<span class="line"><span style="color:#768390;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F47067;">function</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">compact</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">arr</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">if</span><span style="color:#ADBAC7;"> (orr.</span><span style="color:#6CB6FF;">length</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr.</span><span style="color:#DCBDFB;">trim</span><span style="color:#ADBAC7;">(</span><span style="color:#6CB6FF;">0</span><span style="color:#ADBAC7;">, </span><span style="color:#6CB6FF;">10</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">return</span><span style="color:#ADBAC7;"> arr</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#ADBAC7;">\`\`\`</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#6A737D;">// @errors: 2304</span></span>
<span class="line"><span style="color:#6A737D;">// @strict: false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">compact</span><span style="color:#24292E;">(</span><span style="color:#E36209;">arr</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">if</span><span style="color:#24292E;"> (orr.</span><span style="color:#005CC5;">length</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">) </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr.</span><span style="color:#6F42C1;">trim</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">0</span><span style="color:#24292E;">, </span><span style="color:#005CC5;">10</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> arr</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#6A737D;">// @annotate: left { &quot;arrowRot&quot;: &quot;90deg 8px 27px&quot;, &quot;textDegree&quot;: &quot;3deg&quot;, &quot;top&quot;: &quot;0rem&quot; } - Discovered a typo, the param is arr, not orr!</span></span>
<span class="line"><span style="color:#24292E;">\`\`\`</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1);function Bn(fn,En,Tn,Fn,wn,qn){const r=c,l=d("data-err");return o(),t("div",null,[y,e(r,{readTime:"3",words:"541"}),h,u,A,s("div",C,[m,s("div",D,[s("div",g,[b,v,s("pre",null,[s("code",B,[s("div",f,[s("pre",E,[T,s("div",F,[s("code",null,[w,s("div",q,[x,k,s("span",S,[a(" ("),e(l,null,{default:p(()=>[P]),_:1}),a(".")]),V,I,N,R,M]),L,Y,X,H])])]),a(`
`),s("div",O,[a(`
`),(o(),t("svg",Q,[a(`
`),W,a(`
`)])),a(`
`),$,a(`
`)])]),a(`
`),s("div",G,[s("pre",j,[z,s("div",J,[s("code",null,[K,s("div",U,[Z,ss,s("span",as,[a(" ("),e(l,null,{default:p(()=>[ns]),_:1}),a(".")]),os,ts,es,ls,ps]),rs,cs,is,ds])])]),a(`
`),s("div",_s,[a(`
`),(o(),t("svg",ys,[a(`
`),hs,a(`
`)])),a(`
`),us,a(`
`)])])])]),As]),Cs])]),ms,s("div",Ds,[gs,s("div",bs,[s("div",vs,[Bs,fs,s("pre",null,[s("code",Es,[s("div",Ts,[s("pre",Fs,[ws,s("div",qs,[s("code",null,[xs,s("div",ks,[Ss,Ps,s("span",Vs,[a(" ("),e(l,null,{default:p(()=>[Is]),_:1}),a(".")]),Ns,Rs,Ms,Ls,Ys]),Xs,Hs,Os,Qs])])]),a(`
`),s("div",Ws,[a(`
`),(o(),t("svg",$s,[a(`
`),Gs,a(`
`)])),a(`
`),js,a(`
`)])]),a(`
`),s("div",zs,[s("pre",Js,[Ks,s("div",Us,[s("code",null,[Zs,s("div",sa,[aa,na,s("span",oa,[a(" ("),e(l,null,{default:p(()=>[ta]),_:1}),a(".")]),ea,la,pa,ra,ca]),ia,da,_a,ya])])]),a(`
`),s("div",ha,[a(`
`),(o(),t("svg",ua,[a(`
`),Aa,a(`
`)])),a(`
`),Ca,a(`
`)])])])]),ma]),Da])]),ga,s("div",ba,[va,s("div",Ba,[s("div",fa,[Ea,Ta,s("pre",null,[s("code",Fa,[s("div",wa,[s("pre",qa,[xa,s("div",ka,[s("code",null,[Sa,s("div",Pa,[Va,Ia,s("span",Na,[a(" ("),e(l,null,{default:p(()=>[Ra]),_:1}),a(".")]),Ma,La,Ya,Xa,Ha]),Oa,Qa,Wa,$a])])]),a(`
`),s("div",Ga,[a(`
`),(o(),t("svg",ja,[a(`
`),za,a(`
`)])),a(`
`),Ja,a(`
`)])]),a(`
`),s("div",Ka,[s("pre",Ua,[Za,s("div",sn,[s("code",null,[an,s("div",nn,[on,tn,s("span",en,[a(" ("),e(l,null,{default:p(()=>[ln]),_:1}),a(".")]),pn,rn,cn,dn,_n]),yn,hn,un,An])])]),a(`
`),s("div",Cn,[a(`
`),(o(),t("svg",mn,[a(`
`),Dn,a(`
`)])),a(`
`),gn,a(`
`)])])])]),bn]),vn])])])}const Vn=i(_,[["render",Bn]]);export{Pn as __pageData,Vn as default};