feat: add autolink headings. 617a46c1a5

This commit is contained in:
jaywcjlove
2022-09-30 15:18:53 +00:00
parent 98f8b9cdb7
commit a108b1e838
24 changed files with 690 additions and 683 deletions

View File

@ -15,29 +15,29 @@
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/typescript.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1>TypeScript 备忘清单</h1><div class="wrap-body">
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/typescript.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="typescript-备忘清单"><a aria-hidden="true" tabindex="-1" href="#typescript-备忘清单"><span class="icon icon-link"></span></a>TypeScript 备忘清单</h1><div class="wrap-body">
<p>包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门 Interface</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门-interface"><a aria-hidden="true" tabindex="-1" href="#入门-interface"><span class="icon icon-link"></span></a>入门 Interface</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
<p>TypeScript 是具有类型语法的 JavaScript。Interface 是为了匹配它们的运行时行为而构建的。</p>
<ul>
<li><a href="./javascript.html">JavaScript 备忘清单</a></li>
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a></li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>内置类型基元</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置类型基元"><a aria-hidden="true" tabindex="-1" href="#内置类型基元"><span class="icon icon-link"></span></a>内置类型基元</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="2"><span class="token builtin">boolean</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="4"><span class="token builtin">unknown</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="5">bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>常见的内置 JS 对象</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="常见的内置-js-对象"><a aria-hidden="true" tabindex="-1" href="#常见的内置-js-对象"><span class="icon icon-link"></span></a>常见的内置 JS 对象</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1">Date<span class="token punctuation">,</span> Error<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="2"><span class="token builtin">Array</span><span class="token punctuation">,</span> Map<span class="token punctuation">,</span> Set<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3">Regexp<span class="token punctuation">,</span> <span class="token builtin">Promise</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>内置</h3><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>类型字面量</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置"><a aria-hidden="true" tabindex="-1" href="#内置"><span class="icon icon-link"></span></a>内置</h3><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="类型字面量"><a aria-hidden="true" tabindex="-1" href="#类型字面量"><span class="icon icon-link"></span></a>类型字面量</h4><div class="wrap-body">
<p>Object:</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
</span></code></pre>
@ -50,10 +50,10 @@
<p>Tuple:</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>避免</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="避免"><a aria-hidden="true" tabindex="-1" href="#避免"><span class="icon icon-link"></span></a>避免</h4><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">Object, String, Number, Boolean
</span></code></pre>
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="通用语法"><a aria-hidden="true" tabindex="-1" href="#通用语法"><span class="icon icon-link"></span></a>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">interface</span> <span class="token class-name">JSONResponse</span> <span class="token keyword">extends</span> <span class="token class-name">Response</span><span class="token punctuation">,</span> HTTPAble <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
@ -75,13 +75,13 @@
</span><span class="code-line line-number" line="19"> <span class="token keyword">readonly</span> body<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>泛型</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="泛型"><a aria-hidden="true" tabindex="-1" href="#泛型"><span class="icon icon-link"></span></a>泛型</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<p>声明一个可以在你的 Interface 中改变的类型</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall<span class="token operator">&#x3C;</span>Response<span class="token operator">></span></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>用法</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="用法"><a aria-hidden="true" tabindex="-1" href="#用法"><span class="icon icon-link"></span></a>用法</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> api<span class="token operator">:</span> APICall<span class="token operator">&#x3C;</span>ArtworkCall<span class="token operator">></span> <span class="token operator">=</span> <span class="token operator">...</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3">api<span class="token punctuation">.</span>data <span class="token comment">// Artwork</span>
@ -95,21 +95,21 @@
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7">api<span class="token punctuation">.</span>data<span class="token punctuation">.</span>status
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>重载</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="重载"><a aria-hidden="true" tabindex="-1" href="#重载"><span class="icon icon-link"></span></a>重载</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Expect</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token function">string</span>
</span><span class="code-line line-number" line="3"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
<p>一个可调用 Interface 可以对不同的参数集有多个定义。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>类一致性</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="类一致性"><a aria-hidden="true" tabindex="-1" href="#类一致性"><span class="icon icon-link"></span></a>类一致性</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">sync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="4"><span class="token keyword">class</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
</span></code></pre>
<p>您可以通过实现确保类 class 符合 Interface。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Get &#x26; Set</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="get--set"><a aria-hidden="true" tabindex="-1" href="#get--set"><span class="icon icon-link"></span></a>Get &#x26; Set</h3><div class="wrap-body">
<p>对象可以有自定义的 <code>getter</code><code>setter</code></p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Ruler</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">get</span> <span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span>
@ -121,7 +121,7 @@
</span><span class="code-line line-number" line="2">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token number">12</span>
</span><span class="code-line line-number" line="3">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token string">"36"</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>通过合并扩展</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="通过合并扩展"><a aria-hidden="true" tabindex="-1" href="#通过合并扩展"><span class="icon icon-link"></span></a>通过合并扩展</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -131,54 +131,54 @@
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
<p>Interface 被合并,多个声明将向类型定义添加新字段。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Type</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Type vs Interface</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="type"><a aria-hidden="true" tabindex="-1" href="#type"><span class="icon icon-link"></span></a>Type</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="type-vs-interface"><a aria-hidden="true" tabindex="-1" href="#type-vs-interface"><span class="icon icon-link"></span></a>Type vs Interface</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<ul>
<li>Interface 只能描述对象形状</li>
<li>Interface 可以通过多次声明来扩展</li>
<li>在性能关键 Type 中Interface 比较检查可以更快。</li>
</ul>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>把类型想象成变量</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="把类型想象成变量"><a aria-hidden="true" tabindex="-1" href="#把类型想象成变量"><span class="icon icon-link"></span></a>把类型想象成变量</h4><div class="wrap-body">
<p>就像您如何在不同范围内创建具有相同名称的变量一样type 具有相似的语义。</p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>使用实用程序类型构建</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="使用实用程序类型构建"><a aria-hidden="true" tabindex="-1" href="#使用实用程序类型构建"><span class="icon icon-link"></span></a>使用实用程序类型构建</h4><div class="wrap-body">
<p>TypeScript 包含许多全局类型,它们将帮助您在类型系统中完成常见任务。检查他们的网站。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>原始类型</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="原始类型"><a aria-hidden="true" tabindex="-1" href="#原始类型"><span class="icon icon-link"></span></a>原始类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SanitizedInput</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">MissingNo</span> <span class="token operator">=</span> <span class="token number">404</span><span class="token punctuation">;</span>
</span></code></pre>
<p>主要用于文档</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>对象字面类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象字面类型"><a aria-hidden="true" tabindex="-1" href="#对象字面类型"><span class="icon icon-link"></span></a>对象字面类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>联合类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="联合类型"><a aria-hidden="true" tabindex="-1" href="#联合类型"><span class="icon icon-link"></span></a>联合类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Size</span> <span class="token operator">=</span> <span class="token string">"small"</span> <span class="token operator">|</span> <span class="token string">"medium"</span> <span class="token operator">|</span> <span class="token string">"large"</span>
</span></code></pre>
<p>描述许多选项中的一个类型,例如已知字符串的列表。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>交叉口类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="交叉口类型"><a aria-hidden="true" tabindex="-1" href="#交叉口类型"><span class="icon icon-link"></span></a>交叉口类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="2"> <span class="token operator">&#x26;</span> <span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// { x: number, y: number }</span>
</span></code></pre>
<p>一种合并/扩展类型的方法</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>从值类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="从值类型"><a aria-hidden="true" tabindex="-1" href="#从值类型"><span class="icon icon-link"></span></a>从值类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> data
</span></code></pre>
<p>通过 typeof 运算符重用来自现有 JavaScript 运行时值的类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>从函数返回类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="从函数返回类型"><a aria-hidden="true" tabindex="-1" href="#从函数返回类型"><span class="icon icon-link"></span></a>从函数返回类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">createFixtures</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Fixtures</span> <span class="token operator">=</span> ReturnType<span class="token operator">&#x3C;</span><span class="token keyword">typeof</span> createFixtures<span class="token operator">></span>
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span>fixture<span class="token operator">:</span> Fixtures<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></code></pre>
<p>将函数的返回值重新用作类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>从模块类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="从模块类型"><a aria-hidden="true" tabindex="-1" href="#从模块类型"><span class="icon icon-link"></span></a>从模块类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data<span class="token operator">:</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./data"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data
</span></code></pre>
<p>这些功能非常适合构建库、描述现有的 JavaScript 代码,您可能会发现在大多数 TypeScript 应用程序中很少使用它们。</p>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>对象字面量语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="对象字面量语法"><a aria-hidden="true" tabindex="-1" href="#对象字面量语法"><span class="icon icon-link"></span></a>对象字面量语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">JSONResponse</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 字段</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">/** In bytes */</span> <span class="token comment">// 附加文档</span>
@ -193,7 +193,7 @@
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
</span></code></pre>
<p>用于节省空间的 Terser请参阅 Interface 备忘清单了解更多信息除了“static”匹配之外的所有内容。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>映射类型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="映射类型"><a aria-hidden="true" tabindex="-1" href="#映射类型"><span class="icon icon-link"></span></a>映射类型</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Artist</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> bio<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -207,7 +207,7 @@
</span><span class="code-line line-number" line="11"><span class="token comment">// void, bio: (nv: string) => void }</span>
</span></code></pre>
<p>类似于类型系统的映射语句,允许输入类型更改新类型的结构。</p>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>模板联合类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="模板联合类型"><a aria-hidden="true" tabindex="-1" href="#模板联合类型"><span class="icon icon-link"></span></a>模板联合类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SupportedLangs</span> <span class="token operator">=</span> <span class="token string">"en"</span> <span class="token operator">|</span> <span class="token string">"pt"</span> <span class="token operator">|</span> <span class="token string">"zh"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">FooterLocaleIDs</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">|</span> <span class="token string">"footer"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">AllLocaleIDs</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>SupportedLangs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>FooterLocaleIDs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_id</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
@ -216,16 +216,16 @@
</span><span class="code-line line-number" line="6"><span class="token comment">// | "pt_header_id" | "pt_footer_id"</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// | "zh_header_id" | "zh_footer_id"</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>条件类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="条件类型"><a aria-hidden="true" tabindex="-1" href="#条件类型"><span class="icon icon-link"></span></a>条件类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">HasFourLegs<span class="token operator">&#x3C;</span>Animal<span class="token operator">></span></span> <span class="token operator">=</span> Animal <span class="token keyword">extends</span> <span class="token punctuation">{</span> legs<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span> <span class="token operator">?</span> Animal <span class="token operator">:</span> <span class="token builtin">never</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Animals</span> <span class="token operator">=</span> Bird <span class="token operator">|</span> Dog <span class="token operator">|</span> Ant <span class="token operator">|</span> Wolf<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">FourLegs</span> <span class="token operator">=</span> HasFourLegs<span class="token operator">&#x3C;</span>Animals<span class="token operator">></span>
</span><span class="code-line line-number" line="4"><span class="token comment">// Dog | Wolf</span>
</span></code></pre>
<p>在类型系统中充当“if 语句”。 通过泛型创建,然后通常用于减少类型联合中的选项数量。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>控制流动分析</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>If 声明</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>typeof用于原语</h4><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="控制流动分析"><a aria-hidden="true" tabindex="-1" href="#控制流动分析"><span class="icon icon-link"></span></a>控制流动分析</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="if-声明"><a aria-hidden="true" tabindex="-1" href="#if-声明"><span class="icon icon-link"></span></a>If 声明</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="typeof用于原语"><a aria-hidden="true" tabindex="-1" href="#typeof用于原语"><span class="icon icon-link"></span></a>typeof用于原语</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
</span><span class="code-line line-number" line="3">
@ -233,7 +233,7 @@
</span><span class="code-line line-number" line="5"> input <span class="token comment">// string</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>对象中的“property”对于对象</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="对象中的property对于对象"><a aria-hidden="true" tabindex="-1" href="#对象中的property对于对象"><span class="icon icon-link"></span></a>对象中的“property”对于对象</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | { error: ... }</span>
</span><span class="code-line line-number" line="3">
@ -241,7 +241,7 @@
</span><span class="code-line line-number" line="5"> input <span class="token comment">// { error: ... }</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>instanceof用于类</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="instanceof用于类"><a aria-hidden="true" tabindex="-1" href="#instanceof用于类"><span class="icon icon-link"></span></a>instanceof用于类</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
</span><span class="code-line line-number" line="3">
@ -249,7 +249,7 @@
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>类型保护功能(适用于任何东西)</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="类型保护功能适用于任何东西"><a aria-hidden="true" tabindex="-1" href="#类型保护功能适用于任何东西"><span class="icon icon-link"></span></a>类型保护功能(适用于任何东西)</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
</span><span class="code-line line-number" line="3">
@ -257,7 +257,7 @@
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>任务</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
</div></div></div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="任务"><a aria-hidden="true" tabindex="-1" href="#任务"><span class="icon icon-link"></span></a>任务</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -288,10 +288,10 @@
</span><span class="code-line line-number" line="3">data <span class="token operator">=</span> <span class="token string">"Hello"</span>
</span><span class="code-line line-number" line="4">data <span class="token comment">// string</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>关键点</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="关键点"><a aria-hidden="true" tabindex="-1" href="#关键点"><span class="icon icon-link"></span></a>关键点</h3><div class="wrap-body">
<p>CFA 几乎总是采用联合,并根据代码中的逻辑减少联合内的类型数量。</p>
<p>大多数时候 CFA 在自然 JavaScript 布尔逻辑中工作,但是有一些方法可以定义您自己的函数,这些函数会影响 TypeScript 如何缩小类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>表达式</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="表达式"><a aria-hidden="true" tabindex="-1" href="#表达式"><span class="icon icon-link"></span></a>表达式</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> inputLength <span class="token operator">=</span>
@ -300,13 +300,13 @@
</span><span class="code-line line-number" line="6"> <span class="token comment">// input: string</span>
</span></code></pre>
<p>在进行布尔运算时,缩窄也发生在与代码相同的行上</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>可识别联合</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="可识别联合"><a aria-hidden="true" tabindex="-1" href="#可识别联合"><span class="icon icon-link"></span></a>可识别联合</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Responses</span> <span class="token operator">=</span>
</span><span class="code-line line-number" line="2"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="3"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">301</span><span class="token punctuation">,</span> to<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="4"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> error<span class="token operator">:</span> Error <span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>用法</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="用法-1"><a aria-hidden="true" tabindex="-1" href="#用法-1"><span class="icon icon-link"></span></a>用法</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">response <span class="token comment">// Responses</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">switch</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -315,7 +315,7 @@
</span><span class="code-line line-number" line="6"> <span class="token keyword">case</span> <span class="token number">400</span><span class="token operator">:</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>error
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>断言函数</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="断言函数"><a aria-hidden="true" tabindex="-1" href="#断言函数"><span class="icon icon-link"></span></a>断言函数</h3><div class="wrap-body">
<p>描述影响当前范围的 CFA 更改的函数,因为它抛出而不是返回 false。</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">assertResponse</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">asserts</span> obj <span class="token keyword">is</span> SuccessResponse <span class="token punctuation">{</span>
@ -324,7 +324,7 @@
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>用法</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="用法-2"><a aria-hidden="true" tabindex="-1" href="#用法-2"><span class="icon icon-link"></span></a>用法</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
</span><span class="code-line line-number" line="2">res <span class="token comment">// SuccessResponse | ErrorResponse</span>
</span><span class="code-line line-number" line="3">
@ -333,7 +333,7 @@
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7">res <span class="token comment">// SuccessResponse</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>in 操作符</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="in-操作符"><a aria-hidden="true" tabindex="-1" href="#in-操作符"><span class="icon icon-link"></span></a>in 操作符</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -350,13 +350,13 @@
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
</span></code></pre>
<p>操作符可以安全的检查一个对象上是否存在一个属性,它通常也被作为类型保护使用</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Class</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>创建类实例</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="class"><a aria-hidden="true" tabindex="-1" href="#class"><span class="icon icon-link"></span></a>Class</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="创建类实例"><a aria-hidden="true" tabindex="-1" href="#创建类实例"><span class="icon icon-link"></span></a>创建类实例</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">ABC</span></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> abc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">ABC</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<p>新 ABC 的参数来自构造函数。</p>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>private x 与 #private</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="private-x-与-private"><a aria-hidden="true" tabindex="-1" href="#private-x-与-private"><span class="icon icon-link"></span></a>private x 与 #private</h4><div class="wrap-body">
<p>前缀 private 是一个仅类型的添加,在运行时没有任何影响。 在以下情况下,类之外的代码可以进入项目:</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">private</span> item<span class="token operator">:</span> <span class="token builtin">any</span>
@ -365,17 +365,17 @@
<p>Vs #private 是运行时私有的,并且在 JavaScript 引擎内部强制执行,它只能在类内部访问:</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span> #item<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Class 上的 “this”</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="class-上的-this"><a aria-hidden="true" tabindex="-1" href="#class-上的-this"><span class="icon icon-link"></span></a>Class 上的 “this”</h4><div class="wrap-body">
<p>函数内部this的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。</p>
<p>您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。</p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>类型和值</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="类型和值"><a aria-hidden="true" tabindex="-1" href="#类型和值"><span class="icon icon-link"></span></a>类型和值</h4><div class="wrap-body">
<p>一个类既可以用作类型也可以用作值。</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> a<span class="token operator">:</span>Bag <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Bag</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<p>所以,小心不要这样做:</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token keyword">implements</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="通用语法-1"><a aria-hidden="true" tabindex="-1" href="#通用语法-1"><span class="icon icon-link"></span></a>通用语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 确保类符合一组接口或类型 ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 子类这个类 ┈┈┈┈┈┈┈┈↘ ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token keyword">extends</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Updatable</span><span class="token punctuation">,</span> Serializable <span class="token punctuation">{</span>
@ -413,7 +413,7 @@
</span><span class="code-line line-number" line="35"> <span class="token keyword">static</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#userCount <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="36"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>泛型</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="泛型-1"><a aria-hidden="true" tabindex="-1" href="#泛型-1"><span class="icon icon-link"></span></a>泛型</h3><div class="wrap-body">
<p>声明一个可以在你的类方法中改变的类型。</p>
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Box<span class="token operator">&#x3C;</span>Type<span class="token operator">></span></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> contents<span class="token operator">:</span> Type
@ -424,7 +424,7 @@
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> stringBox <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Box</span><span class="token punctuation">(</span><span class="token string">"a package"</span><span class="token punctuation">)</span>
</span></code></pre>
<p>这些功能是 TypeScript 特定的语言扩展,可能永远无法使用当前语法进入 JavaScript。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>参数属性</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="参数属性"><a aria-hidden="true" tabindex="-1" href="#参数属性"><span class="icon icon-link"></span></a>参数属性</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Location</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token keyword">public</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token keyword">public</span> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -434,7 +434,7 @@
</span><span class="code-line line-number" line="7">loc<span class="token punctuation">.</span>y <span class="token comment">// 40</span>
</span></code></pre>
<p>TypeScript 特定于类的扩展,可自动将实例字段设置为输入参数。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>抽象类</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="抽象类"><a aria-hidden="true" tabindex="-1" href="#抽象类"><span class="icon icon-link"></span></a>抽象类</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">abstract</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token function">printName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -444,7 +444,7 @@
</span><span class="code-line line-number" line="7"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
</span></code></pre>
<p>一个类可以被声明为不可实现,但可以在类型系统中被子类化。 class 成员也可以。</p>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>装饰器和属性</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="装饰器和属性"><a aria-hidden="true" tabindex="-1" href="#装饰器和属性"><span class="icon icon-link"></span></a>装饰器和属性</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token punctuation">{</span> Syncable<span class="token punctuation">,</span> triggersSync<span class="token punctuation">,</span> preferCache<span class="token punctuation">,</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"mylib"</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Syncable</span></span>
@ -457,7 +457,7 @@
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span></code></pre>
<p>您可以在类、类方法、访问器、属性和方法参数上使用装饰器。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>索引签名</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="索引签名"><a aria-hidden="true" tabindex="-1" href="#索引签名"><span class="icon icon-link"></span></a>索引签名</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token comment">// 最好将索引数据存储在另一个地方</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 而不是类实例本身。</span>
@ -470,8 +470,8 @@
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span></code></pre>
<p>类可以声明索引签名,与其他对象类型的索引签名相同。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>实用程序类型</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>Awaited&#x3C;Type></h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="实用程序类型"><a aria-hidden="true" tabindex="-1" href="#实用程序类型"><span class="icon icon-link"></span></a>实用程序类型</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="awaitedtype"><a aria-hidden="true" tabindex="-1" href="#awaitedtype"><span class="icon icon-link"></span></a>Awaited&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> Awaited<span class="token operator">&#x3C;</span><span class="token builtin">Promise</span><span class="token operator">&#x3C;</span><span class="token builtin">string</span><span class="token operator">>></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// type A = string</span>
</span><span class="code-line line-number" line="3">
@ -482,7 +482,7 @@
</span><span class="code-line line-number" line="8"><span class="token comment">// type C = number | boolean</span>
</span></code></pre>
<p>这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Required&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="requiredtype"><a aria-hidden="true" tabindex="-1" href="#requiredtype"><span class="icon icon-link"></span></a>Required&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> a<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> b<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
@ -494,7 +494,7 @@
</span><span class="code-line line-number" line="9"><span class="token comment">// 但在 'Required&#x3C;Props>' 类型中是必需的。</span>
</span></code></pre>
<p>使 Type 中的所有属性成为必需</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Readonly&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="readonlytype"><a aria-hidden="true" tabindex="-1" href="#readonlytype"><span class="icon icon-link"></span></a>Readonly&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -508,7 +508,7 @@
</span><span class="code-line line-number" line="11"> <span class="token operator">:</span> Readonly<span class="token operator">&#x3C;</span>Type<span class="token operator">></span><span class="token punctuation">;</span>
</span></code></pre>
<p>将 Type 中的所有属性设为<strong>只读</strong></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Partial&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="partialtype"><a aria-hidden="true" tabindex="-1" href="#partialtype"><span class="icon icon-link"></span></a>Partial&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
@ -528,7 +528,7 @@
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p><code>Type</code> 中的所有属性设为可选</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Record&#x3C;Keys, Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="recordkeys-type"><a aria-hidden="true" tabindex="-1" href="#recordkeys-type"><span class="icon icon-link"></span></a>Record&#x3C;Keys, Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">CatInfo</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> breed<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
@ -544,7 +544,7 @@
</span><span class="code-line line-number" line="13"><span class="token comment">// 👉 const cats: Record&#x3C;CatName, CatInfo></span>
</span></code></pre>
<p>构造一个具有一组 Keys 类型的属性 Type 的类型</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Pick&#x3C;Type, Keys></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="picktype-keys"><a aria-hidden="true" tabindex="-1" href="#picktype-keys"><span class="icon icon-link"></span></a>Pick&#x3C;Type, Keys></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
@ -562,7 +562,7 @@
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
</span></code></pre>
<p>从 Type 中<strong>选择</strong>一组其键在并集 Keys 中的属性</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Exclude&#x3C;UnionType, ExcludedMembers></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="excludeuniontype-excludedmembers"><a aria-hidden="true" tabindex="-1" href="#excludeuniontype-excludedmembers"><span class="icon icon-link"></span></a>Exclude&#x3C;UnionType, ExcludedMembers></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Exclude<span class="token operator">&#x3C;</span><span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token operator">></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 👉 type T0 = "b" | "c"</span>
</span><span class="code-line line-number" line="3">
@ -574,7 +574,7 @@
</span><span class="code-line line-number" line="9"><span class="token comment">// 👉 type T2 = string | number</span>
</span></code></pre>
<p><code>UnionType</code><strong>排除</strong>那些可分配给 <code>ExcludedMembers</code> 的类型</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Extract&#x3C;Type, Union></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="extracttype-union"><a aria-hidden="true" tabindex="-1" href="#extracttype-union"><span class="icon icon-link"></span></a>Extract&#x3C;Type, Union></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Extract<span class="token operator">&#x3C;</span>
</span><span class="code-line line-number" line="2"> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"f"</span>
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
@ -586,7 +586,7 @@
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = () => void</span>
</span></code></pre>
<p>通过从 Type 中<strong>提取</strong>所有可分配给 Union 的联合成员来构造一个类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>NonNullable&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="nonnullabletype"><a aria-hidden="true" tabindex="-1" href="#nonnullabletype"><span class="icon icon-link"></span></a>NonNullable&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> NonNullable<span class="token operator">&#x3C;</span>
</span><span class="code-line line-number" line="2"> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
@ -598,7 +598,7 @@
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = string[]</span>
</span></code></pre>
<p>通过从 Type 中<strong>排除</strong> null 和 undefined 来构造一个类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Omit&#x3C;Type, Keys></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="omittype-keys"><a aria-hidden="true" tabindex="-1" href="#omittype-keys"><span class="icon icon-link"></span></a>Omit&#x3C;Type, Keys></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> completed<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
@ -616,7 +616,7 @@
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
</span></code></pre>
<p>构造一个具有 Type 属性的类型,但类型 Keys 中的属性<strong>除外</strong></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Parameters&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="parameterstype"><a aria-hidden="true" tabindex="-1" href="#parameterstype"><span class="icon icon-link"></span></a>Parameters&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="2"> arg<span class="token operator">:</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
@ -638,7 +638,7 @@
</span><span class="code-line line-number" line="19"><span class="token comment">// type T5 = never</span>
</span></code></pre>
<p>从函数类型 Type 的<strong>参数中</strong>使用的类型构造元组类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ConstructorParameters&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="constructorparameterstype"><a aria-hidden="true" tabindex="-1" href="#constructorparameterstype"><span class="icon icon-link"></span></a>ConstructorParameters&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator">&#x3C;</span>
</span><span class="code-line line-number" line="2"> ErrorConstructor
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
@ -658,8 +658,8 @@
</span><span class="code-line line-number" line="17"><span class="token comment">// type T3 = unknown[]</span>
</span></code></pre>
<p>从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型(如果 Type 不是函数,则类型 never )。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>内在字符串操作类型</h3><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>Uppercase&#x3C;StringType></h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内在字符串操作类型"><a aria-hidden="true" tabindex="-1" href="#内在字符串操作类型"><span class="icon icon-link"></span></a>内在字符串操作类型</h3><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="uppercasestringtype"><a aria-hidden="true" tabindex="-1" href="#uppercasestringtype"><span class="icon icon-link"></span></a>Uppercase&#x3C;StringType></h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">ShoutyGreeting</span> <span class="token operator">=</span> Uppercase<span class="token operator">&#x3C;</span>Greeting<span class="token operator">></span>
</span><span class="code-line line-number" line="3"><span class="token comment">// type ShoutyGreeting = "HELLO, WORLD"</span>
@ -669,7 +669,7 @@
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "ID-MY_APP"</span>
</span></code></pre>
<p>将字符串中的每个字符<strong>转换为大写</strong>版本。</p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Lowercase&#x3C;StringType></h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="lowercasestringtype"><a aria-hidden="true" tabindex="-1" href="#lowercasestringtype"><span class="icon icon-link"></span></a>Lowercase&#x3C;StringType></h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">QuietGreeting</span> <span class="token operator">=</span> Lowercase<span class="token operator">&#x3C;</span>Greeting<span class="token operator">></span>
</span><span class="code-line line-number" line="3"><span class="token comment">// type QuietGreeting = "hello, world"</span>
@ -679,19 +679,19 @@
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "id-my_app"</span>
</span></code></pre>
<p>将字符串中的每个字符转换为等效的<strong>小写字母</strong></p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Capitalize&#x3C;StringType></h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="capitalizestringtype"><a aria-hidden="true" tabindex="-1" href="#capitalizestringtype"><span class="icon icon-link"></span></a>Capitalize&#x3C;StringType></h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">LowercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"hello, world"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> Capitalize<span class="token operator">&#x3C;</span>LowercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// type Greeting = "Hello, world"</span>
</span></code></pre>
<p>将字符串中的第一个字符转换为等效的<strong>大写字母</strong></p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Uncapitalize&#x3C;StringType></h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="uncapitalizestringtype"><a aria-hidden="true" tabindex="-1" href="#uncapitalizestringtype"><span class="icon icon-link"></span></a>Uncapitalize&#x3C;StringType></h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">UppercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"HELLO WORLD"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">UncomfortableGreeting</span> <span class="token operator">=</span> Uncapitalize<span class="token operator">&#x3C;</span>UppercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// type UncomfortableGreeting = "hELLO WORLD"</span>
</span></code></pre>
<p>将字符串中的第一个字符转换为等效的<strong>小写字母</strong></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ReturnType&#x3C;Type></h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="returntypetype"><a aria-hidden="true" tabindex="-1" href="#returntypetype"><span class="icon icon-link"></span></a>ReturnType&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
@ -723,7 +723,7 @@
</span><span class="code-line line-number" line="29"><span class="token comment">// type T6 = never</span>
</span></code></pre>
<p>构造一个由函数 Type 的<strong>返回类型</strong>组成的类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ThisType&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="thistypetype"><a aria-hidden="true" tabindex="-1" href="#thistypetype"><span class="icon icon-link"></span></a>ThisType&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">ObjectDescriptor<span class="token operator">&#x3C;</span><span class="token constant">D</span><span class="token punctuation">,</span> <span class="token constant">M</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> data<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">D</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 方法中“this”的类型是 D &#x26; M</span>
@ -753,7 +753,7 @@
</span><span class="code-line line-number" line="27">obj<span class="token punctuation">.</span><span class="token function">moveBy</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>此实用程序不返回转换后的类型。 相反,它用作上下文 this 类型的标记。 请注意,必须启用 <a href="https://www.typescriptlang.org/tsconfig#noImplicitThis">noImplicitThis</a> 标志才能使用此实用程序。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>InstanceType&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="instancetypetype"><a aria-hidden="true" tabindex="-1" href="#instancetypetype"><span class="icon icon-link"></span></a>InstanceType&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
@ -766,7 +766,7 @@
</span><span class="code-line line-number" line="10"><span class="token comment">// type T2 = never</span>
</span></code></pre>
<p>构造一个由 Type 中构造函数的实例类型组成的类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ThisParameterType&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="thisparametertypetype"><a aria-hidden="true" tabindex="-1" href="#thisparametertypetype"><span class="icon icon-link"></span></a>ThisParameterType&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -778,7 +778,7 @@
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
<p>提取函数类型的 <code>this</code> 参数的类型,如果函数类型没有 <code>this</code> 参数,则为未知。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>OmitThisParameter&#x3C;Type></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="omitthisparametertype"><a aria-hidden="true" tabindex="-1" href="#omitthisparametertype"><span class="icon icon-link"></span></a>OmitThisParameter&#x3C;Type></h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -789,8 +789,8 @@
</span><span class="code-line line-number" line="8"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fiveToHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>从 Type 中移除 this 参数。 如果 Type 没有显式声明此参数,则结果只是 Type。 否则,从 Type 创建一个不带此参数的新函数类型。 泛型被删除,只有最后一个重载签名被传播到新的函数类型中。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JSX</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>JSX 介绍</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="jsx"><a aria-hidden="true" tabindex="-1" href="#jsx"><span class="icon icon-link"></span></a>JSX</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-介绍"><a aria-hidden="true" tabindex="-1" href="#jsx-介绍"><span class="icon icon-link"></span></a>JSX 介绍</h3><div class="wrap-body">
<p>JSX 规范是对 ECMAScript 的类似 XML 的语法扩展。</p>
<ul>
<li>使用 <code>.tsx</code> 扩展名命名您的文件</li>
@ -798,21 +798,21 @@
<li>不允许在 <code>.tsx</code> 文件中使用尖括号类型断言。</li>
<li><a href="https://facebook.github.io/jsx/">JSX 规范</a></li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>as 运算符</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="as-运算符"><a aria-hidden="true" tabindex="-1" href="#as-运算符"><span class="icon icon-link"></span></a>as 运算符</h3><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token operator">&#x3C;</span>foo<span class="token operator">></span>bar<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> foo <span class="token operator">=</span> bar <span class="token keyword">as</span> foo<span class="token punctuation">;</span>
</span></code></pre>
<p><code>as</code> 运算符在 <code>.ts</code><code>.tsx</code> 文件中都可用,并且在行为上与<strong>尖括号</strong>类型断言样式相同。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>基于值的元素</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="基于值的元素"><a aria-hidden="true" tabindex="-1" href="#基于值的元素"><span class="icon icon-link"></span></a>基于值的元素</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">MyComponent</span></span> <span class="token keyword">from</span> <span class="token string">"./myComponent"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
</span><span class="code-line line-number" line="4"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">SomeOtherComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
</span></code></pre>
<p>基于值的元素只是由范围内的标识符查找。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>内在的元素</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内在的元素"><a aria-hidden="true" tabindex="-1" href="#内在的元素"><span class="icon icon-link"></span></a>内在的元素</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">IntrinsicElements</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> foo<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
@ -828,7 +828,7 @@
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件"><a aria-hidden="true" tabindex="-1" href="#函数组件"><span class="icon icon-link"></span></a>函数组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">FooProp</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token constant">X</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
@ -844,7 +844,7 @@
</span><span class="code-line line-number" line="13"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>该组件被定义为一个 JavaScript 函数,其第一个参数是一个 props 对象。 TS 强制它的返回类型必须可分配给 JSX.Element。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数组件重载</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件重载"><a aria-hidden="true" tabindex="-1" href="#函数组件重载"><span class="icon icon-link"></span></a>函数组件重载</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> children<span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -863,7 +863,7 @@
</span><span class="code-line line-number" line="16"> <span class="token comment">// ...</span>
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>函数子组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="函数子组件"><a aria-hidden="true" tabindex="-1" href="#函数子组件"><span class="icon icon-link"></span></a>函数子组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">MenuProps</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiHTMLAttributes</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> <span class="token function-variable function">InternalMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">MenuProps</span><span class="token punctuation">,</span> ref<span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ForwardedRef</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
</span><span class="code-line line-number" line="3"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
@ -882,7 +882,7 @@
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
</span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>有效组件</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="有效组件"><a aria-hidden="true" tabindex="-1" href="#有效组件"><span class="icon icon-link"></span></a>有效组件</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
@ -906,7 +906,7 @@
</span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
</span></code></pre>
<p>默认情况下,<code>JSX.ElementClass</code> 是 {},但可以对其进行扩展,以将 <code>JSX</code> 的使用限制为仅限于符合适当接口的类型。</p>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>类组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="类组件"><a aria-hidden="true" tabindex="-1" href="#类组件"><span class="icon icon-link"></span></a>类组件</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
@ -925,7 +925,7 @@
</span><span class="code-line line-number" line="16">
</span><span class="code-line line-number" line="17"><span class="token operator">&#x3C;</span>MyComponent header<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&#x3C;</span>h1<span class="token operator">></span>Header<span class="token operator">&#x3C;</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">}</span> body<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&#x3C;</span>i<span class="token operator">></span>body<span class="token operator">&#x3C;</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>泛型组件</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="泛型组件"><a aria-hidden="true" tabindex="-1" href="#泛型组件"><span class="icon icon-link"></span></a>泛型组件</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 一个泛型组件</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">SelectProps<span class="token operator">&#x3C;</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">Select<span class="token operator">&#x3C;</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Component</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">SelectProps</span><span class="token operator">&#x3C;</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>