doc: update docs/typescript.md f7b60c9a09

This commit is contained in:
jaywcjlove
2023-06-05 06:11:12 +00:00
parent e5a75714e3
commit 731cc5b7a6
2 changed files with 8 additions and 8 deletions

View File

@ -898,17 +898,17 @@
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist 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"><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"><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>
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><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 class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access">forwardRef</span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MenuProps</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ref<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
</span><span class="code-line"> <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>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token constant">FC</span><span class="token operator">&#x3C;</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">PropsWithRef</span></span><span class="token operator">&#x3C;</span><span class="token maybe-class-name">MenuProps</span><span class="token operator">>></span> <span class="token operator">&#x26;</span> <span class="token punctuation">{</span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token operator">&#x26;</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token maybe-class-name">Item</span><span class="token operator">:</span> <span class="token keyword">typeof</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">;</span> <span class="token comment">// MenuItem 函数组件</span>
</span><span class="code-line"> <span class="token maybe-class-name">SubMenu</span><span class="token operator">:</span> <span class="token keyword">typeof</span> <span class="token maybe-class-name">SubMenu</span><span class="token punctuation">;</span> <span class="token comment">// SubMenu 函数组件</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Menu</span><span class="token operator">:</span> <span class="token maybe-class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access">forwardRef</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><span class="code-line"> <span class="token maybe-class-name">InternalMenu</span>
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token maybe-class-name">MenuComponent</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Menu</span><span class="token operator">:</span> <span class="token maybe-class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token maybe-class-name">MenuComponent</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><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"><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>

View File

@ -1243,7 +1243,7 @@
<!--rehype:class=home-card home-links-->
<p>如果你有资源,可以很方便<a href="https://github.com/jaywcjlove/reference/issues/102#issue-1451649637">部署 web 版</a>,这非常简单,只需要克隆 <a href="https://github.com/jaywcjlove/reference/tree/gh-pages">gh-pages</a> 分支代码到你的静态服务就可以了,还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2023/06/04 18:44:08</footer></footer><script src="data.js?v=1.3.6" defer></script><script src="js/fuse.min.js?v=1.3.6" defer></script><script src="js/main.js?v=1.3.6" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2023/06/05 14:10:06</footer></footer><script src="data.js?v=1.3.6" defer></script><script src="js/fuse.min.js?v=1.3.6" defer></script><script src="js/main.js?v=1.3.6" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>