mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 13:41:21 +08:00
feat: add vim.md regex.md cheatsheet. 9ff36a3ac3
This commit is contained in:
jaywcjlove
@ -40,8 +40,8 @@
|
||||
</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>
|
||||
<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 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>
|
||||
@ -72,7 +72,8 @@
|
||||
</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 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-->
|
||||
</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>
|
||||
@ -94,7 +95,8 @@
|
||||
</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 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-->
|
||||
</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"><</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
|
||||
@ -151,11 +153,12 @@
|
||||
</span></code></pre>
|
||||
<p>Interface 被合并，多个声明将向类型定义添加新字段。</p>
|
||||
</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-->
|
||||
</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>
|
||||
<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 id="把类型想象成变量"><a aria-hidden="true" tabindex="-1" href="#把类型想象成变量"><span class="icon icon-link"></span></a>把类型想象成变量</h4><div class="wrap-body">
|
||||
<p>就像您如何在不同范围内创建具有相同名称的变量一样，type 具有相似的语义。</p>
|
||||
@ -197,7 +200,8 @@
|
||||
<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 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-->
|
||||
</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>
|
||||
@ -226,7 +230,8 @@
|
||||
</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 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-->
|
||||
</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>
|
||||
@ -235,7 +240,8 @@
|
||||
</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 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-->
|
||||
</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"><</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"><</span>Animals<span class="token operator">></span>
|
||||
@ -243,7 +249,8 @@
|
||||
</span></code></pre>
|
||||
<p>在类型系统中充当“if 语句”。 通过泛型创建，然后通常用于减少类型联合中的选项数量。</p>
|
||||
</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="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>
|
||||
@ -276,7 +283,8 @@
|
||||
</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 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-->
|
||||
</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>
|
||||
@ -334,14 +342,14 @@
|
||||
</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 id="断言函数"><a aria-hidden="true" tabindex="-1" href="#断言函数"><span class="icon icon-link"></span></a>断言函数</h3><div class="wrap-body">
|
||||
</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-->
|
||||
<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>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">SuccessResponse</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Not a success!'</span><span class="token punctuation">)</span>
|
||||
</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>
|
||||
<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 class="token keyword">asserts</span> obj <span class="token keyword">is</span> SuccessResponse <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">SuccessResponse</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">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Not a success!'</span><span class="token punctuation">)</span>
|
||||
</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 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>
|
||||
@ -394,7 +402,8 @@
|
||||
<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 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-->
|
||||
</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>
|
||||
@ -463,7 +472,8 @@
|
||||
</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 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-->
|
||||
</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>
|
||||
@ -812,10 +822,10 @@
|
||||
</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>
|
||||
<li>启用 <code>jsx</code> 选项</li>
|
||||
<li>不允许在 <code>.tsx</code> 文件中使用尖括号类型断言。</li>
|
||||
<li><a href="https://facebook.github.io/jsx/">JSX 规范</a></li>
|
||||
<li>使用 <code>.tsx</code> 扩展名命名您的文件</li>
|
||||
<li>启用 <code>jsx</code> 选项</li>
|
||||
<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 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"><</span>foo<span class="token operator">></span>bar<span class="token punctuation">;</span>
|
||||
@ -847,7 +857,8 @@
|
||||
</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 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-->
|
||||
</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>
|
||||
@ -882,7 +893,8 @@
|
||||
</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 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-->
|
||||
</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"><</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"><</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"><</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>
|
||||
@ -901,7 +913,8 @@
|
||||
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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 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-->
|
||||
</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>
|
||||
@ -925,7 +938,8 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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 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-->
|
||||
</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>
|
||||
@ -952,6 +966,5 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 使用</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">Form</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">Select</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span> items<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
|
||||
</div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user