mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
1059 lines
193 KiB
HTML
1059 lines
193 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>TypeScript 备忘清单
|
||
& typescript cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。为开发人员分享快速参考备忘单。">
|
||
<meta keywords="Quick,Reference,cheatsheet,typescript">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
<link rel="stylesheet" href="../style/katex.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<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="#228e6c"></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="#228e6c"></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><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script>
|
||
const LOCAL_NANE = '_dark_mode_theme_'
|
||
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||
}
|
||
const button = document.querySelector('#darkMode');
|
||
button.onclick = () => {
|
||
const theme = document.documentElement.dataset.colorMode;
|
||
const mode = theme === 'light' ? 'dark' : 'light';
|
||
document.documentElement.setAttribute('data-color-mode', mode);
|
||
localStorage.setItem(LOCAL_NANE, mode);
|
||
}
|
||
</script><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 h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="typescript-备忘清单"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" height="1em" width="1em">
|
||
<path d="M1 7v6h12V1H1v6zm7.36-.21v.538H6.811v4.922H5.547V7.328H4V6.25h4.36v.54zm3.046-.474c.192.037.408.089.483.117l.127.051v.586c0 .324-.01.586-.02.586-.009 0-.107-.051-.22-.112-.421-.24-1.096-.328-1.509-.207a.894.894 0 0 0-.319.193c-.112.108-.135.173-.135.347 0 .187.023.239.178.384.098.094.464.31.82.487.75.37 1.13.685 1.303 1.074.155.347.16 1.078.01 1.406-.141.31-.45.624-.755.769-.647.305-1.702.333-2.527.06l-.295-.098v-1.303l.234.169c.305.22.699.356 1.111.384.413.029.717-.047.905-.225.117-.107.14-.168.14-.346 0-.343-.196-.52-1.003-.915-.712-.351-.937-.51-1.148-.82-.469-.68-.328-1.72.3-2.194.534-.407 1.42-.557 2.32-.393Z"></path>
|
||
</svg>
|
||
<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="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门-interface">入门 Interface</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置类型基元">内置类型基元</a><a aria-hidden="true" class="leve3 tocs-link" href="#常见的内置-js-对象">常见的内置 JS 对象</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置">内置</a><a aria-hidden="true" class="leve4 tocs-link" href="#类型字面量">类型字面量</a><a aria-hidden="true" class="leve4 tocs-link" href="#避免">避免</a><a aria-hidden="true" class="leve3 tocs-link" href="#通用语法">通用语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#泛型">泛型</a><a aria-hidden="true" class="leve4 tocs-link" href="#用法">用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#重载">重载</a><a aria-hidden="true" class="leve3 tocs-link" href="#类一致性">类一致性</a><a aria-hidden="true" class="leve3 tocs-link" href="#get--set">Get & Set</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过合并扩展">通过合并扩展</a><a aria-hidden="true" class="leve2 tocs-link" href="#type">Type</a><a aria-hidden="true" class="leve3 tocs-link" href="#type-vs-interface">Type vs Interface</a><a aria-hidden="true" class="leve4 tocs-link" href="#把类型想象成变量">把类型想象成变量</a><a aria-hidden="true" class="leve4 tocs-link" href="#使用实用程序类型构建">使用实用程序类型构建</a><a aria-hidden="true" class="leve3 tocs-link" href="#原始类型">原始类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#对象字面类型">对象字面类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#联合类型">联合类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#交叉口类型">交叉口类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#从值类型">从值类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#从函数返回类型">从函数返回类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#从模块类型">从模块类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#对象字面量语法">对象字面量语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#映射类型">映射类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#模板联合类型">模板联合类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#条件类型">条件类型</a><a aria-hidden="true" class="leve2 tocs-link" href="#控制流动分析">控制流动分析</a><a aria-hidden="true" class="leve3 tocs-link" href="#if-声明">If 声明</a><a aria-hidden="true" class="leve4 tocs-link" href="#typeof用于原语">typeof（用于原语）</a><a aria-hidden="true" class="leve4 tocs-link" href="#对象中的property对于对象">对象中的“property”（对于对象）</a><a aria-hidden="true" class="leve4 tocs-link" href="#instanceof用于类">instanceof（用于类）</a><a aria-hidden="true" class="leve4 tocs-link" href="#类型保护功能适用于任何东西">类型保护功能（适用于任何东西）</a><a aria-hidden="true" class="leve3 tocs-link" href="#任务">任务</a><a aria-hidden="true" class="leve3 tocs-link" href="#关键点">关键点</a><a aria-hidden="true" class="leve3 tocs-link" href="#表达式">表达式</a><a aria-hidden="true" class="leve3 tocs-link" href="#可识别联合">可识别联合</a><a aria-hidden="true" class="leve4 tocs-link" href="#用法-1">用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#断言函数">断言函数</a><a aria-hidden="true" class="leve4 tocs-link" href="#用法-2">用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#in-操作符">in 操作符</a><a aria-hidden="true" class="leve2 tocs-link" href="#class">Class</a><a aria-hidden="true" class="leve3 tocs-link" href="#创建类实例">创建类实例</a><a aria-hidden="true" class="leve4 tocs-link" href="#private-x-与-private">private x 与 #private</a><a aria-hidden="true" class="leve4 tocs-link" href="#class-上的-this">Class 上的 “this”</a><a aria-hidden="true" class="leve4 tocs-link" href="#类型和值">类型和值</a><a aria-hidden="true" class="leve3 tocs-link" href="#通用语法-1">通用语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#泛型-1">泛型</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数属性">参数属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#抽象类">抽象类</a><a aria-hidden="true" class="leve3 tocs-link" href="#装饰器和属性">装饰器和属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#索引签名">索引签名</a><a aria-hidden="true" class="leve2 tocs-link" href="#实用程序类型">实用程序类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#awaitedtype">Awaited<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#requiredtype">Required<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#readonlytype">Readonly<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#partialtype">Partial<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#recordkeys-type">Record<Keys, Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#picktype-keys">Pick<Type, Keys></a><a aria-hidden="true" class="leve3 tocs-link" href="#excludeuniontype-excludedmembers">Exclude<UnionType, ExcludedMembers></a><a aria-hidden="true" class="leve3 tocs-link" href="#extracttype-union">Extract<Type, Union></a><a aria-hidden="true" class="leve3 tocs-link" href="#nonnullabletype">NonNullable<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#omittype-keys">Omit<Type, Keys></a><a aria-hidden="true" class="leve3 tocs-link" href="#parameterstype">Parameters<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#constructorparameterstype">ConstructorParameters<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#内在字符串操作类型">内在字符串操作类型</a><a aria-hidden="true" class="leve4 tocs-link" href="#uppercasestringtype">Uppercase<StringType></a><a aria-hidden="true" class="leve4 tocs-link" href="#lowercasestringtype">Lowercase<StringType></a><a aria-hidden="true" class="leve4 tocs-link" href="#capitalizestringtype">Capitalize<StringType></a><a aria-hidden="true" class="leve4 tocs-link" href="#uncapitalizestringtype">Uncapitalize<StringType></a><a aria-hidden="true" class="leve3 tocs-link" href="#returntypetype">ReturnType<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#thistypetype">ThisType<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#instancetypetype">InstanceType<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#thisparametertypetype">ThisParameterType<Type></a><a aria-hidden="true" class="leve3 tocs-link" href="#omitthisparametertype">OmitThisParameter<Type></a><a aria-hidden="true" class="leve2 tocs-link" href="#jsx">JSX</a><a aria-hidden="true" class="leve3 tocs-link" href="#jsx-介绍">JSX 介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#as-运算符">as 运算符</a><a aria-hidden="true" class="leve3 tocs-link" href="#基于值的元素">基于值的元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#内在的元素">内在的元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数组件">函数组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数组件重载">函数组件重载</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数子组件">函数子组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#有效组件">有效组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#类组件">类组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#泛型组件">泛型组件</a><a aria-hidden="true" class="leve2 tocs-link" href="#各种各样的技巧">各种各样的技巧</a><a aria-hidden="true" class="leve3 tocs-link" href="#类型推导infer">类型推导（infer）</a><a aria-hidden="true" class="leve3 tocs-link" href="#keyof-取-interface-的键">keyof 取 interface 的键</a><a aria-hidden="true" class="leve3 tocs-link" href="#索引签名-1">索引签名</a><a aria-hidden="true" class="leve3 tocs-link" href="#从数组中提取类型">从数组中提取类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#只读元组类型">只读元组类型</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><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 h3body-not-exist"><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> <em>(jaywcjlove.github.io)</em></li>
|
||
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a> <em>(typescriptlang.org)</em></li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"><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"><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"><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">bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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">Date<span class="token punctuation">,</span> Error<span class="token punctuation">,</span>
|
||
</span><span class="code-line"><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">Regexp<span class="token punctuation">,</span> <span class="token builtin">Promise</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><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">
|
||
<h4 id="类型字面量"><a aria-hidden="true" tabindex="-1" href="#类型字面量"><span class="icon icon-link"></span></a>类型字面量</h4>
|
||
<p>Object:</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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>
|
||
<p>Function:</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">string</span>
|
||
</span></code></pre>
|
||
<p>Arrays:</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> or <span class="token builtin">Array</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span>
|
||
</span></code></pre>
|
||
<p>Tuple:</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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>
|
||
<h4 id="避免"><a aria-hidden="true" tabindex="-1" href="#避免"><span class="icon icon-link"></span></a>避免</h4>
|
||
<pre><code class="code-highlight"><span class="code-line">Object, String, Number, Boolean
|
||
</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-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */</span>
|
||
</span><span class="code-line"><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"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 附加在编辑器中显示的 JSDoc 注释</span>
|
||
</span><span class="code-line"> <span class="token comment">/** In bytes */</span>
|
||
</span><span class="code-line"> payloadSize<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 此属性可能不在对象上</span>
|
||
</span><span class="code-line"> outOfStock<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 这是描述作为函数的属性的两种方法</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token punctuation">(</span>retryTimes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">update</span><span class="token punctuation">(</span>retryTimes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 你可以通过 () 调用这个对象 -（JS中的函数是可以调用的对象）</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> JSONResponse
|
||
</span><span class="code-line"> <span class="token comment">// 👇 您可以在此 Interface 描述的对象上使用 new</span>
|
||
</span><span class="code-line"> <span class="token class-name"><span class="token keyword">new</span></span><span class="token punctuation">(</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> JSONResponse<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 任何未描述的属性都假定存在，并且所有属性必须是数字</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>key<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">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 告诉 TypeScript 一个属性不能被改变</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist 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"><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"> data<span class="token operator">:</span> Response
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="用法"><a aria-hidden="true" tabindex="-1" href="#用法"><span class="icon icon-link"></span></a>用法</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> api<span class="token operator">:</span> APICall<span class="token operator"><</span>ArtworkCall<span class="token operator">></span> <span class="token operator">=</span> <span class="token operator">...</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">api<span class="token punctuation">.</span>data <span class="token comment">// Artwork</span>
|
||
</span></code></pre>
|
||
<p>您可以通过 <code>extends</code> 关键字限制泛型参数接受的类型。</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">APICall<span class="token operator"><</span>Response <span class="token keyword">extends</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> data<span class="token operator">:</span> Response
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> api<span class="token operator">:</span> APICall<span class="token operator"><</span>ArtworkCall<span class="token operator">></span> <span class="token operator">=</span> <span class="token operator">...</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">api<span class="token punctuation">.</span>data<span class="token punctuation">.</span>status
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">interface</span> <span class="token class-name">Expect</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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"> <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"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>一个可调用 Interface 可以对不同的参数集有多个定义。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">interface</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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 h3body-not-exist"><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 & 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"><span class="token keyword">interface</span> <span class="token class-name">Ruler</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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>
|
||
</span><span class="code-line"> <span class="token keyword">set</span> <span class="token function">size</span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>用法</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> r<span class="token operator">:</span> Ruler <span class="token operator">=</span> <span class="token operator">...</span>
|
||
</span><span class="code-line">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token number">12</span>
|
||
</span><span class="code-line">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 h3body-not-exist"><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"><span class="token keyword">interface</span> <span class="token class-name">APICall</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> data<span class="token operator">:</span> Response
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">APICall</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> error<span class="token operator">?</span><span class="token operator">:</span> Error
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>Interface 被合并，多个声明将向类型定义添加新字段。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><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 h3body-exist 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>
|
||
<h4 id="把类型想象成变量"><a aria-hidden="true" tabindex="-1" href="#把类型想象成变量"><span class="icon icon-link"></span></a>把类型想象成变量</h4>
|
||
<p>就像您如何在不同范围内创建具有相同名称的变量一样，type 具有相似的语义。</p>
|
||
<h4 id="使用实用程序类型构建"><a aria-hidden="true" tabindex="-1" href="#使用实用程序类型构建"><span class="icon icon-link"></span></a>使用实用程序类型构建</h4>
|
||
<p>TypeScript 包含许多全局类型，它们将帮助您在类型系统中完成常见任务。检查他们的网站。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"><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 h3body-not-exist"><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"><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"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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 h3body-not-exist"><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"><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"> <span class="token operator">&</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"><span class="token comment">// { x: number, y: number }</span>
|
||
</span></code></pre>
|
||
<p>一种合并/扩展类型的方法</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"><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 h3body-not-exist"><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"><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"><span class="token keyword">type</span> <span class="token class-name">Fixtures</span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token keyword">typeof</span> createFixtures<span class="token operator">></span>
|
||
</span><span class="code-line"><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 h3body-not-exist"><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"><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 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-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> 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"> <span class="token comment">/** In bytes */</span> <span class="token comment">// 附加文档</span>
|
||
</span><span class="code-line"> payloadSize<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> outOfStock<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 可选的</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token punctuation">(</span>retryTimes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token comment">// 箭头函数字段</span>
|
||
</span><span class="code-line"> <span class="token function">update</span><span class="token punctuation">(</span>retryTimes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span> <span class="token comment">// 函数</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> JSONResponse <span class="token comment">// 类型是可调用的</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>key<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">number</span><span class="token punctuation">;</span> <span class="token comment">// 接受任何索引</span>
|
||
</span><span class="code-line"> <span class="token keyword">new</span> <span class="token punctuation">(</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> JSONResponse<span class="token punctuation">;</span> <span class="token comment">// new 对象</span>
|
||
</span><span class="code-line"> <span class="token keyword">readonly</span> body<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// 只读属性</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>用于节省空间的 Terser，请参阅 Interface 备忘清单了解更多信息，除了“static”匹配之外的所有内容。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"> 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"><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">Subscriber<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>Property <span class="token keyword">in</span> <span class="token keyword">keyof</span> Type<span class="token punctuation">]</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span>newValue<span class="token operator">:</span> Type<span class="token punctuation">[</span>Property<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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ArtistSub</span> <span class="token operator">=</span> Subscriber<span class="token operator"><</span>Artist<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// { name: (nv: string) => </span>
|
||
</span><span class="code-line"><span class="token comment">// void, bio: (nv: string) => void }</span>
|
||
</span></code></pre>
|
||
<p>类似于类型系统的映射语句，允许输入类型更改新类型的结构。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist 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"><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"><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"><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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// "en_header_id" | "en_footer_id"</span>
|
||
</span><span class="code-line"><span class="token comment">// | "pt_header_id" | "pt_footer_id"</span>
|
||
</span><span class="code-line"><span class="token comment">// | "zh_header_id" | "zh_footer_id"</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist 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"><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"><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"><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>
|
||
</span><span class="code-line"><span class="token comment">// Dog | Wolf</span>
|
||
</span></code></pre>
|
||
<p>在类型系统中充当“if 语句”。 通过泛型创建，然后通常用于减少类型联合中的选项数量。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><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 h3body-exist 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-->
|
||
<h4 id="typeof用于原语"><a aria-hidden="true" tabindex="-1" href="#typeof用于原语"><span class="icon icon-link"></span></a>typeof（用于原语）</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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">input <span class="token comment">// string | number</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> input <span class="token comment">// string</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="对象中的property对于对象"><a aria-hidden="true" tabindex="-1" href="#对象中的property对于对象"><span class="icon icon-link"></span></a>对象中的“property”（对于对象）</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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">input <span class="token comment">// string | { error: ... }</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'error'</span> <span class="token keyword">in</span> input<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> input <span class="token comment">// { error: ... }</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="instanceof用于类"><a aria-hidden="true" tabindex="-1" href="#instanceof用于类"><span class="icon icon-link"></span></a>instanceof（用于类）</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> input <span class="token comment">// number | number[]</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span>input <span class="token keyword">instanceof</span> <span class="token class-name"><span class="token builtin">Array</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> input <span class="token comment">// number[]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="类型保护功能适用于任何东西"><a aria-hidden="true" tabindex="-1" href="#类型保护功能适用于任何东西"><span class="icon icon-link"></span></a>类型保护功能（适用于任何东西）</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> input <span class="token comment">// number | number[]</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token builtin">Array</span><span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> input <span class="token comment">// number[]</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist 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"><span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">// typeof data1 = {</span>
|
||
</span><span class="code-line"><span class="token comment">// name: string</span>
|
||
</span><span class="code-line"><span class="token comment">// }</span>
|
||
</span></code></pre>
|
||
<p>👇 使用 <code>as const</code> 缩小类型 👇</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> data2 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> <span class="token keyword">as</span> <span class="token keyword">const</span>
|
||
</span><span class="code-line"><span class="token comment">// typeof data1 = {</span>
|
||
</span><span class="code-line"><span class="token comment">// name: 'Zagreus'</span>
|
||
</span><span class="code-line"><span class="token comment">// }</span>
|
||
</span></code></pre>
|
||
<p>跟踪相关变量</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><span class="token keyword">const</span> isSuccessResponse <span class="token operator">=</span>
|
||
</span><span class="code-line"> res <span class="token keyword">instanceof</span> <span class="token class-name">SuccessResponse</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">if</span> <span class="token punctuation">(</span>isSuccessResponse<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> res<span class="token punctuation">.</span>data <span class="token comment">// SuccessResponse</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>重新分配更新类型</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">let</span> data<span class="token operator">:</span> <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 operator">...</span>
|
||
</span><span class="code-line">data <span class="token comment">// string | number</span>
|
||
</span><span class="code-line">data <span class="token operator">=</span> <span class="token string">"Hello"</span>
|
||
</span><span class="code-line">data <span class="token comment">// string</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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 h3body-not-exist"><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"><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">input <span class="token comment">// string | number</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> inputLength <span class="token operator">=</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token keyword">typeof</span> input <span class="token operator">===</span> <span class="token string">"string"</span> <span class="token operator">&&</span> input<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token operator">||</span> input
|
||
</span><span class="code-line"> <span class="token comment">// input: string</span>
|
||
</span></code></pre>
|
||
<p>在进行布尔运算时，缩窄也发生在与代码相同的行上</p>
|
||
</div></div></div><div class="wrap h3body-exist"><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"><span class="token keyword">type</span> <span class="token class-name">Responses</span> <span class="token operator">=</span>
|
||
</span><span class="code-line"> <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"> <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"> <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>
|
||
<h4 id="用法-1"><a aria-hidden="true" tabindex="-1" href="#用法-1"><span class="icon icon-link"></span></a>用法</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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">response <span class="token comment">// Responses</span>
|
||
</span><span class="code-line"><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>
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token number">200</span><span class="token operator">:</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
|
||
</span><span class="code-line"> <span class="token keyword">case</span> <span class="token number">301</span><span class="token operator">:</span> <span class="token keyword">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>to<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-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-->
|
||
<p>描述影响当前范围的 CFA 更改的函数，因为它抛出而不是返回 false。</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> <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"> <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"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<h4 id="用法-2"><a aria-hidden="true" tabindex="-1" href="#用法-2"><span class="icon icon-link"></span></a>用法</h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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">res <span class="token comment">// SuccessResponse | ErrorResponse</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 断言函数改变当前作用域或抛出</span>
|
||
</span><span class="code-line"><span class="token function">assertResponse</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">res <span class="token comment">// SuccessResponse</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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"> y<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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"> <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"> <span class="token comment">// q: A</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// q: B</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><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 h3body-exist"><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"><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"><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>
|
||
<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>
|
||
<p>前缀 private 是一个仅类型的添加，在运行时没有任何影响。 在以下情况下，类之外的代码可以进入项目：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">private</span> item<span class="token operator">:</span> <span class="token builtin">any</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>Vs #private 是运行时私有的，并且在 JavaScript 引擎内部强制执行，它只能在类内部访问：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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>
|
||
<h4 id="class-上的-this"><a aria-hidden="true" tabindex="-1" href="#class-上的-this"><span class="icon icon-link"></span></a>Class 上的 “this”</h4>
|
||
<p>函数内部‘this’的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。</p>
|
||
<p>您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。</p>
|
||
<h4 id="类型和值"><a aria-hidden="true" tabindex="-1" href="#类型和值"><span class="icon icon-link"></span></a>类型和值</h4>
|
||
<p>一个类既可以用作类型也可以用作值。</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><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 class="wrap h3body-not-exist 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"><span class="token comment">// 确保类符合一组接口或类型 ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮</span>
|
||
</span><span class="code-line"><span class="token comment">// 子类这个类 ┈┈┈┈┈┈┈┈↘ ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈</span>
|
||
</span><span class="code-line"><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>
|
||
</span><span class="code-line"> id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// 一个字段</span>
|
||
</span><span class="code-line"> displayName<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 可选字段</span>
|
||
</span><span class="code-line"> name<span class="token operator">!</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// '相信我，它在哪里'字段</span>
|
||
</span><span class="code-line"> #attributes<span class="token operator">:</span> Map<span class="token operator"><</span><span class="token builtin">any</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 comment">// 私人字段</span>
|
||
</span><span class="code-line"> roles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"user"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 具有默认值的字段</span>
|
||
</span><span class="code-line"> <span class="token keyword">readonly</span> createdAt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 具有默认值的只读字段</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 代码调用“new”</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span>id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> email<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 在 `strict: true` 中，会根据字段检查此代码以确保其设置正确</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>email <span class="token operator">=</span> email<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// ....</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 描述类方法（和箭头函数字段）的方式</span>
|
||
</span><span class="code-line"> <span class="token function">setName</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">verifyName</span> <span class="token operator">=</span> <span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// 👇 具有 2 个重载定义的函数</span>
|
||
</span><span class="code-line"> <span class="token function">sync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator"><</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token function">sync</span><span class="token punctuation">(</span>cb<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>result<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</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"> <span class="token function">sync</span><span class="token punctuation">(</span>cb<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>result<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token builtin">Promise</span><span class="token operator"><</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><span class="code-line"> <span class="token comment">// 👇 Getters 和 setters</span>
|
||
</span><span class="code-line"> <span class="token keyword">get</span> <span class="token function">accountID</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"> <span class="token keyword">set</span> <span class="token function">accountID</span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👇 私有访问只是对这个类，受保护的允许子类。 仅用于类型检查，public 是默认值。</span>
|
||
</span><span class="code-line"> <span class="token keyword">private</span> <span class="token function">makeRequest</span><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"> <span class="token keyword">protected</span> <span class="token function">handleRequest</span><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"> <span class="token comment">// 👇 静态字段/方法</span>
|
||
</span><span class="code-line"> <span class="token keyword">static</span> #userCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">static</span> <span class="token function">registerUser</span><span class="token punctuation">(</span>user<span class="token operator">:</span> User<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"> <span class="token comment">// 👇 用于设置静态变量的静态块。 ‘this’指的是静态类</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">class</span> <span class="token class-name">Box<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> contents<span class="token operator">:</span> Type
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span>value<span class="token operator">:</span> Type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>contents <span class="token operator">=</span> value<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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 h3body-not-exist"><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"><span class="token keyword">class</span> <span class="token class-name">Location</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> loc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Location</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">loc<span class="token punctuation">.</span>x <span class="token comment">// 20</span>
|
||
</span><span class="code-line">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 h3body-not-exist"><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"><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"> <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"> <span class="token function">printName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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 string">"Hello, "</span> <span class="token operator">+</span> <span class="token keyword">this</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 punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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 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-ts"><code class="language-ts code-highlight"><span class="code-line"><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">
|
||
</span><span class="code-line"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Syncable</span></span>
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token decorator"><span class="token at operator">@</span><span class="token function">triggersSync</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token function">save</span><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"> <span class="token decorator"><span class="token at operator">@</span><span class="token function">preferCache</span></span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword">get</span> <span class="token function">displayName</span><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"> <span class="token function">update</span><span class="token punctuation">(</span><span class="token decorator"><span class="token at operator">@</span><span class="token function">required</span></span> info<span class="token operator">:</span> Partial<span class="token operator"><</span>User<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><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>您可以在类、类方法、访问器、属性和方法参数上使用装饰器。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 最好将索引数据存储在另一个地方</span>
|
||
</span><span class="code-line"> <span class="token comment">// 而不是类实例本身。</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token builtin">boolean</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>s<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 class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token function">check</span><span class="token punctuation">(</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span>s<span class="token punctuation">]</span> <span class="token keyword">as</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>类可以声明索引签名，与其他对象类型的索引签名相同。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><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 h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="awaitedtype"><a aria-hidden="true" tabindex="-1" href="#awaitedtype"><span class="icon icon-link"></span></a>Awaited<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">>></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type A = string</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token operator">=</span> Awaited<span class="token operator"><</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">>>></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type B = number</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token operator">=</span> Awaited<span class="token operator"><</span><span class="token builtin">boolean</span><span class="token operator">|</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">>></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type C = number | boolean</span>
|
||
</span></code></pre>
|
||
<p>这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="requiredtype"><a aria-hidden="true" tabindex="-1" href="#requiredtype"><span class="icon icon-link"></span></a>Required<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> 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"> b<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> obj<span class="token operator">:</span> Props <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> obj2<span class="token operator">:</span> Required<span class="token operator"><</span>Props<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// ❌ 类型“{ a: number;”中缺少属性“b” }' </span>
|
||
</span><span class="code-line"><span class="token comment">// 但在 'Required<Props>' 类型中是必需的。</span>
|
||
</span></code></pre>
|
||
<p>使 Type 中的所有属性成为必需</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="readonlytype"><a aria-hidden="true" tabindex="-1" href="#readonlytype"><span class="icon icon-link"></span></a>Readonly<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> todo<span class="token operator">:</span> Readonly<span class="token operator"><</span>Todo<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token string">"Delete inactive users"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">todo<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// ❌ 无法分配给“title”，因为它是只读属性。</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">freeze</span><span class="token generic class-name"><span class="token operator"><</span>Type<span class="token operator">></span></span></span><span class="token punctuation">(</span>obj<span class="token operator">:</span> Type<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token operator">:</span> Readonly<span class="token operator"><</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 h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="partialtype"><a aria-hidden="true" tabindex="-1" href="#partialtype"><span class="icon icon-link"></span></a>Partial<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">updateTodo</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> todo<span class="token operator">:</span> Todo<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> fieldsToUpdate<span class="token operator">:</span> Partial<span class="token operator"><</span>Todo<span class="token operator">></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">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>todo<span class="token punctuation">,</span> <span class="token operator">...</span>fieldsToUpdate <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> todo1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> title<span class="token operator">:</span> <span class="token string">"organize desk"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> description<span class="token operator">:</span> <span class="token string">"clear clutter"</span><span class="token punctuation">,</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> todo2 <span class="token operator">=</span> <span class="token function">updateTodo</span><span class="token punctuation">(</span>todo1<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> description<span class="token operator">:</span> <span class="token string">"throw out trash"</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></code></pre>
|
||
<p>将 <code>Type</code> 中的所有属性设为可选</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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<Keys, Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">CatInfo</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> breed<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">CatName</span> <span class="token operator">=</span> <span class="token string">"miffy"</span> <span class="token operator">|</span> <span class="token string">"boris"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> cats<span class="token operator">:</span> Record<span class="token operator"><</span>CatName<span class="token punctuation">,</span> CatInfo<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> miffy<span class="token operator">:</span> <span class="token punctuation">{</span>age<span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">,</span> breed<span class="token operator">:</span> <span class="token string">"Persian"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> boris<span class="token operator">:</span> <span class="token punctuation">{</span>age<span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span> breed<span class="token operator">:</span> <span class="token string">"Maine Coon"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">cats<span class="token punctuation">.</span>boris<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 👉 const cats: Record<CatName, CatInfo></span>
|
||
</span></code></pre>
|
||
<p>构造一个具有一组 Keys 类型的属性 Type 的类型</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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<Type, Keys></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> completed<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">TodoPreview</span> <span class="token operator">=</span> Pick<span class="token operator"><</span>
|
||
</span><span class="code-line"> Todo<span class="token punctuation">,</span> <span class="token string">"name"</span> <span class="token operator">|</span> <span class="token string">"load"</span>
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> todo<span class="token operator">:</span> TodoPreview <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token string">"Clean room"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> load<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">todo<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
||
</span></code></pre>
|
||
<p>从 Type 中<strong>选择</strong>一组其键在并集 Keys 中的属性</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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<UnionType, ExcludedMembers></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><</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"><span class="token comment">// 👉 type T0 = "b" | "c"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> Exclude<span class="token operator"><</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 string">"b"</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 👉 type T1 = "c"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T2</span></span> <span class="token operator">=</span> Exclude<span class="token operator"><</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token builtin">Function</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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 h3body-not-exist"><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<Type, Union></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><</span>
|
||
</span><span class="code-line"> <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"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = "a"</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> Extract<span class="token operator"><</span>
|
||
</span><span class="code-line"> <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 punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token builtin">Function</span>
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = () => void</span>
|
||
</span></code></pre>
|
||
<p>通过从 Type 中<strong>提取</strong>所有可分配给 Union 的联合成员来构造一个类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="nonnullabletype"><a aria-hidden="true" tabindex="-1" href="#nonnullabletype"><span class="icon icon-link"></span></a>NonNullable<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><</span>
|
||
</span><span class="code-line"> <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"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = string | number</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> NonNullable<span class="token operator"><</span>
|
||
</span><span class="code-line"> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = string[]</span>
|
||
</span></code></pre>
|
||
<p>通过从 Type 中<strong>排除</strong> null 和 undefined 来构造一个类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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<Type, Keys></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> completed<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> createdAt<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">TodoPreview</span> <span class="token operator">=</span> Omit<span class="token operator"><</span>Todo<span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> todo<span class="token operator">:</span> TodoPreview <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> completed<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> createdAt<span class="token operator">:</span> <span class="token number">1615544252770</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">todo<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
||
</span></code></pre>
|
||
<p>构造一个具有 Type 属性的类型，但类型 Keys 中的属性<strong>除外</strong>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="parameterstype"><a aria-hidden="true" tabindex="-1" href="#parameterstype"><span class="icon icon-link"></span></a>Parameters<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> 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"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</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"><span class="token constant">T0</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><</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 operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = []</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><</span><span class="token punctuation">(</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = [s: string]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T2</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><<</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T2 = [arg: unknown]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T3</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><</span><span class="token keyword">typeof</span> f1<span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T3 = [arg: {</span>
|
||
</span><span class="code-line"><span class="token comment">// a: number;</span>
|
||
</span><span class="code-line"><span class="token comment">// b: string;</span>
|
||
</span><span class="code-line"><span class="token comment">// }]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T4</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T4 = unknown[]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T5</span></span> <span class="token operator">=</span> Parameters<span class="token operator"><</span><span class="token builtin">never</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T5 = never</span>
|
||
</span></code></pre>
|
||
<p>从函数类型 Type 的<strong>参数中</strong>使用的类型构造元组类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="constructorparameterstype"><a aria-hidden="true" tabindex="-1" href="#constructorparameterstype"><span class="icon icon-link"></span></a>ConstructorParameters<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><</span>
|
||
</span><span class="code-line"> ErrorConstructor
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = [message?: string]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator"><</span>
|
||
</span><span class="code-line"> FunctionConstructor
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = string[]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T2</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator"><</span>
|
||
</span><span class="code-line"> RegExpConstructor
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T2 = [</span>
|
||
</span><span class="code-line"><span class="token comment">// pattern: string | RegExp,</span>
|
||
</span><span class="code-line"><span class="token comment">// flags?: string</span>
|
||
</span><span class="code-line"><span class="token comment">// ]</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T3</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T3 = unknown[]</span>
|
||
</span></code></pre>
|
||
<p>从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型（如果 Type 不是函数，则类型 never ）。</p>
|
||
</div></div></div><div class="wrap h3body-exist"><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">
|
||
<h4 id="uppercasestringtype"><a aria-hidden="true" tabindex="-1" href="#uppercasestringtype"><span class="icon icon-link"></span></a>Uppercase<StringType></h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><span class="token keyword">type</span> <span class="token class-name">ShoutyGreeting</span> <span class="token operator">=</span> Uppercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// type ShoutyGreeting = "HELLO, WORLD"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ASCIICacheKey<span class="token operator"><</span>Str <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">ID-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Uppercase<span class="token operator"><</span>Str<span class="token operator">></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">MainID</span> <span class="token operator">=</span> ASCIICacheKey<span class="token operator"><</span><span class="token string">"my_app"</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// type MainID = "ID-MY_APP"</span>
|
||
</span></code></pre>
|
||
<p>将字符串中的每个字符<strong>转换为大写</strong>版本。</p>
|
||
<h4 id="lowercasestringtype"><a aria-hidden="true" tabindex="-1" href="#lowercasestringtype"><span class="icon icon-link"></span></a>Lowercase<StringType></h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><span class="token keyword">type</span> <span class="token class-name">QuietGreeting</span> <span class="token operator">=</span> Lowercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// type QuietGreeting = "hello, world"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ASCIICacheKey<span class="token operator"><</span>Str <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">id-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>Lowercase<span class="token operator"><</span>Str<span class="token operator">></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">MainID</span> <span class="token operator">=</span> ASCIICacheKey<span class="token operator"><</span><span class="token string">"MY_APP"</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token comment">// type MainID = "id-my_app"</span>
|
||
</span></code></pre>
|
||
<p>将字符串中的每个字符转换为等效的<strong>小写字母</strong>。</p>
|
||
<h4 id="capitalizestringtype"><a aria-hidden="true" tabindex="-1" href="#capitalizestringtype"><span class="icon icon-link"></span></a>Capitalize<StringType></h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> Capitalize<span class="token operator"><</span>LowercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type Greeting = "Hello, world"</span>
|
||
</span></code></pre>
|
||
<p>将字符串中的第一个字符转换为等效的<strong>大写字母</strong>。</p>
|
||
<h4 id="uncapitalizestringtype"><a aria-hidden="true" tabindex="-1" href="#uncapitalizestringtype"><span class="icon icon-link"></span></a>Uncapitalize<StringType></h4>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"><span class="token keyword">type</span> <span class="token class-name">UncomfortableGreeting</span> <span class="token operator">=</span> Uncapitalize<span class="token operator"><</span>UppercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type UncomfortableGreeting = "hELLO WORLD"</span>
|
||
</span></code></pre>
|
||
<p>将字符串中的第一个字符转换为等效的<strong>小写字母</strong>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="returntypetype"><a aria-hidden="true" tabindex="-1" href="#returntypetype"><span class="icon icon-link"></span></a>ReturnType<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> 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"><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"><span class="token constant">T0</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</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 operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = string</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token punctuation">(</span>s<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = void</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T2</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><<</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T2 = unknown</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T3</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><<</span>
|
||
</span><span class="code-line"> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token constant">U</span></span><span class="token punctuation">,</span> <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T3 = number[]</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T4</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token keyword">typeof</span> f1<span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T4 = {</span>
|
||
</span><span class="code-line"><span class="token comment">// a: number;</span>
|
||
</span><span class="code-line"><span class="token comment">// b: string;</span>
|
||
</span><span class="code-line"><span class="token comment">// }</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T5</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T5 = any</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T6</span></span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token builtin">never</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T6 = never</span>
|
||
</span></code></pre>
|
||
<p>构造一个由函数 Type 的<strong>返回类型</strong>组成的类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="thistypetype"><a aria-hidden="true" tabindex="-1" href="#thistypetype"><span class="icon icon-link"></span></a>ThisType<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ObjectDescriptor<span class="token operator"><</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"> 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"> <span class="token comment">// 方法中“this”的类型是 D & M</span>
|
||
</span><span class="code-line"> methods<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">M</span> <span class="token operator">&</span> ThisType<span class="token operator"><</span><span class="token constant">D</span> <span class="token operator">&</span> <span class="token constant">M</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">makeObject</span><span class="token generic class-name"><span class="token operator"><</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><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> desc<span class="token operator">:</span> ObjectDescriptor<span class="token operator"><</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="code-line"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">D</span> <span class="token operator">&</span> <span class="token constant">M</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> data<span class="token operator">:</span> object <span class="token operator">=</span> desc<span class="token punctuation">.</span>data <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"> <span class="token keyword">let</span> methods<span class="token operator">:</span> object <span class="token operator">=</span> desc<span class="token punctuation">.</span>methods <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"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>data<span class="token punctuation">,</span> <span class="token operator">...</span>methods <span class="token punctuation">}</span> <span class="token keyword">as</span> <span class="token constant">D</span> <span class="token operator">&</span> <span class="token constant">M</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token function">makeObject</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> data<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">moveBy</span><span class="token punctuation">(</span>dx<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> dy<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">+=</span> dx<span class="token punctuation">;</span> <span class="token comment">// Strongly typed this</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span>y <span class="token operator">+=</span> dy<span class="token punctuation">;</span> <span class="token comment">// Strongly typed this</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</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">obj<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">obj<span class="token punctuation">.</span>y <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">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 h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="instancetypetype"><a aria-hidden="true" tabindex="-1" href="#instancetypetype"><span class="icon icon-link"></span></a>InstanceType<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> InstanceType<span class="token operator"><</span><span class="token keyword">typeof</span> <span class="token constant">C</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T0 = C</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T1</span></span> <span class="token operator">=</span> InstanceType<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T1 = any</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T2</span></span> <span class="token operator">=</span> InstanceType<span class="token operator"><</span><span class="token builtin">never</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type T2 = never</span>
|
||
</span></code></pre>
|
||
<p>构造一个由 Type 中构造函数的实例类型组成的类型。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="thisparametertypetype"><a aria-hidden="true" tabindex="-1" href="#thisparametertypetype"><span class="icon icon-link"></span></a>ThisParameterType<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">numberToString</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> n<span class="token operator">:</span> ThisParameterType<span class="token operator"><</span><span class="token keyword">typeof</span> toHex<span class="token operator">></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">return</span> <span class="token function">toHex</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>提取函数类型的 <code>this</code> 参数的类型，如果函数类型没有 <code>this</code> 参数，则为未知。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="omitthisparametertype"><a aria-hidden="true" tabindex="-1" href="#omitthisparametertype"><span class="icon icon-link"></span></a>OmitThisParameter<Type></h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> fiveToHex
|
||
</span><span class="code-line"> <span class="token operator">:</span> OmitThisParameter<span class="token operator"><</span><span class="token keyword">typeof</span> toHex<span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token operator">=</span> <span class="token function">toHex</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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 h2body-exist"><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 h3body-not-exist"><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>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><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"><span class="token comment">// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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 h3body-not-exist"><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"><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">
|
||
</span><span class="code-line"><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"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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 h3body-not-exist"><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"><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"> <span class="token keyword">interface</span> <span class="token class-name">IntrinsicElements</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> foo<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>foo</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bar</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// error</span>
|
||
</span></code></pre>
|
||
<p><bar /> 没有在 JSX.IntrinsicElements 上指定。</p>
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><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"> <span class="token keyword">interface</span> <span class="token class-name">IntrinsicElements</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>elemName<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">any</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</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">FooProp</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token constant">X</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token constant">Y</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">AnotherComponent</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">ComponentFoo</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">FooProp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AnotherComponent</span></span> <span class="token attr-name">name</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>prop<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">Button</span> <span class="token operator">=</span> <span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><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"><</span>button</span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><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 h3body-not-exist"><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"><span class="token keyword">interface</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> 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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">HomeProps</span> <span class="token keyword">extends</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> home<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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">SideProps</span> <span class="token keyword">extends</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> 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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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"><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"><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"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</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"><</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"><</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"> <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>
|
||
</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"><</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"><</span><span class="token maybe-class-name">MenuProps</span><span class="token operator">>></span> <span class="token operator">&</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"><</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 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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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"><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 h3body-not-exist 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"><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"> <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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"><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"><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"><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"> <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"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><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"><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 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-ts"><code class="language-ts code-highlight"><span class="code-line"><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"> header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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"> <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"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span>div<span class="token operator">></span>
|
||
</span><span class="code-line"> <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"> <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"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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="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 comment">// 一个泛型组件</span>
|
||
</span><span class="code-line"><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"><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">
|
||
</span><span class="code-line"><span class="token comment">// 使用</span>
|
||
</span><span class="code-line"><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 class="wrap h2body-exist"><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 h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="类型推导infer"><a aria-hidden="true" tabindex="-1" href="#类型推导infer"><span class="icon icon-link"></span></a>类型推导（infer）</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"><span class="token keyword">type</span> <span class="token class-name">Capitalize<span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">U</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">V</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"> <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>Uppercase<span class="token operator"><</span><span class="token constant">U</span><span class="token operator">></span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">V</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line"> <span class="token operator">:</span> <span class="token constant">T</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">capitalized</span> <span class="token operator">=</span> Capitalize<span class="token operator"><</span><span class="token string">"hello world"</span><span class="token operator">></span> <span class="token comment">// Hello World</span>
|
||
</span></code></pre>
|
||
<ul>
|
||
<li>也可以在 infer 中使用条件约束（<code>extends</code>）</li>
|
||
</ul>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">SomeBigInt</span> <span class="token operator">=</span> <span class="token string">"100"</span> <span class="token keyword">extends</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">infer</span> <span class="token constant">U</span> <span class="token keyword">extends</span> <span class="token class-name">bigint</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">?</span> <span class="token constant">U</span> <span class="token operator">:</span> <span class="token builtin">never</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 100n</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="keyof-取-interface-的键"><a aria-hidden="true" tabindex="-1" href="#keyof-取-interface-的键"><span class="icon icon-link"></span></a>keyof 取 interface 的键</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// type keys = "x" | "y"</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">keys</span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Point<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">NumberOrString</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>index<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">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> length<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">type</span> <span class="token class-name">Point</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> y<span class="token operator">:</span> <span class="token builtin">number</span><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">Data</span> <span class="token operator">=</span> Point<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// Data 是个数组，提取里面的元素类型</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">PointDetail</span> <span class="token operator">=</span> Data<span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type PointDetail = { x: number; y: number; }</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><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"><span class="token keyword">const</span> point <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span> <span class="token keyword">as</span> <span class="token keyword">const</span>
|
||
</span><span class="code-line"><span class="token comment">// type 'readonly [3, 4]'</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><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">
|
||
<ul>
|
||
<li><a href="./javascript.html">JavaScript 备忘清单</a></li>
|
||
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a> <em>(typescriptlang.org)</em></li>
|
||
</ul>
|
||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
|
||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||
window.onhashchange = function () {
|
||
anchorPoint()
|
||
updateAnchor()
|
||
};
|
||
}
|
||
function anchorPoint() {
|
||
const hash = window.location.hash?.replace(/^#/, '') || '';
|
||
const elm = document.getElementById(decodeURIComponent(hash));
|
||
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||
if (elm?.tagName === 'H3') {
|
||
elm?.parentElement?.parentElement?.classList.add('active');
|
||
}
|
||
}
|
||
anchorPoint();
|
||
|
||
function updateAnchor(element) {
|
||
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchorContainer.forEach((tocanchor) => {
|
||
tocanchor.classList.remove('is-active-link');
|
||
});
|
||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||
if (anchor) {
|
||
anchor.classList.add('is-active-link');
|
||
}
|
||
}
|
||
// toc 定位
|
||
updateAnchor()
|
||
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchor.forEach((item) => {
|
||
item.addEventListener('click', (e) => {
|
||
updateAnchor()
|
||
})
|
||
})
|
||
</script></body>
|
||
</html>
|