toshiki-notebook/assets/application_vitepress-plugin-shiki-twoslash_index.md.e3bd6d96.js

116 lines
44 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 a,c as o,o as n,R as e,z as s,a as l}from"./chunks/framework.ade46834.js";const P=JSON.parse('{"title":"VitePress Twoslash: VitePress Plugin for Shiki Twoslash","titleTemplate":false,"description":"Static code examples for VitePress using Shiki Twoslash.","frontmatter":{"description":"Static code examples for VitePress using Shiki Twoslash.","title":"VitePress Twoslash: VitePress Plugin for Shiki Twoslash","titleTemplate":false,"keywords":["getting-started","intro"]},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/index.md","filePath":"application/vitepress-plugin-shiki-twoslash/index.md","lastUpdated":1694652899000}'),p={name:"application/vitepress-plugin-shiki-twoslash/index.md"},t=e('<h1 id="andatoshiki-vitepress-plugin-shiki-twoslash" tabindex="-1">@andatoshiki/vitepress-plugin-shiki-twoslash <a class="header-anchor" href="#andatoshiki-vitepress-plugin-shiki-twoslash" aria-label="Permalink to &quot;@andatoshiki/vitepress-plugin-shiki-twoslash&quot;"></a></h1><blockquote><p>Static code examples for <a href="https://vitepress.dev" target="_blank" rel="noreferrer">VitePress</a> using <a href="https://github.com/shikijs/twoslash" target="_blank" rel="noreferrer">Shiki Twoslash</a> — powered by the syntax engine of Visual Studio Code and the TypeScript compiler.</p></blockquote><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;"></a></h2><p>Try moving your cursor into the code block below:</p>',4),r=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = {
id: string;
name: string;
}`},"UnlockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#839496"}},">")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = {
id: string;
name: string;
}`},"UnlockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#657B83"}},">")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),c=s("p",null,"Pretty neat, right? To some extent, anything your editor can show you about code, Twoslash can show. For example, here is the real auto-complete for a VitePress config:",-1),i=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(property) ti: any"},"ti")]),s("span",{style:{color:"#839496"}},",")]),s("div",{class:"meta-line"},[l("      "),s("span",{class:"inline-completions"},[s("ul",{class:"dropdown"},[s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tle")])]),s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tleTemplate")])])])])]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"})")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(property) ti: any"},"ti")]),s("span",{style:{color:"#657B83"}},",")]),s("div",{class:"meta-line"},[l("      "),s("span",{class:"inline-completions"},[s("ul",{class:"dropdown"},[s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tle")])]),s("li",{class:""},[s("span",null,[s("span",{class:"result-found"},"ti"),l("tleTemplate")])])])])]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"})")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),y=e(`<p>The name Twoslash refers to specially formatted comments (e.g. <code>// ^?</code>) which can be used to set up your environment, like compiler flags or separate input files. It couldn&#39;t be easier to set up and start creating incredible code examples!</p><h2 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to &quot;Install&quot;"></a></h2><p>Install <code>@andatoshiki/vitepress-plugin-shiki-twoslash</code> (requires <code>vitepress@&gt;=1.0.0-alpha.61</code>).</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ggBDP" id="tab-mIdbYN6" checked="checked"><label for="tab-mIdbYN6">pnpm</label><input type="radio" name="group-ggBDP" id="tab-5haZTLf"><label for="tab-5haZTLf">npm</label><input type="radio" name="group-ggBDP" id="tab-4rkt0wz"><label for="tab-4rkt0wz">yarn</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#268BD2;">pnpm</span><span style="color:#839496;"> </span><span style="color:#2AA198;">add</span><span style="color:#839496;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#268BD2;">pnpm</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">add</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#268BD2;">npm</span><span style="color:#839496;"> </span><span style="color:#2AA198;">i</span><span style="color:#839496;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#268BD2;">npm</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">i</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#268BD2;">yarn</span><span style="color:#839496;"> </span><span style="color:#2AA198;">add</span><span style="color:#839496;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#268BD2;">yarn</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">add</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">@andatoshiki/vitepress-plugin-shiki-twoslash</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>Until <code>shiki-twoslash</code> uses the same version of <code>shiki</code> as VitePress, you must override the following packages&#39; <code>shiki</code> versions for syntax highlighting to look the same.</p><div class="language-json vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">{</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">&quot;pnpm&quot;</span><span style="color:#839496;">: {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">&quot;overrides&quot;</span><span style="color:#839496;">: {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">&quot;remark-shiki-twoslash&gt;shiki&quot;</span><span style="color:#839496;">: </span><span style="color:#2AA198;">&quot;^0.14.1&quot;</span><span style="color:#839496;">,</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">&quot;shiki-twoslash&gt;shiki&quot;</span><span style="color:#839496;">: </span><span style="color:#2AA198;">&quot;^0.14.1&quot;</span></span>
<span class="line"><span style="color:#839496;"> }</span></span>
<span class="line"><span style="color:#839496;"> }</span></span>
<span class="line"><span style="color:#839496;">}</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">{</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">&quot;pnpm&quot;</span><span style="color:#657B83;">: {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">&quot;overrides&quot;</span><span style="color:#657B83;">: {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">&quot;remark-shiki-twoslash&gt;shiki&quot;</span><span style="color:#657B83;">: </span><span style="color:#2AA198;">&quot;^0.14.1&quot;</span><span style="color:#657B83;">,</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">&quot;shiki-twoslash&gt;shiki&quot;</span><span style="color:#657B83;">: </span><span style="color:#2AA198;">&quot;^0.14.1&quot;</span></span>
<span class="line"><span style="color:#657B83;"> }</span></span>
<span class="line"><span style="color:#657B83;"> }</span></span>
<span class="line"><span style="color:#657B83;">}</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></div></div><p>Tracked in an upstream issue: <a href="https://github.com/shikijs/twoslash/issues/180" target="_blank" rel="noreferrer">https://github.com/shikijs/twoslash/issues/180</a></p></div><h2 id="configure" tabindex="-1">Configure <a class="header-anchor" href="#configure" aria-label="Permalink to &quot;Configure&quot;"></a></h2><p>First, wrap your VitePress config file with the <code>withTwoslash</code> wrapper.</p>`,7),d=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// .vitepress/config.[ext]")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function withTwoslash(config: UserConfig<DefaultTheme.Config>): Promise<UserConfig<DefaultTheme.Config>>
import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#839496"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) withTwoslash(config: UserConfig<DefaultTheme.Config>): Promise<UserConfig<DefaultTheme.Config>>
import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#839496"}},"(")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#839496"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#586E75"}},"// Your VitePress config")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," })")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},")")])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// .vitepress/config.[ext]")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," { "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) function withTwoslash(config: UserConfig<DefaultTheme.Config>): Promise<UserConfig<DefaultTheme.Config>>
import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#657B83"}}," } "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) withTwoslash(config: UserConfig<DefaultTheme.Config>): Promise<UserConfig<DefaultTheme.Config>>
import withTwoslash`},"withTwoslash")]),s("span",{style:{color:"#657B83"}},"(")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) defineConfig(config: UserConfig<DefaultTheme.Config>): UserConfig<DefaultTheme.Config>
import defineConfig`},"defineConfig")]),s("span",{style:{color:"#657B83"}},"({")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#93A1A1"}},"// Your VitePress config")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," })")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},")")])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),u=s("p",null,[l("Then, import "),s("code",null,"@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css"),l(" into your theme.")],-1),h=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// .vitepress/theme/index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: {
Layout: DefineComponent;
NotFound: DefineComponent;
enhanceApp: (ctx: EnhanceAppContext) => void;
}
import defaultTheme`},"defaultTheme")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress/theme'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: {
Layout: DefineComponent;
NotFound: DefineComponent;
enhanceApp: (ctx: EnhanceAppContext) => void;
}
import defaultTheme`},"defaultTheme")])])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// .vitepress/theme/index.ts")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: {
Layout: DefineComponent;
NotFound: DefineComponent;
enhanceApp: (ctx: EnhanceAppContext) => void;
}
import defaultTheme`},"defaultTheme")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"from"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'vitepress/theme'")]),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"import"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#859900"}},"export"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"default"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:`(alias) const defaultTheme: {
Layout: DefineComponent;
NotFound: DefineComponent;
enhanceApp: (ctx: EnhanceAppContext) => void;
}
import defaultTheme`},"defaultTheme")])])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),g=e(`<div class="tip custom-block"><p class="custom-block-title">TIP</p><p>You can <a href="./config/reference">configure VitePress Twoslash</a> using the <code>twoslash</code> property added to <code>defineConfig</code>.</p></div><h2 id="add-twoslash" tabindex="-1">Add Twoslash <a class="header-anchor" href="#add-twoslash" aria-label="Permalink to &quot;Add Twoslash&quot;"></a></h2><p>Finally, add the <code>twoslash</code> attribute to markdown fenced code blocks.</p><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 solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// Removes &#39;readonly&#39; attributes from a type&#39;s properties</span></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">type</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">CreateMutable</span><span style="color:#839496;">&lt;</span><span style="color:#CB4B16;">Type</span><span style="color:#839496;">&gt; </span><span style="color:#859900;">=</span><span style="color:#839496;"> {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#859900;">-</span><span style="color:#93A1A1;font-weight:bold;">readonly</span><span style="color:#839496;"> [</span><span style="color:#CB4B16;">Property</span><span style="color:#839496;"> </span><span style="color:#859900;">in</span><span style="color:#839496;"> </span><span style="color:#859900;">keyof</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">Type</span><span style="color:#839496;">]</span><span style="color:#859900;">:</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">Type</span><span style="color:#839496;">[</span><span style="color:#CB4B16;">Property</span><span style="color:#839496;">]</span></span>
<span class="line"><span style="color:#839496;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">type</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">LockedAccount</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> {</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#93A1A1;font-weight:bold;">readonly</span><span style="color:#839496;"> id</span><span style="color:#859900;">:</span><span style="color:#839496;"> </span><span style="color:#859900;">string</span></span>
<span class="line"><span style="color:#839496;"> </span><span style="color:#93A1A1;font-weight:bold;">readonly</span><span style="color:#839496;"> name</span><span style="color:#859900;">:</span><span style="color:#839496;"> </span><span style="color:#859900;">string</span></span>
<span class="line"><span style="color:#839496;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#93A1A1;font-weight:bold;">type</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">UnlockedAccount</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> </span><span style="color:#CB4B16;">CreateMutable</span><span style="color:#839496;">&lt;</span><span style="color:#CB4B16;">LockedAccount</span><span style="color:#839496;">&gt;</span></span>
<span class="line"><span style="color:#586E75;font-style:italic;">// ^?</span></span>
<span class="line"><span style="color:#839496;">\`\`\`</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">\`\`\`ts twoslash</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// Removes &#39;readonly&#39; attributes from a type&#39;s properties</span></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">type</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">CreateMutable</span><span style="color:#657B83;">&lt;</span><span style="color:#CB4B16;">Type</span><span style="color:#657B83;">&gt; </span><span style="color:#859900;">=</span><span style="color:#657B83;"> {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#859900;">-</span><span style="color:#586E75;font-weight:bold;">readonly</span><span style="color:#657B83;"> [</span><span style="color:#CB4B16;">Property</span><span style="color:#657B83;"> </span><span style="color:#859900;">in</span><span style="color:#657B83;"> </span><span style="color:#859900;">keyof</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">Type</span><span style="color:#657B83;">]</span><span style="color:#859900;">:</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">Type</span><span style="color:#657B83;">[</span><span style="color:#CB4B16;">Property</span><span style="color:#657B83;">]</span></span>
<span class="line"><span style="color:#657B83;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">type</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">LockedAccount</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> {</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#586E75;font-weight:bold;">readonly</span><span style="color:#657B83;"> id</span><span style="color:#859900;">:</span><span style="color:#657B83;"> </span><span style="color:#859900;">string</span></span>
<span class="line"><span style="color:#657B83;"> </span><span style="color:#586E75;font-weight:bold;">readonly</span><span style="color:#657B83;"> name</span><span style="color:#859900;">:</span><span style="color:#657B83;"> </span><span style="color:#859900;">string</span></span>
<span class="line"><span style="color:#657B83;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#586E75;font-weight:bold;">type</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">UnlockedAccount</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> </span><span style="color:#CB4B16;">CreateMutable</span><span style="color:#657B83;">&lt;</span><span style="color:#CB4B16;">LockedAccount</span><span style="color:#657B83;">&gt;</span></span>
<span class="line"><span style="color:#93A1A1;font-style:italic;">// ^?</span></span>
<span class="line"><span style="color:#657B83;">\`\`\`</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><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>And your code blocks will be twoslashified!</p>`,5),B=s("div",{class:"language-ts vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#839496"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#839496"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#93A1A1"}},"readonly"),s("span",{style:{color:"#839496"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"type"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = {
id: string;
name: string;
}`,style:{"border-bottom":"solid 2px lightgrey"}},"UnlockedAccount")]),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#839496"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#839496"}},">")]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"}," "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l(`type UnlockedAccount = {
id: string;
name: string;
}`)])])])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"// Removes 'readonly' attributes from a type's properties")]),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"> "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"-"),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}}," ["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"in"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"keyof"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"]"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Type in type CreateMutable<Type>"},"Type")]),s("span",{style:{color:"#657B83"}},"["),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"(type parameter) Property"},"Property")]),s("span",{style:{color:"#657B83"}},"]")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," {")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) id: string"},"id")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#586E75"}},"readonly"),s("span",{style:{color:"#657B83"}},[l(),s("data-lsp",{lsp:"(property) name: string"},"name")]),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string")]),s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")]),s("div",{class:"line"}," "),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"type"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type UnlockedAccount = {
id: string;
name: string;
}`,style:{"border-bottom":"solid 2px lightgrey"}},"UnlockedAccount")]),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:"type CreateMutable<Type> = { -readonly [Property in keyof Type]: Type[Property]; }"},"CreateMutable")]),s("span",{style:{color:"#657B83"}},"<"),s("span",{style:{color:"#CB4B16"}},[s("data-lsp",{lsp:`type LockedAccount = {
readonly id: string;
readonly name: string;
}`},"LockedAccount")]),s("span",{style:{color:"#657B83"}},">")]),s("div",{class:"meta-line"},[s("span",{class:"popover-prefix"}," "),s("span",{class:"popover"},[s("div",{class:"arrow"}),l(`type UnlockedAccount = {
id: string;
name: string;
}`)])])])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br")])],-1),m=[t,r,c,i,y,d,u,h,g,B];function f(v,b,C,k,T,A){return n(),o("div",null,m)}const _=a(p,[["render",f]]);export{P as __pageData,_ as default};