mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 13:11:20 +08:00
doc: update typescript. 5234cdc024
This commit is contained in:
jaywcjlove
@ -19,10 +19,11 @@
|
||||
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a></li>
|
||||
</ul>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>内置类型基元</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><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="2"><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="3"><span class="token builtin">any</span><span class="token punctuation">,</span> <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="4"><span class="token keyword">void</span><span class="token punctuation">,</span> bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
||||
<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="warp"><div class="warp-header h3warp"><h3>常见的内置 JS 对象</h3><div class="warp-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>
|
||||
@ -258,7 +259,7 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// name: string</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// }</span>
|
||||
</span></code></pre>
|
||||
<p>使用 <code>as const</code> 缩小类型</p>
|
||||
<p>👇 使用 <code>as const</code> 缩小类型 👇</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> data2 <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> <span class="token keyword">as</span> <span class="token keyword">const</span>
|
||||
@ -326,7 +327,24 @@
|
||||
</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></div><div class="warp"><div class="warp-header h2warp"><h2>Class</h2><div class="warp-body">
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>in 操作符</h3><div class="warp-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>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> y<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7">
|
||||
</span><span class="code-line line-number" line="8"><span class="token keyword">function</span> <span class="token function">doStuff</span><span class="token punctuation">(</span>q<span class="token operator">:</span> <span class="token constant">A</span> <span class="token operator">|</span> <span class="token constant">B</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'x'</span> <span class="token keyword">in</span> q<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token comment">// q: A</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token comment">// q: B</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">}</span>
|
||||
</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="warp"><div class="warp-header h2warp"><h2>Class</h2><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>创建类实例</h3><div class="warp-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>
|
||||
@ -776,7 +794,7 @@
|
||||
</ul>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>as 运算符</h3><div class="warp-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>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// 不允许在 .tsx 👆 文件中使用尖括号类型断言。</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>
|
||||
@ -833,9 +851,9 @@
|
||||
</span><span class="code-line line-number" line="10"> side<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 operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12">
|
||||
</span><span class="code-line line-number" line="13"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">HomeProps</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="14"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">SideProps</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="15"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">CeProps</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="13"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">HomeProps</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="14"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">SideProps</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="15"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">CeProps</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="16"> <span class="token comment">// ...</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
@ -855,29 +873,10 @@
|
||||
</span><span class="code-line line-number" line="13"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Item</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">SubMenu</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">SubMenu</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="15">
|
||||
</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><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="warp"><div class="warp-header h3warp"><h3>类组件</h3><div class="warp-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">MyComponent</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">render</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 punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token comment">// 使用构造签名</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> myComponent <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// element class type => MyComponent</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// element instance type => { render: () => void }</span>
|
||||
</span><span class="code-line line-number" line="8">
|
||||
</span><span class="code-line line-number" line="9"><span class="token keyword">function</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token function-variable function">render</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 punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token comment">// 使用调用签名</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">const</span> myComponent <span class="token operator">=</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token comment">// element class type => MyFactoryFunction</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token comment">// element instance type => { render: () => void }</span>
|
||||
</span></code></pre>
|
||||
<p>元素实例类型很有趣，因为它必须可以分配给JSX。ElementClass，否则将导致错误。默认情况下，JSX。ElementClass 是 {}，但可以对其进行扩展，以将JSX的使用限制为仅限于符合适当接口的类型。</p>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>有效组件</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<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>
|
||||
@ -889,15 +888,44 @@
|
||||
</span><span class="code-line line-number" line="9"><span class="token keyword">function</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token function-variable function">render</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 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="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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="13"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyFactoryFunction</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="14">
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">class</span> <span class="token class-name">NotAValidComponent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token keyword">function</span> <span class="token function">NotAValidFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="17"> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="19"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</span><span class="code-line line-number" line="20"><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><span class="code-line line-number" line="12"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ✅ 有效类组件</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ✅ 有效函数组件</span>
|
||||
</span></code></pre>
|
||||
<p>元素实例类型必须可以分配给 <code>JSX.ElementClass</code>，否则将导致错误。</p>
|
||||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">NotAValidComponent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">NotAValidFactoryFunction</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">return</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 punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</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="warp col-span-2"><div class="warp-header h3warp"><h3>类组件</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
<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>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5">
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span>Component<span class="token operator"><</span>Props<span class="token punctuation">,</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="7"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token operator"><</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>header<span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>body<span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="16">
|
||||
</span><span class="code-line line-number" line="17"><span class="token operator"><</span>MyComponent header<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>h1<span class="token operator">></span>Header<span class="token operator"><</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"><</span>i<span class="token operator">></span>body<span class="token operator"><</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="warp"><div class="warp-header h3warp"><h3>泛型组件</h3><div class="warp-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"><</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"><</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"><</span><span class="token maybe-class-name">SelectProps</span><span class="token operator"><</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>
|
||||
</span><span class="code-line line-number" line="4">
|
||||
</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-warp"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||
|
||||
Reference in New Issue
Block a user