mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
2418 lines
354 KiB
HTML
2418 lines
354 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>TypeScript 备忘清单
|
||
& typescript cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="typescript,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</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="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/typescript.md" class="edit" 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 src="../js/dark.js?v=1.8.3"></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><a href="https://www.npmjs.com/package/typescript"><img src="https://img.shields.io/npm/v/typescript.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/typescript"><img src="https://img.shields.io/npm/dm/typescript.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/Microsoft/TypeScript/network/dependents"><img src="https://badgen.net/github/dependents-repo/Microsoft/TypeScript" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/Microsoft/TypeScript"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</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" data-num="2" href="#入门-interface">入门 Interface</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置类型基元">内置类型基元</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常见的内置-js-对象">常见的内置 JS 对象</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内置">内置</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#类型字面量">类型字面量</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#避免">避免</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#通用语法">通用语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#泛型">泛型</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#用法">用法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#重载">重载</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类一致性">类一致性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#get--set">Get & Set</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#通过合并扩展">通过合并扩展</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#type">Type</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#type-vs-interface">Type vs Interface</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#把类型想象成变量">把类型想象成变量</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用实用程序类型构建">使用实用程序类型构建</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#原始类型">原始类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对象字面类型">对象字面类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#联合类型">联合类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#交叉口类型">交叉口类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从值类型">从值类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从函数返回类型">从函数返回类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从模块类型">从模块类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对象字面量语法">对象字面量语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#映射类型">映射类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#模板联合类型">模板联合类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#条件类型">条件类型</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#控制流动分析">控制流动分析</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#if-声明">If 声明</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#typeof用于原语">typeof（用于原语）</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#对象中的property对于对象">对象中的“property”（对于对象）</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#instanceof用于类">instanceof（用于类）</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#类型保护功能适用于任何东西">类型保护功能（适用于任何东西）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#任务">任务</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#关键点">关键点</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#表达式">表达式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可识别联合">可识别联合</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#用法-1">用法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#断言函数">断言函数</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#用法-2">用法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#in-操作符">in 操作符</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#class">Class</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建类实例">创建类实例</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#private-x-与-private">private x 与 #private</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#class-上的-this">Class 上的 “this”</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#类型和值">类型和值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#通用语法-1">通用语法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#泛型-1">泛型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#参数属性">参数属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#抽象类">抽象类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#装饰器和属性">装饰器和属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#索引签名">索引签名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#在-forwardref-上面声明泛型">在 forwardRef 上面声明泛型</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#实用程序类型">实用程序类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#awaitedtype">Awaited<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#requiredtype">Required<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#readonlytype">Readonly<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#partialtype">Partial<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#recordkeys-type">Record<Keys, Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#picktype-keys">Pick<Type, Keys></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#excludeuniontype-excludedmembers">Exclude<UnionType, ExcludedMembers></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#extracttype-union">Extract<Type, Union></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#nonnullabletype">NonNullable<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#omittype-keys">Omit<Type, Keys></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#parameterstype">Parameters<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#constructorparameterstype">ConstructorParameters<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内在字符串操作类型">内在字符串操作类型</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#uppercasestringtype">Uppercase<StringType></a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#lowercasestringtype">Lowercase<StringType></a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#capitalizestringtype">Capitalize<StringType></a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#uncapitalizestringtype">Uncapitalize<StringType></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#returntypetype">ReturnType<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#thistypetype">ThisType<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#instancetypetype">InstanceType<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#thisparametertypetype">ThisParameterType<Type></a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#omitthisparametertype">OmitThisParameter<Type></a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#jsx">JSX</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#jsx-介绍">JSX 介绍</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#as-运算符">as 运算符</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基于值的元素">基于值的元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内在的元素">内在的元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件">函数组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件重载">函数组件重载</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数子组件">函数子组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#有效组件">有效组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类组件">类组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#泛型组件">泛型组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#函数组件-ref">函数组件 ref</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组件-as-属性">组件 'as' 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组件作为-props-传递">组件作为 Props 传递</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#各种各样的技巧">各种各样的技巧</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类型推导infer">类型推导（infer）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#keyof-取-interface-的键">keyof 取 interface 的键</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#两个数组合并成一个新类型">两个数组合并成一个新类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#索引签名-1">索引签名</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#只读元组类型">只读元组类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从数组中提取类型">从数组中提取类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#satisfies">satisfies</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#使用-satisfies">使用 satisfies</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#范型实例化表达式">范型实例化表达式</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#泛型实例化函数">泛型实例化函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#识别全局修改模块">识别全局修改模块</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#获取数组元素的类型">获取数组元素的类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#范型推导出列表字面量">范型推导出列表字面量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#objectkeys-类型声明">Object.keys 类型声明</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#保留一段时间字符串常量类型">保留一段时间字符串常量类型</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#dts-模版">.d.ts 模版</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#module-plugin">Module: Plugin</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#全局库模板-global-dts">全局库模板 Global .d.ts</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#module-function">Module: Function</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#module-class">Module: Class</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#jsdoc-参考">JSDoc 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#type-1">@type</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#导入类型">导入类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#param-和-returns">@param 和 @returns</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#typedef-callback-和-param">@typedef, @callback, 和 @param</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#template">@template</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#cli">CLI</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-cli">使用 CLI</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器选项">编译器选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#构建选项">构建选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听选项">监听选项</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#tsconfig-ref">TSConfig Ref</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#可完成-90-的任务">可完成 90% 的任务</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#顶层配置">顶层配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类型检查compileroptions">类型检查(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#模块compileroptions">模块(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#emitcompileroptions">Emit(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#完整性compileroptions">完整性(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编辑器支持compileroptions">编辑器支持(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#输出格式compileroptions">输出格式(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-支持compileroptions">JavaScript 支持(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#互操作约束compileroptions">互操作约束(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器诊断compileroptions">编译器诊断(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#向后兼容性compileroptions">向后兼容性(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#语言与环境compileroptions">语言与环境(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#项目compileroptions">项目(compilerOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#监听选项watchoptions">监听选项(watchOptions)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#类型采集typeacquisition">类型采集(typeAcquisition)</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" 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><span class="code-line"> <span class="token keyword">public</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 keyword">public</span> y<span class="token operator">:</span> <span class="token builtin">number</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 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><span class="code-line"> <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><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。</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">import</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> Syncable<span class="token punctuation">,</span> triggersSync<span class="token punctuation">,</span> preferCache<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> required
|
||
</span><span class="code-line"><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><span class="code-line"> <span class="token comment">//...</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 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 class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="在-forwardref-上面声明泛型"><a aria-hidden="true" tabindex="-1" href="#在-forwardref-上面声明泛型"><span class="icon icon-link"></span></a>在 forwardRef 上面声明泛型</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> Wrapper <span class="token operator">=</span> <span class="token function">forwardRef</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">object</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> props<span class="token operator">:</span> RootNodeProps<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"> ref<span class="token operator">:</span> React<span class="token punctuation">.</span>LegacyRef<span class="token operator"><</span>HTMLDivElement<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token operator">=></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 ref<span class="token operator">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span><span class="token operator">></span><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></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"><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 class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access">forwardRef</span><span class="token operator"><</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MenuProps</span><span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> ref<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token operator">&</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><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Menu</span><span class="token operator">:</span> <span class="token maybe-class-name">MenuComponent</span> <span class="token operator">=</span> <span class="token maybe-class-name">InternalMenu</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token maybe-class-name">MenuComponent</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Item</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">SubMenu</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">SubMenu</span><span class="token punctuation">;</span>
|
||
</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 class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="函数组件-ref"><a aria-hidden="true" tabindex="-1" href="#函数组件-ref"><span class="icon icon-link"></span></a>函数组件 ref</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-3-->
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">FC</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ForwardedRef</span><span class="token punctuation">,</span> forwardRef<span class="token punctuation">,</span> <span class="token maybe-class-name">PropsWithRef</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</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 function">InternalProgress</span><span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">ProgressProps</span><span class="token punctuation">,</span> ref<span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">ForwardedRef</span><span class="token operator"><</span><span class="token maybe-class-name">HTMLDivElement</span><span class="token operator">></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 tag"><span class="token tag"><span class="token punctuation"><</span>div</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 class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></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 keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ProgressProps</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">DetailedHTMLProps</span></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">HTMLAttributes</span></span><span class="token operator"><</span><span class="token maybe-class-name">HTMLDivElement</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token maybe-class-name">HTMLDivElement</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Progress</span><span class="token operator">:</span> <span class="token constant">FC</span><span class="token operator"><</span><span class="token maybe-class-name">PropsWithRef</span><span class="token operator"><</span><span class="token maybe-class-name">ProgressProps</span><span class="token operator">>></span> <span class="token operator">=</span> <span class="token generic-function"><span class="token function">forwardRef</span><span class="token generic class-name"><span class="token operator"><</span>HTMLDivElement<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token maybe-class-name">InternalProgress</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="组件-as-属性"><a aria-hidden="true" tabindex="-1" href="#组件-as-属性"><span class="icon icon-link"></span></a>组件 'as' 属性</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">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ElementType</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ComponentPropsWithoutRef</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Link</span> <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name">ElementType<span class="token operator"><</span><span class="token builtin">any</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token string">"a"</span><span class="token operator">></span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> props<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">as</span><span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">&</span> <span class="token maybe-class-name">ComponentPropsWithoutRef</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token maybe-class-name">Comp</span> <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">as</span> <span class="token operator">||</span> <span class="token string">"a"</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">Comp</span></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 punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Comp</span></span><span class="token punctuation">></span></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><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">文本</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>允许传入自定义 <code>React</code> 组件，或 <code>div</code>, <code>a</code> 标签</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组件作为-props-传递"><a aria-hidden="true" tabindex="-1" href="#组件作为-props-传递"><span class="icon icon-link"></span></a>组件作为 Props 传递</h3><div class="wrap-body">
|
||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">RowProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> element<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">ElementType</span></span><span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> className<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 class="token operator">></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> <span class="token function-variable function">Row</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">RowProps</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 keyword">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>props.element</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h-8 w-8<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 punctuation">}</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">Row</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"div"</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Row</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">UserIcon</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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>
|
||
<p>也可以在 infer 中使用条件约束（<code>extends</code>）</p>
|
||
<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> 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><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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Arrayish</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>n<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">unknown</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">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Arrayish<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type A = number</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 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=col-span-2 row-span-2-->
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> named <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"aqua"</span><span class="token punctuation">,</span> <span class="token string">"aquamarine"</span><span class="token punctuation">,</span> <span class="token string">"azure"</span><span class="token punctuation">]</span> <span class="token keyword">as</span> <span class="token keyword">const</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> hex <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"#00FFFF"</span><span class="token punctuation">,</span> <span class="token string">"#7FFFD4"</span><span class="token punctuation">,</span> <span class="token string">"#F0FFFF"</span><span class="token punctuation">]</span> <span class="token keyword">as</span> <span class="token keyword">const</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">Colors</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>key <span class="token keyword">in</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> named<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> hex<span class="token punctuation">)</span><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 punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// Colors = {</span>
|
||
</span><span class="code-line"><span class="token comment">// aqua: "#00FFFF" | "#7FFFD4" | "#F0FFFF"; </span>
|
||
</span><span class="code-line"><span class="token comment">// .... </span>
|
||
</span><span class="code-line"><span class="token comment">// }</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">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 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="wrap-text"><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>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="satisfies"><a aria-hidden="true" tabindex="-1" href="#satisfies"><span class="icon icon-link"></span></a>satisfies</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<p><code>satisfies</code> 允许将验证表达式的类型与某种类型匹配，而无需更改该表达式的结果类型。</p>
|
||
<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">Colors</span> <span class="token operator">=</span> <span class="token string">'red'</span> <span class="token operator">|</span> <span class="token string">'green'</span> <span class="token operator">|</span> <span class="token string">'blue'</span><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">RGB</span></span> <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> red<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> green<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> blue<span class="token operator">:</span> <span class="token builtin">number</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">Palette</span> <span class="token operator">=</span> Record<span class="token operator"><</span>Colors<span class="token punctuation">,</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token constant">RGB</span><span class="token operator">></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> palette<span class="token operator">:</span> Palette <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> red<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> green<span class="token operator">:</span> <span class="token string">'#00ff00'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> blue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</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"><span class="token comment">// 通常的方式会推导出 redComponent 为</span>
|
||
</span><span class="code-line"><span class="token comment">// => string | number | undefined</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> redComponent <span class="token operator">=</span> palette<span class="token punctuation">.</span>red<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<h4 id="使用-satisfies"><a aria-hidden="true" tabindex="-1" href="#使用-satisfies"><span class="icon icon-link"></span></a>使用 satisfies</h4>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> palette <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> red<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> green<span class="token operator">:</span> <span class="token string">'#00ff00'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> blue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span> satisfies Record<span class="token operator"><</span>Colors<span class="token punctuation">,</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token constant">RGB</span><span class="token operator">></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// undefined | number</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> redComponent <span class="token operator">=</span> palette<span class="token punctuation">.</span>red<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-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-->
|
||
<p>不使用的情况下：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> errorMap<span class="token operator">:</span> Map<span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">,</span> Error<span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token comment">// 或者使用 type 定义别名</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">ErrorMapType</span> <span class="token operator">=</span> Map<span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">,</span> Error<span class="token operator">></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> ErrorMap <span class="token operator">=</span> Map<span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">,</span> Error<span class="token operator">></span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> errorMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ErrorMap</span><span class="token punctuation">(</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 class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">makeBox</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</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> value <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<hr>
|
||
<p>不使用：</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">makeHammerBox</span><span class="token punctuation">(</span>hammer<span class="token operator">:</span> Hammer<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">makeBox</span><span class="token punctuation">(</span>hammer<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 comment">// or...</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">makeWrenchBox</span><span class="token operator">:</span> <span class="token punctuation">(</span>wrench<span class="token operator">:</span> Wrench<span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token operator">=></span> Box<span class="token operator"><</span>Wrench<span class="token operator">></span> <span class="token operator">=</span> makeBox<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> makeStringBox <span class="token operator">=</span> makeBox<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 function">makeStringBox</span><span class="token punctuation">(</span><span class="token number">42</span><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">declare</span> global <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">String</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">fancyFormat</span><span class="token punctuation">(</span>opts<span class="token operator">:</span> FancyOption<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 punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">FancyOption</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> fancinessLevel<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></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> MyArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Alice"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Bob"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">23</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Eve"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">38</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"><span class="token keyword">type</span> <span class="token class-name">Person</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> MyArray<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 Person = {</span>
|
||
</span><span class="code-line"><span class="token comment">// name: string;</span>
|
||
</span><span class="code-line"><span class="token comment">// age: number;</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">Age</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> MyArray<span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">"age"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type Age = number</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Age2</span> <span class="token operator">=</span> Person<span class="token punctuation">[</span><span class="token string">"age"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// type Age2 = number</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-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">string</span></span><span class="token operator">></span><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> t<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">number</span></span><span class="token operator">></span><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> t<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">boolean</span></span><span class="token operator">></span><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> t<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const d: 'a'</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> e <span class="token operator">=</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const d: 1</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> f <span class="token operator">=</span> <span class="token function">c</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const d: true</span>
|
||
</span></code></pre>
|
||
<p>这里t的类型用了一个展开运算</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> g <span class="token operator">=</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token class-name"><span class="token builtin">string</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token constant">T</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> t<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>类型变成["111", "222"]了</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> h <span class="token operator">=</span> <span class="token function">g</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"111"</span><span class="token punctuation">,</span> <span class="token string">"222"</span><span class="token punctuation">]</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="objectkeys-类型声明"><a aria-hidden="true" tabindex="-1" href="#objectkeys-类型声明"><span class="icon icon-link"></span></a>Object.keys 类型声明</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">const</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token keyword">keyof</span> <span class="token keyword">typeof</span> options<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><span class="code-line">keys<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>key <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</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 template-string"><span class="token template-punctuation string">`</span><span class="token string">Missing option </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></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 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="保留一段时间字符串常量类型"><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">Color</span> <span class="token operator">=</span> <span class="token string">"primary"</span> <span class="token operator">|</span> <span class="token string">"secondary"</span> <span class="token operator">|</span> <span class="token builtin">string</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">type</span> <span class="token class-name">Color</span> <span class="token operator">=</span> <span class="token string">"primary"</span> <span class="token operator">|</span> <span class="token string">"secondary"</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">&</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</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="dts-模版"><a aria-hidden="true" tabindex="-1" href="#dts-模版"><span class="icon icon-link"></span></a>.d.ts 模版</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="module-plugin"><a aria-hidden="true" tabindex="-1" href="#module-plugin"><span class="icon icon-link"></span></a>Module: Plugin</h3><div class="wrap-body">
|
||
<p>例如，当您想使用扩展另一个库的 JavaScript 代码时</p>
|
||
<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> greeter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"super-greeter"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 普通欢迎 API</span>
|
||
</span><span class="code-line"><span class="token function">greeter</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">greeter</span><span class="token punctuation">(</span><span class="token string">"Hello world"</span><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 keyword">import</span> <span class="token string">"hyper-super-greeter"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">greeter<span class="token punctuation">.</span><span class="token function">hyperGreet</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>"<code>super-greeter</code>" 的定义：</p>
|
||
<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 keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">GreeterFunction</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <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 keyword">void</span>
|
||
</span><span class="code-line"> <span class="token punctuation">(</span>time<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><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 此示例显示如何导出接口指定的函数 */</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> greeter<span class="token operator">:</span> GreeterFunction<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>我们可以像下面这样扩展现有模块：</p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">/* 导入这个模块添加到的模块 */</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> greeter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"super-greeter"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* 声明与上面导入的模块相同的模块，然后我们扩展 greeter 函数的现有声明 */</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">module</span> <span class="token string">"super-greeter"</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">GreeterFunction</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">/** Greets even better! */</span>
|
||
</span><span class="code-line"> <span class="token function">hyperGreet</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><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="全局库模板-global-dts"><a aria-hidden="true" tabindex="-1" href="#全局库模板-global-dts"><span class="icon icon-link"></span></a>全局库模板 Global .d.ts</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>全局库可能如下所示：</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">createGreeting</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> s<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">window<span class="token punctuation">.</span><span class="token function-variable function">createGreeting</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> s<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><pur>类型声明示例</pur></p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">/* 可以作为 myLib(3) 此处包含这些调用签名 */</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">myLib</span><span class="token punctuation">(</span>a<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 punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">myLib</span><span class="token punctuation">(</span>a<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">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* 如果你希望这个库的名称是一个有效的类型名称，你可以在这里这样做例如，这允许我们写 'var x: myLib'; 确保这确实有意义！ 如果没有，只需删除此声明并在下面的命名空间内添加类型 */</span>
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">myLib</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"> length<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> extras<span class="token operator">?</span><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 punctuation">}</span>
|
||
</span><span class="code-line"><span class="token comment">/* 如果您的库在全局变量上公开了属性，请将它们放在此处。 您还应该在此处放置类型（接口和类型别名） */</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> myLib <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 我们可以写 'myLib.timeout = 50;'</span>
|
||
</span><span class="code-line"> <span class="token keyword">let</span> timeout<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">// 我们可以访问 'myLib.version'，但不能更改它</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> version<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token comment">// 我们可以通过 'let c = new myLib.Cat(42)' 创建一些类或参考例如 '函数 f(c: myLib.Cat) { ... }</span>
|
||
</span><span class="code-line"> <span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span>n<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 comment">// 我们可以从 'Cat' 实例中读取 'c.age' </span>
|
||
</span><span class="code-line"> <span class="token keyword">readonly</span> age<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">// 我们可以从 'Cat' 实例调用 'c.purr()' </span>
|
||
</span><span class="code-line"> <span class="token function">purr</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><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token comment">// 我们可以将变量声明为</span>
|
||
</span><span class="code-line"> <span class="token comment">// 'var s: myLib.CatSettings = { weight: 5, name: "Maru" };'</span>
|
||
</span><span class="code-line"> <span class="token keyword">interface</span> <span class="token class-name">CatSettings</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> weight<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"> tailLength<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"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token comment">// 我们可以写 'const v: myLib.VetID = 42;'</span>
|
||
</span><span class="code-line"> <span class="token comment">// 或 'const v: myLib.VetID = "bob";'</span>
|
||
</span><span class="code-line"> <span class="token keyword">type</span> <span class="token class-name">VetID</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"> <span class="token comment">// 我们可以调用 'myLib.checkCat(c)' 或 'myLib.checkCat(c, v);'</span>
|
||
</span><span class="code-line"> <span class="token keyword">function</span> <span class="token function">checkCat</span><span class="token punctuation">(</span>c<span class="token operator">:</span> Cat<span class="token punctuation">,</span> s<span class="token operator">?</span><span class="token operator">:</span> VetID<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="module-function"><a aria-hidden="true" tabindex="-1" href="#module-function"><span class="icon icon-link"></span></a>Module: Function</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> greeter <span class="token keyword">from</span> <span class="token string">"super-greeter"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">greeter</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token function">greeter</span><span class="token punctuation">(</span><span class="token string">"Hello world"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>要处理通过 <code>UMD</code> 和模块导入：</p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token comment">/* 如果此模块是一个 UMD 模块，在模块加载器环境之外加载时公开全局变量“myFuncLib”，请在此处声明该全局变量。 否则，删除此声明 */</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">as</span> <span class="token keyword">namespace</span> myFuncLib<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* 此声明指定该函数是从文件中导出的对象 */</span>
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token operator">=</span> Greeter<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* 此示例说明如何为您的函数设置多个重载 */</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">Greeter</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> Greeter<span class="token punctuation">.</span>NamedReturnType<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">Greeter</span><span class="token punctuation">(</span>length<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> Greeter<span class="token punctuation">.</span>LengthReturnType<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>如果你也想从你的模块中公开类型，你可以把它们放在这个块中。 通常你会想要描述函数返回类型的形状； 如本例所示，应在此处声明该类型，请注意，如果您决定包含此命名空间，则模块可能会被错误地导入为命名空间对象，除非 <code>--esModuleInterop</code> 已打开： <code>import * as x from '[~THE MODULE~]';</code> 错误的！不要这样做!</p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> Greeter <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">LengthReturnType</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> width<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> height<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">export</span> <span class="token keyword">interface</span> <span class="token class-name">NamedReturnType</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> firstName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> lastName<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 comment">/**
|
||
</span></span><span class="code-line"><span class="token comment"> * 如果模块也有属性，在这里声明它们。 例如，这个声明说这个代码是合法的：
|
||
</span></span><span class="code-line"><span class="token comment"> * import f = require('super-greeter');
|
||
</span></span><span class="code-line"><span class="token comment"> * console.log(f.defaultName);
|
||
</span></span><span class="code-line"><span class="token comment"> */</span>
|
||
</span><span class="code-line"> <span class="token keyword">export</span> <span class="token keyword">const</span> defaultName<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">export</span> <span class="token keyword">let</span> defaultLength<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></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="module-class"><a aria-hidden="true" tabindex="-1" href="#module-class"><span class="icon icon-link"></span></a>Module: Class</h3><div class="wrap-body">
|
||
<p>例如，当您想要使用如下所示的 <code>JavaScript</code> 代码时：</p>
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">const</span> Greeter <span class="token operator">=</span> <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string">"super-greeter"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> greeter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Greeter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">greeter<span class="token punctuation">.</span><span class="token function">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>要处理通过 <code>UMD</code> 和模块导入：</p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">as</span> <span class="token keyword">namespace</span> <span class="token string">"super-greeter"</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">export</span> <span class="token operator">=</span> Greeter<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/* 在此类中编写模块的方法和属性 */</span>
|
||
</span><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">class</span> <span class="token class-name">Greeter</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span>customGreeting<span class="token operator">?</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"> greet<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">myMethod</span><span class="token punctuation">(</span>opts<span class="token operator">:</span> MyClass<span class="token punctuation">.</span>MyClassMethodOptions<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 punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>如果你也想从你的模块中公开类型，你可以把它们放在这个块中，如果您决定包含此命名空间，则模块可能会被错误地导入为命名空间对象，除非 --esModuleInterop 已打开：
|
||
<code>import * as x from '[~THE MODULE~]';</code> 错误的！ 不要这样做！</p>
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> MyClass <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">MyClassMethodOptions</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> width<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"> height<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"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="jsdoc-参考"><a aria-hidden="true" tabindex="-1" href="#jsdoc-参考"><span class="icon icon-link"></span></a>JSDoc 参考</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="type-1"><a aria-hidden="true" tabindex="-1" href="#type-1"><span class="icon icon-link"></span></a>@type</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> s<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Window<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> win<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>PromiseLike<span class="token punctuation"><</span>string<span class="token punctuation">></span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> promisedString<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 您可以指定具有 DOM 属性的 HTML 元素</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>HTMLElement<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> elm <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">elm<span class="token punctuation">.</span><span class="token property-access">dataset</span><span class="token punctuation">.</span><span class="token property-access">myData</span> <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> ns<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Array<span class="token punctuation">.</span><span class="token punctuation"><</span>number<span class="token punctuation">></span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> jsdoc<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Array<span class="token punctuation"><</span>number<span class="token punctuation">></span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> nas<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>string <span class="token operator">|</span> boolean<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> sb<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">{</span> a<span class="token operator">:</span> string<span class="token punctuation">,</span> b<span class="token operator">:</span> number <span class="token punctuation">}</span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> var9<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * 将任意“字符串”属性映射到“数字”的类地图对象
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token punctuation"><</span>string<span class="token punctuation">,</span> number<span class="token punctuation">></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> stringToNumber<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Object<span class="token punctuation">.</span><span class="token punctuation"><</span>number<span class="token punctuation">,</span> object<span class="token punctuation">></span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> arrayLike<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">function</span><span class="token punctuation">(</span>string<span class="token punctuation">,</span> boolean<span class="token punctuation">)</span><span class="token operator">:</span> number<span class="token punctuation">}</span></span> Closure syntax */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> sbn<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">(</span>s<span class="token operator">:</span> string<span class="token punctuation">,</span> b<span class="token operator">:</span> boolean<span class="token punctuation">)</span> <span class="token operator">=></span> number<span class="token punctuation">}</span></span> TypeScript syntax */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> sbn2<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Function<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> fn7<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">function</span><span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> fn6<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token operator">*</span><span class="token punctuation">}</span></span> - can be 'any' type
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> star<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token operator">?</span><span class="token punctuation">}</span></span> - unknown type (same as 'any')
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> question<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>number <span class="token operator">|</span> string<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> numberOrString <span class="token operator">=</span> <span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">0.5</span> <span class="token operator">?</span> <span class="token string">"hello"</span> <span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> typeAssertedNumber <span class="token operator">=</span> <span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> */</span> <span class="token punctuation">(</span>numberOrString<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">let</span> one <span class="token operator">=</span> <span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">const</span><span class="token punctuation">}</span></span> */</span><span class="token punctuation">(</span><span class="token number">1</span><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-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// @filename: types.d.ts</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> type <span class="token maybe-class-name">Pet</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">name</span><span class="token operator">:</span> string<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 comment">// @filename: main.js</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./types"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Pet <span class="token punctuation">}</span></span> <span class="token parameter">p</span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">walk</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Walking </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">...</span><span class="token template-punctuation string">`</span></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-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@typedef</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./types"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Pet<span class="token punctuation">}</span></span> <span class="token class-name">Pet</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Pet<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> myPet<span class="token punctuation">;</span>
|
||
</span><span class="code-line">myPet<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>如果您不知道类型，或者如果它有一个很烦人的大类型，<code>import types</code> 可以用来从模块中获取值的类型：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">typeof</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./accounts"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>userAccount<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./accounts"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">userAccount</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="param-和-returns"><a aria-hidden="true" tabindex="-1" href="#param-和-returns"><span class="icon icon-link"></span></a>@param 和 @returns</h3><div class="wrap-body">
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token parameter">p1</span> - 一个字符串参数
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">=</span><span class="token punctuation">}</span></span> <span class="token parameter">p2</span> - 可选参数（Google Closure 语法）
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token optional-parameter"><span class="token punctuation">[</span><span class="token parameter">p3</span><span class="token punctuation">]</span></span> - 另一个可选参数（JSDoc 语法）
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token optional-parameter"><span class="token punctuation">[</span><span class="token parameter">p4</span><span class="token punctuation">=</span><span class="token code language-javascript"><span class="token string">"test"</span></span><span class="token punctuation">]</span></span> - 具有默认值的可选参数
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@returns</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> 这是结果
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">stringsStrings</span><span class="token punctuation">(</span><span class="token parameter">p1<span class="token punctuation">,</span> p2<span class="token punctuation">,</span> p3<span class="token punctuation">,</span> p4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// TODO</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>同样，对于函数的返回类型：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token punctuation">{</span>PromiseLike<span class="token punctuation"><</span>string<span class="token punctuation">></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">ps</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><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@returns</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">{</span> a<span class="token operator">:</span> string<span class="token punctuation">,</span> b<span class="token operator">:</span> number <span class="token punctuation">}</span><span class="token punctuation">}</span></span> - 可以使用“@returns”和“@return”
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">ab</span><span class="token punctuation">(</span><span class="token punctuation">)</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 row-span-2"><div class="wrap-header h3wrap"><h3 id="typedef-callback-和-param"><a aria-hidden="true" tabindex="-1" href="#typedef-callback-和-param"><span class="icon icon-link"></span></a>@typedef, @callback, 和 @param</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@typedef</span> <span class="token class-name"><span class="token punctuation">{</span>Object<span class="token punctuation">}</span></span> <span class="token class-name">SpecialType</span> - 创建一个名为“SpecialType”的新类型
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token parameter">prop1</span> - SpecialType 的字符串属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">prop2</span> - SpecialType 的数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">=</span><span class="token punctuation">}</span></span> <span class="token parameter">prop3</span> - SpecialType 的可选数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@prop</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> [prop4] - SpecialType 的可选数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@prop</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> [prop5=42] - 具有默认值的 SpecialType 的可选数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>SpecialType<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> specialTypeObject<span class="token punctuation">;</span>
|
||
</span><span class="code-line">specialTypeObject<span class="token punctuation">.</span><span class="token property-access">prop3</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>您可以在第一行使用 object 或 Object</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@typedef</span> <span class="token class-name"><span class="token punctuation">{</span>object<span class="token punctuation">}</span></span> <span class="token class-name">SpecialType1</span> - 创建一个名为“SpecialType”的新类型
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token parameter">prop1</span> - SpecialType 的字符串属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">prop2</span> - SpecialType 的数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@property</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">=</span><span class="token punctuation">}</span></span> <span class="token parameter">prop3</span> - SpecialType 的可选数字属性
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>SpecialType1<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">var</span> specialTypeObject1<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p><strong>@param</strong> 允许对一次性类型规范使用类似的语法。 请注意，嵌套的属性名称必须以参数名称为前缀：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>Object<span class="token punctuation">}</span></span> <span class="token parameter">options</span> - 形状和上面的SpecialType一样
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token parameter">options<span class="token punctuation">.</span>prop1</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token parameter">options<span class="token punctuation">.</span>prop2</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">=</span><span class="token punctuation">}</span></span> <span class="token parameter">options<span class="token punctuation">.</span>prop3</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token optional-parameter"><span class="token punctuation">[</span><span class="token parameter">options<span class="token punctuation">.</span>prop4</span><span class="token punctuation">]</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token optional-parameter"><span class="token punctuation">[</span><span class="token parameter">options<span class="token punctuation">.</span>prop5</span><span class="token punctuation">=</span><span class="token code language-javascript"><span class="token number">42</span></span><span class="token punctuation">]</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">special</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span><span class="token property-access">prop4</span> <span class="token operator">||</span> <span class="token number">1001</span><span class="token punctuation">)</span> <span class="token operator">+</span> options<span class="token punctuation">.</span><span class="token property-access">prop5</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p><strong>@callback</strong> 类似于 <strong>@typedef</strong>，但它指定的是函数类型而不是对象类型：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@callback</span> Predicate
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token parameter">data</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>number<span class="token punctuation">}</span></span> <span class="token optional-parameter"><span class="token punctuation">[</span><span class="token parameter">index</span><span class="token punctuation">]</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@returns</span> <span class="token class-name"><span class="token punctuation">{</span>boolean<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span>Predicate<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">ok</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">s</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token operator">!</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">%</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>当然，这些类型中的任何一种都可以在单行 <strong>@typedef</strong> 中使用 TypeScript 语法声明：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@typedef</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">{</span> prop1<span class="token operator">:</span> string<span class="token punctuation">,</span> prop2<span class="token operator">:</span> string<span class="token punctuation">,</span> prop3<span class="token operator">?</span><span class="token operator">:</span> number <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token class-name">SpecialType</span> */</span>
|
||
</span><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@typedef</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token operator">:</span> string<span class="token punctuation">,</span> index<span class="token operator">?</span><span class="token operator">:</span> number<span class="token punctuation">)</span> <span class="token operator">=></span> boolean<span class="token punctuation">}</span></span> <span class="token class-name">Predicate</span> */</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="template"><a aria-hidden="true" tabindex="-1" href="#template"><span class="icon icon-link"></span></a>@template</h3><div class="wrap-body">
|
||
<p>您可以使用 <strong>@template</strong> 标记声明类型参数。 这使您可以创建通用的函数、类或类型：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@template</span> <span class="token class-name">T</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>T<span class="token punctuation">}</span></span> <span class="token parameter">x</span> - 流向返回类型的通用参数
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@returns</span> <span class="token class-name"><span class="token punctuation">{</span>T<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">id</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> x<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> a <span class="token operator">=</span> <span class="token function">id</span><span class="token punctuation">(</span><span class="token string">"string"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">id</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token function">id</span><span class="token punctuation">(</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>使用逗号或多个标签来声明多个类型参数：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@template</span> <span class="token class-name">T</span>,U,V
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@template</span> <span class="token class-name">W</span>,X
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span></code></pre>
|
||
<p>您还可以在类型参数名称之前指定类型约束。 只有列表中的第一个类型参数受到约束：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/**
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@template</span> <span class="token class-name"><span class="token punctuation">{</span>string<span class="token punctuation">}</span></span> <span class="token class-name">K</span> - K 必须是字符串或字符串文字
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@template</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token punctuation">{</span> serious<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> string <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token class-name">Seriousalizable</span> - 一定要有 serious 的方法
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>K<span class="token punctuation">}</span></span> <span class="token parameter">key</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> * <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>Seriousalizable<span class="token punctuation">}</span></span> <span class="token parameter">object</span>
|
||
</span></span><span class="code-line"><span class="token doc-comment comment"> */</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">seriousalize</span><span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> object</span><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 punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>最后，您可以为类型参数指定默认值：</p>
|
||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@template</span> [T=object] */</span>
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Cache</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token doc-comment comment">/** <span class="token keyword">@param</span> <span class="token class-name"><span class="token punctuation">{</span>T<span class="token punctuation">}</span></span> <span class="token parameter">initial</span> */</span>
|
||
</span><span class="code-line"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">T</span></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">let</span> c <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cache</span><span class="token punctuation">(</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="cli"><a aria-hidden="true" tabindex="-1" href="#cli"><span class="icon icon-link"></span></a>CLI</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-cli"><a aria-hidden="true" tabindex="-1" href="#使用-cli"><span class="icon icon-link"></span></a>使用 CLI</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 基于向后查看 tsconfig.json 的 fs 运行编译</span>
|
||
</span><span class="code-line">$ tsc
|
||
</span><span class="code-line"><span class="token comment"># 使用编译器默认值仅为 index.ts 发射 JS</span>
|
||
</span><span class="code-line">$ tsc index.ts
|
||
</span><span class="code-line"><span class="token comment"># 使用默认设置为文件夹 src 中的任何 .ts 文件发出 JS</span>
|
||
</span><span class="code-line">$ tsc src/*.ts
|
||
</span><span class="code-line"><span class="token comment"># 使用 tsconfig.production.json 中的编译器设置发出引用的文件</span>
|
||
</span><span class="code-line">$ tsc <span class="token parameter variable">--project</span> tsconfig.production.json
|
||
</span><span class="code-line"><span class="token comment"># 为 js 文件发出 d.ts 文件，显示布尔值的编译器选项</span>
|
||
</span><span class="code-line">$ tsc index.js <span class="token parameter variable">--declaration</span> <span class="token parameter variable">--emitDeclarationOnly</span>
|
||
</span><span class="code-line"><span class="token comment"># 通过采用字符串参数的编译器选项从两个文件发出单个 .js 文件</span>
|
||
</span><span class="code-line">$ tsc app.ts util.ts <span class="token parameter variable">--target</span> esnext <span class="token parameter variable">--outfile</span> index.js
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</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-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="left-align"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>--all</code> <em>boolean</em></td><td>显示所有编译器选项</td></tr><tr><td align="left"><code>--generateTrace</code> <em>string</em></td><td>生成事件跟踪和类型列表</td></tr><tr><td align="left"><code>--help</code> <em>boolean</em></td><td>提供有关 CLI 帮助的本地信息</td></tr><tr><td align="left"><code>--init</code> <em>boolean</em></td><td>初始化 TypeScript 项目并创建 tsconfig.json 文件</td></tr><tr><td align="left"><code>--listFilesOnly</code> <em>boolean</em></td><td>打印作为编译一部分的文件名，然后停止处理</td></tr><tr><td align="left"><code>--locale</code> <em>string</em></td><td>设置来自 TypeScript 的消息传递语言。 这不影响发射</td></tr><tr><td align="left"><code>--project</code> <em>string</em></td><td>编译项目给定其配置文件的路径，或带有 'tsconfig.json' 的文件夹</td></tr><tr><td align="left"><code>--showConfig</code> <em>boolean</em></td><td>打印最终配置而不是构建</td></tr><tr><td align="left"><code>--version</code> <em>boolean</em></td><td>打印编译器的版本</td></tr></tbody></table>
|
||
<!--rehype:className=left-align-->
|
||
</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">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>--build</code> <em>boolean</em></td><td>构建一个或多个项目及其依赖项（如果已过期）</td></tr><tr><td align="left"><code>--clean</code> <em>boolean</em></td><td>删除所有项目的输出</td></tr><tr><td align="left"><code>--dry</code> <em>boolean</em></td><td>显示将构建的内容（或删除，如果使用“--clean”指定）</td></tr><tr><td align="left"><code>--force</code> <em>boolean</em></td><td>构建所有项目，包括那些看起来是最新的项目</td></tr><tr><td align="left"><code>--verbose</code> <em>boolean</em></td><td>启用详细日志记录</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</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-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>--excludeDirectories</code> <em>list</em></td><td>从监视进程中删除目录列表</td></tr><tr><td align="left"><code>--excludeFiles</code> <em>list</em></td><td>从监视模式的处理中删除文件列表</td></tr><tr><td align="left"><code>--fallbackPolling</code> <em>fixedinterval</em>, <em>priorityinterval</em>, <em>dynamicpriority</em>, <em>fixedchunksize</em></td><td>指定当系统用完本机文件观察器时观察器应使用的方法</td></tr><tr><td align="left"><code>--synchronousWatchDirectory</code> <em>boolean</em></td><td>在本机不支持递归监视的平台上同步调用回调并更新目录监视程序的状态</td></tr><tr><td align="left"><code>--watch</code> <em>boolean</em></td><td>观看输入文件</td></tr><tr><td align="left"><code>--watchDirectory</code> <em>usefsevents</em>, <em>fixedpollinginterval</em>, <em>dynamicprioritypolling</em>, _fixedchunksizepolling</td><td>指定在缺少递归文件监视功能的系统上如何监视目录</td></tr><tr><td align="left"><code>--watchFile</code> <em>fixedpollinginterval</em>, <em>prioritypollinginterval</em>, <em>dynamicprioritypolling</em>, <em>fixedchunksizepolling</em>, <em>usefsevents</em>, <em>usefseventsonparentdirectory</em></td><td>指定 TypeScript 监视模式的工作方式</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="tsconfig-ref"><a aria-hidden="true" tabindex="-1" href="#tsconfig-ref"><span class="icon icon-link"></span></a>TSConfig Ref</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="可完成-90-的任务"><a aria-hidden="true" tabindex="-1" href="#可完成-90-的任务"><span class="icon icon-link"></span></a>可完成 90% 的任务</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token string-property property">"compilerOptions"</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 string-property property">"esModuleInterop"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"skipLibCheck"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"target"</span><span class="token operator">:</span> <span class="token string">"es2022"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"verbatimModuleSyntax"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"allowJs"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"resolveJsonModule"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"moduleDetection"</span><span class="token operator">:</span> <span class="token string">"force"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 严格 */</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"strict"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"noUncheckedIndexedAccess"</span><span class="token operator">:</span> <span class="token boolean">true</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 string-property property">"moduleResolution"</span><span class="token operator">:</span> <span class="token string">"NodeNext"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"module"</span><span class="token operator">:</span> <span class="token string">"NodeNext"</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 string-property property">"moduleResolution"</span><span class="token operator">:</span> <span class="token string">"Bundler"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"module"</span><span class="token operator">:</span> <span class="token string">"ESNext"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"noEmit"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 如果你的代码在 DOM 中运行: */</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"lib"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"es2022"</span><span class="token punctuation">,</span> <span class="token string">"dom"</span><span class="token punctuation">,</span> <span class="token string">"dom.iterable"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 如果你的代码不在 DOM 中运行: */</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"lib"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"es2022"</span><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 string-property property">"declaration"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">/* 如果您正在 monorepo 中构建库: */</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"composite"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"sourceMap"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"declarationMap"</span><span class="token operator">:</span> <span class="token boolean">true</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">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>files</code> <a href="https://www.typescriptlang.org/zh/tsconfig#files">#</a></td><td>指定要<code>包含</code>在程序中的文件的允许列表</td></tr><tr><td align="left"><code>extends</code> <a href="https://www.typescriptlang.org/zh/tsconfig#extends">#</a></td><td>包含要<code>继承</code>的另一个配置文件的路径</td></tr><tr><td align="left"><code>include</code> <a href="https://www.typescriptlang.org/zh/tsconfig#include">#</a></td><td>指定要<code>包含</code>在程序中的文件名或模式数组</td></tr><tr><td align="left"><code>exclude</code> <a href="https://www.typescriptlang.org/zh/tsconfig#exclude">#</a></td><td>指定解析包含时应<code>跳过</code>的文件名或模式数组</td></tr><tr><td align="left"><code>references</code> <a href="https://www.typescriptlang.org/zh/tsconfig#references">#</a></td><td>项目引用是一种将 TypeScript 程序构造成更小部分的方法</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"extends"</span><span class="token operator">:</span> <span class="token string">"./tsconfig"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"compilerOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"strictNullChecks"</span><span class="token operator">:</span> <span class="token boolean">false</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 row-span-3"><div class="wrap-header h3wrap"><h3 id="类型检查compileroptions"><a aria-hidden="true" tabindex="-1" href="#类型检查compileroptions"><span class="icon icon-link"></span></a>类型检查(compilerOptions)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>allowUnreachableCode</code> <a href="https://www.typescriptlang.org/zh/tsconfig#allowUnreachableCode">#</a></td><td>允许无法访问的代码</td></tr><tr><td align="left"><code>allowUnusedLabels</code> <a href="https://www.typescriptlang.org/zh/tsconfig#allowUnusedLabels">#</a></td><td>允许未使用的标签</td></tr><tr><td align="left"><code>alwaysStrict</code> <a href="https://www.typescriptlang.org/zh/tsconfig#alwaysStrict">#</a></td><td>始终严格</td></tr><tr><td align="left"><code>exactOptionalPropertyTypes</code> <a href="https://www.typescriptlang.org/zh/tsconfig#exactOptionalPropertyTypes">#</a></td><td>启用后，TypeScript 应用更严格的规则来处理它如何处理类型或具有 ? 字首</td></tr><tr><td align="left"><code>noFallthroughCasesInSwitch</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noFallthroughCasesInSwitch">#</a></td><td>在 switch 语句中报告失败案例的错误</td></tr><tr><td align="left"><code>noImplicitAny</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noImplicitAny">#</a></td><td>在某些不存在类型注释的情况下，TypeScript 将在无法推断类型时回退到变量的任何类型</td></tr><tr><td align="left"><code>noImplicitOverride</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noImplicitOverride">#</a></td><td>当处理使用继承的类时，子类可能与在基类中重命名时重载的函数“不同步”</td></tr><tr><td align="left"><code>noImplicitReturns</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noImplicitReturns">#</a></td><td>没有隐式返回</td></tr><tr><td align="left"><code>noImplicitThis</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noImplicitThis">#</a></td><td>使用隐含的“any”类型在“this”表达式上引发错误</td></tr><tr><td align="left"><code>noPropertyAccessFromIndexSignature</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noPropertyAccessFromIndexSignature">#</a></td><td>此设置确保通过“点”（obj.key）语法访问字段和“索引”（obj[“key”]）以及在类型中声明属性的方式之间的一致性</td></tr><tr><td align="left"><code>noUncheckedIndexedAccess</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noUncheckedIndexedAccess">#</a></td><td>TypeScript 有一种方法可以通过索引签名来描述对象上具有未知键但已知值的对象</td></tr><tr><td align="left"><code>noUnusedLocals</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noUnusedLocals">#</a></td><td>报告未使用的局部变量的错误</td></tr><tr><td align="left"><code>noUnusedParameters</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noUnusedParameters">#</a></td><td>报告函数中未使用参数的错误</td></tr><tr><td align="left"><code>strict</code> <a href="https://www.typescriptlang.org/zh/tsconfig#strict">#</a></td><td>严格标志启用了范围广泛的类型检查行为，从而更有效地保证了程序的正确性</td></tr><tr><td align="left"><code>strictBindCallApply</code> <a href="https://www.typescriptlang.org/zh/tsconfig#strictBindCallApply">#</a></td><td>TypeScript 将检查函数调用、绑定和应用的内置方法是否使用底层函数的正确参数调用</td></tr><tr><td align="left"><code>strictFunctionTypes</code> <a href="https://www.typescriptlang.org/zh/tsconfig#strictFunctionTypes">#</a></td><td>此标志会导致更正确地检查函数参数</td></tr><tr><td align="left"><code>strictNullChecks</code> <a href="https://www.typescriptlang.org/zh/tsconfig#strictNullChecks">#</a></td><td>严格的空检查</td></tr><tr><td align="left"><code>strictPropertyInitialization</code> <a href="https://www.typescriptlang.org/zh/tsconfig#strictPropertyInitialization">#</a></td><td>严格的属性初始化</td></tr><tr><td align="left"><code>useUnknownInCatchVariables</code> <a href="https://www.typescriptlang.org/zh/tsconfig#useUnknownInCatchVariables">#</a></td><td>在 TypeScript 4.0 中，添加了支持以允许将 catch 子句中的变量类型从 any 更改为 unknown</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="模块compileroptions"><a aria-hidden="true" tabindex="-1" href="#模块compileroptions"><span class="icon icon-link"></span></a>模块(compilerOptions)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>allowUmdGlobalAccess</code> <a href="https://www.typescriptlang.org/zh/tsconfig#allowUmdGlobalAccess">#</a></td><td>为 true 时，将允许你在模块文件中以全局变量的形式访问 UMD 的导出</td></tr><tr><td align="left"><code>baseUrl</code> <a href="https://www.typescriptlang.org/zh/tsconfig#baseUrl">#</a></td><td>可以让您设置解析非绝对路径模块名时的基准目录</td></tr><tr><td align="left"><code>module</code> <a href="https://www.typescriptlang.org/zh/tsconfig#module">#</a></td><td>设置程序的模块系统</td></tr><tr><td align="left"><code>moduleResolution</code> <a href="https://www.typescriptlang.org/zh/tsconfig#moduleResolution">#</a></td><td>指定模块解析策略：'node'（Node.js）或 'classic'</td></tr><tr><td align="left"><code>moduleSuffixes</code> <a href="https://www.typescriptlang.org/zh/tsconfig#moduleSuffixes">#</a></td><td>提供一种在解析模块时覆盖要搜索的默认文件名后缀列表的方法</td></tr><tr><td align="left"><code>noResolve</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noResolve">#</a></td><td>默认情况下，TypeScript 将检查导入和 <code><reference</code> 指令的初始文件集，并将这些解析的文件添加到您的程序中</td></tr><tr><td align="left"><code>paths</code> <a href="https://www.typescriptlang.org/zh/tsconfig#paths">#</a></td><td>一些将模块导入重新映射到相对于 baseUrl 路径的配置</td></tr><tr><td align="left"><code>resolveJsonModule</code> <a href="https://www.typescriptlang.org/zh/tsconfig#resolveJsonModule">#</a></td><td>允许导入带有“.json”扩展名的模块，这是 node 项目中的常见做法</td></tr><tr><td align="left"><code>rootDir</code> <a href="https://www.typescriptlang.org/zh/tsconfig#rootDir">#</a></td><td>默认: 所有输入的非声明文件中的最长公共路径</td></tr><tr><td align="left"><code>rootDirs</code> <a href="https://www.typescriptlang.org/zh/tsconfig#rootDirs">#</a></td><td>通过 rootDirs，你可以告诉编译器有许多“虚拟”的目录作为一个根目录</td></tr><tr><td align="left"><code>typeRoots</code> <a href="https://www.typescriptlang.org/zh/tsconfig#typeRoots">#</a></td><td>默认情况下，所有 可见 的 ”@types” 包都将包含在你的编译过程中</td></tr><tr><td align="left"><code>types</code> <a href="https://www.typescriptlang.org/zh/tsconfig#types">#</a></td><td>默认情况下，所有 可见 的 ”@types” 包都将包含在你的编译过程中</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-5"><div class="wrap-header h3wrap"><h3 id="emitcompileroptions"><a aria-hidden="true" tabindex="-1" href="#emitcompileroptions"><span class="icon icon-link"></span></a>Emit(compilerOptions)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-5-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>declaration</code> <a href="https://www.typescriptlang.org/zh/tsconfig#declaration">#</a></td><td>为项目中的每个 TypeScript 或 JavaScript 文件生成 .d.ts 文件</td></tr><tr><td align="left"><code>declarationDir</code> <a href="https://www.typescriptlang.org/zh/tsconfig#declarationDir">#</a></td><td>提供一种配置发出声明文件的根目录的方法</td></tr><tr><td align="left"><code>declarationMap</code> <a href="https://www.typescriptlang.org/zh/tsconfig#declarationMap">#</a></td><td>为映射回原始 .ts 源文件的 .d.ts 文件生成源映射</td></tr><tr><td align="left"><code>downlevelIteration</code> <a href="https://www.typescriptlang.org/zh/tsconfig#downlevelIteration">#</a></td><td>降级是 TypeScript 的术语，用于转译到旧版本的 JavaScript</td></tr><tr><td align="left"><code>emitBOM</code> <a href="https://www.typescriptlang.org/zh/tsconfig#emitBOM">#</a></td><td>控制 TypeScript 在写入输出文件时是否会发出字节顺序标记 (BOM)</td></tr><tr><td align="left"><code>emitDeclarationOnly</code> <a href="https://www.typescriptlang.org/zh/tsconfig#emitDeclarationOnly">#</a></td><td>只发出 .d.ts 文件；不要发出 .js 文件</td></tr><tr><td align="left"><code>importHelpers</code> <a href="https://www.typescriptlang.org/zh/tsconfig#importHelpers">#</a></td><td>对于某些降级操作，TypeScript 使用一些辅助代码来执行扩展类、展开数组或对象以及异步操作等操作</td></tr><tr><td align="left"><code>importsNotUsedAsValues</code> <a href="https://www.typescriptlang.org/zh/tsconfig#importsNotUsedAsValues">#</a></td><td>此标志控制导入的工作方式，有 3 个不同的选项: <code>remove</code>, <code>preserve</code>, <code>error</code></td></tr><tr><td align="left"><code>inlineSourceMap</code> <a href="https://www.typescriptlang.org/zh/tsconfig#inlineSourceMap">#</a></td><td>设置后，TypeScript 不会写出 .js.map 文件来提供源映射，而是将源映射内容嵌入到 .js 文件中</td></tr><tr><td align="left"><code>inlineSources</code> <a href="https://www.typescriptlang.org/zh/tsconfig#inlineSources">#</a></td><td>设置后，TypeScript 会将 .ts 文件的原始内容作为嵌入字符串包含在源映射中（使用源映射的 sourcesContent 属性）</td></tr><tr><td align="left"><code>mapRoot</code> <a href="https://www.typescriptlang.org/zh/tsconfig#mapRoot">#</a></td><td>指定调试器应该定位映射文件而不是生成位置的位置</td></tr><tr><td align="left"><code>newLine</code> <a href="https://www.typescriptlang.org/zh/tsconfig#newLine">#</a></td><td>指定发出文件时要使用的行尾顺序：“CRLF”（dos）或“LF”（unix）</td></tr><tr><td align="left"><code>noEmit</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noEmit">#</a></td><td>不要发出编译器输出文件，如 JavaScript 源代码、源映射或声明</td></tr><tr><td align="left"><code>noEmitHelpers</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noEmitHelpers">#</a></td><td>您可以在全局范围内为您使用的助手提供实现，并完全关闭助手函数的发出，而不是使用 importHelpers 导入助手</td></tr><tr><td align="left"><code>noEmitOnError</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noEmitOnError">#</a></td><td>如果报告了任何错误，请不要发出编译器输出文件，如 JavaScript 源代码、源映射或声明</td></tr><tr><td align="left"><code>outDir</code> <a href="https://www.typescriptlang.org/zh/tsconfig#outDir">#</a></td><td>如果指定，.js（以及 .d.ts、.js.map 等）文件将被发送到此目录中</td></tr><tr><td align="left"><code>outFile</code> <a href="https://www.typescriptlang.org/zh/tsconfig#outFile">#</a></td><td>如果指定，所有全局（非模块）文件将连接到指定的单个输出文件中</td></tr><tr><td align="left"><code>preserveConstEnums</code> <a href="https://www.typescriptlang.org/zh/tsconfig#preserveConstEnums">#</a></td><td>不要删除生成的代码中的 const enum 声明</td></tr><tr><td align="left"><code>preserveValueImports</code> <a href="https://www.typescriptlang.org/zh/tsconfig#preserveValueImports">#</a></td><td>在某些情况下，TypeScript 无法检测到您正在使用导入</td></tr><tr><td align="left"><code>removeComments</code> <a href="https://www.typescriptlang.org/zh/tsconfig#removeComments">#</a></td><td>转换为 JavaScript 时从 TypeScript 文件中删除所有注释</td></tr><tr><td align="left"><code>sourceMap</code> <a href="https://www.typescriptlang.org/zh/tsconfig#sourceMap">#</a></td><td>启用源映射文件的生成</td></tr><tr><td align="left"><code>sourceRoot</code> <a href="https://www.typescriptlang.org/zh/tsconfig#sourceRoot">#</a></td><td>指定调试器应定位 TypeScript 文件的位置，而不是相对源位置</td></tr><tr><td align="left"><code>stripInternal</code> <a href="https://www.typescriptlang.org/zh/tsconfig#stripInternal">#</a></td><td>不要为在其 JSDoc 注释中具有 @internal 注释的代码发出声明</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="完整性compileroptions"><a aria-hidden="true" tabindex="-1" href="#完整性compileroptions"><span class="icon icon-link"></span></a>完整性(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>skipDefaultLibCheck</code> <a href="https://www.typescriptlang.org/zh/tsconfig#skipDefaultLibCheck">#</a></td><td>请改用 <code>skipLibCheck</code></td></tr><tr><td align="left"><code>skipLibCheck</code> <a href="https://www.typescriptlang.org/zh/tsconfig#skipLibCheck">#</a></td><td>跳过声明文件的类型检查</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="编辑器支持compileroptions"><a aria-hidden="true" tabindex="-1" href="#编辑器支持compileroptions"><span class="icon icon-link"></span></a>编辑器支持(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>disableSizeLimit</code> <a href="https://www.typescriptlang.org/zh/tsconfig#disableSizeLimit">#</a></td><td>分配的内存量有一个上限。打开此标志将删除限制</td></tr><tr><td align="left"><code>plugins</code> <a href="https://www.typescriptlang.org/zh/tsconfig#plugins">#</a></td><td>可在编辑器内运行的语言服务插件列表</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="输出格式compileroptions"><a aria-hidden="true" tabindex="-1" href="#输出格式compileroptions"><span class="icon icon-link"></span></a>输出格式(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>noErrorTruncation</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noErrorTruncation">#</a></td><td>不要截断错误消息</td></tr><tr><td align="left"><code>preserveWatchOutput</code> <a href="https://www.typescriptlang.org/zh/tsconfig#preserveWatchOutput">#</a></td><td>保留监视输出</td></tr><tr><td align="left"><code>pretty</code> <a href="https://www.typescriptlang.org/zh/tsconfig#pretty">#</a></td><td>使用颜色和上下文对错误和消息进行样式化，默认情况下启用</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="javascript-支持compileroptions"><a aria-hidden="true" tabindex="-1" href="#javascript-支持compileroptions"><span class="icon icon-link"></span></a>JavaScript 支持(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>allowJs</code> <a href="https://www.typescriptlang.org/zh/tsconfig#allowJs">#</a></td><td>允许 JavaScript 文件在你的工程中被引入，而不是仅仅允许 .ts 和 .tsx 文件</td></tr><tr><td align="left"><code>checkJs</code> <a href="https://www.typescriptlang.org/zh/tsconfig#checkJs">#</a></td><td>与 allowJs 配合使用，当 checkJs 被启用时，JavaScript 文件中会报告错误</td></tr><tr><td align="left"><code>maxNodeModuleJsDepth</code> <a href="https://www.typescriptlang.org/zh/tsconfig#maxNodeModuleJsDepth">#</a></td><td>在 node_modules 下搜索和加载 JavaScript 文件的最大依赖深度</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="互操作约束compileroptions"><a aria-hidden="true" tabindex="-1" href="#互操作约束compileroptions"><span class="icon icon-link"></span></a>互操作约束(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>allowSyntheticDefaultImports</code> <a href="https://www.typescriptlang.org/zh/tsconfig#allowSyntheticDefaultImports">#</a></td><td>允许合成默认导入</td></tr><tr><td align="left"><code>esModuleInterop</code> <a href="https://www.typescriptlang.org/zh/tsconfig#esModuleInterop">#</a></td><td>ES 模块互操作</td></tr><tr><td align="left"><code>forceConsistentCasingInFileNames</code> <a href="https://www.typescriptlang.org/zh/tsconfig#forceConsistentCasingInFileNames">#</a></td><td>在文件名中强制使用一致的大小写</td></tr><tr><td align="left"><code>isolatedModules</code> <a href="https://www.typescriptlang.org/zh/tsconfig#isolatedModules">#</a></td><td>隔离模块</td></tr><tr><td align="left"><code>preserveSymlinks</code> <a href="https://www.typescriptlang.org/zh/tsconfig#preserveSymlinks">#</a></td><td>保留符号链接</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="编译器诊断compileroptions"><a aria-hidden="true" tabindex="-1" href="#编译器诊断compileroptions"><span class="icon icon-link"></span></a>编译器诊断(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>diagnostics</code> <a href="https://www.typescriptlang.org/zh/tsconfig#diagnostics">#</a></td><td>用于输出调试信息</td></tr><tr><td align="left"><code>explainFiles</code> <a href="https://www.typescriptlang.org/zh/tsconfig#explainFiles">#</a></td><td>打印 TypeScript 视为项目一部分的文件的名称以及它们是编译一部分的原因</td></tr><tr><td align="left"><code>extendedDiagnostics</code> <a href="https://www.typescriptlang.org/zh/tsconfig#extendedDiagnostics">#</a></td><td>您可以使用此标志来发现 TypeScript 在编译时将时间花在哪里</td></tr><tr><td align="left"><code>generateCpuProfile</code> <a href="https://www.typescriptlang.org/zh/tsconfig#generateCpuProfile">#</a></td><td>此选项使您有机会让 TypeScript 在编译器运行期间发出 v8 CPU 配置文件</td></tr><tr><td align="left"><code>listEmittedFiles</code> <a href="https://www.typescriptlang.org/zh/tsconfig#listEmittedFiles">#</a></td><td>将编译过程中生成的文件的名称打印到终端</td></tr><tr><td align="left"><code>listFiles</code> <a href="https://www.typescriptlang.org/zh/tsconfig#listFiles">#</a></td><td>打印编译部分文件的名称</td></tr><tr><td align="left"><code>traceResolution</code> <a href="https://www.typescriptlang.org/zh/tsconfig#traceResolution">#</a></td><td>当您尝试调试未包含模块的原因时</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="向后兼容性compileroptions"><a aria-hidden="true" tabindex="-1" href="#向后兼容性compileroptions"><span class="icon icon-link"></span></a>向后兼容性(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>charset</code> <a href="https://www.typescriptlang.org/zh/tsconfig#charset">#</a></td><td>在早期版本的 TypeScript 中，这控制了从磁盘读取文本文件时使用的编码</td></tr><tr><td align="left"><code>keyofStringsOnly</code> <a href="https://www.typescriptlang.org/zh/tsconfig#keyofStringsOnly">#</a></td><td>此标志将 <code>keyof</code> 类型运算符更改为返回 <code>string</code> 而不是 `string</td></tr><tr><td align="left"><code>noImplicitUseStrict</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noImplicitUseStrict">#</a></td><td>默认情况下，当向非 ES6 目标发出模块文件时，TypeScript 发出<code>"use strict"</code>；文件顶部的序言。此设置禁用序言</td></tr><tr><td align="left"><code>noStrictGenericChecks</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noStrictGenericChecks">#</a></td><td>TypeScript 在比较两个泛型函数时会统一类型参数</td></tr><tr><td align="left"><code>out</code> <a href="https://www.typescriptlang.org/zh/tsconfig#out">#</a></td><td>请改用 <code>outFile</code></td></tr><tr><td align="left"><code>suppressExcessPropertyErrors</code> <a href="https://www.typescriptlang.org/zh/tsconfig#suppressExcessPropertyErrors">#</a></td><td>抑制过多的属性错误</td></tr><tr><td align="left"><code>suppressImplicitAnyIndexErrors</code> <a href="https://www.typescriptlang.org/zh/tsconfig#suppressImplicitAnyIndexErrors">#</a></td><td>抑制隐式任何索引错误</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="语言与环境compileroptions"><a aria-hidden="true" tabindex="-1" href="#语言与环境compileroptions"><span class="icon icon-link"></span></a>语言与环境(compilerOptions)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>emitDecoratorMetadata</code> <a href="https://www.typescriptlang.org/zh/tsconfig#emitDecoratorMetadata">#</a></td><td>发射装饰器元数据</td></tr><tr><td align="left"><code>experimentalDecorators</code> <a href="https://www.typescriptlang.org/zh/tsconfig#experimentalDecorators">#</a></td><td>实验装饰器</td></tr><tr><td align="left"><code>jsx</code> <a href="https://www.typescriptlang.org/zh/tsconfig#jsx">#</a></td><td>控制 JSX 在 JavaScript 文件中的输出方式</td></tr><tr><td align="left"><code>jsxFactory</code> <a href="https://www.typescriptlang.org/zh/tsconfig#jsxFactory">#</a></td><td>使用经典 JSX 运行时编译 JSX 元素时更改在 .js 文件中调用的函数</td></tr><tr><td align="left"><code>jsxFragmentFactory</code> <a href="https://www.typescriptlang.org/zh/tsconfig#jsxFragmentFactory">#</a></td><td>指定在使用 jsxFactory 编译器选项指定 react JSX emit 时要使用的 JSX 片段工厂函数，例如 <code>Fragment</code></td></tr><tr><td align="left"><code>jsxImportSource</code> <a href="https://www.typescriptlang.org/zh/tsconfig#jsxImportSource">#</a></td><td>声明模块说明符用于在将 jsx 用作 TypeScript 4.1 中引入的“react-jsx”或“react-jsxdev”时导入 jsx 和 jsxs 工厂函数</td></tr><tr><td align="left"><code>lib</code> <a href="https://www.typescriptlang.org/zh/tsconfig#lib">#</a></td><td>TypeScript 包括一组默认的内建 JS 接口（例如 Math）的类型定义，以及在浏览器环境中存在的对象的类型定义（例如 document）</td></tr><tr><td align="left"><code>moduleDetection</code> <a href="https://www.typescriptlang.org/zh/tsconfig#moduleDetection">#</a></td><td>模块检测</td></tr><tr><td align="left"><code>noLib</code> <a href="https://www.typescriptlang.org/zh/tsconfig#noLib">#</a></td><td>禁用自动包含任何库文件</td></tr><tr><td align="left"><code>reactNamespace</code> <a href="https://www.typescriptlang.org/zh/tsconfig#reactNamespace">#</a></td><td>请改用 jsxFactory</td></tr><tr><td align="left"><code>target</code> <a href="https://www.typescriptlang.org/zh/tsconfig#target">#</a></td><td>现代浏览器支持全部 ES6 的功能，所以 ES6 是一个不错的选择</td></tr><tr><td align="left"><code>useDefineForClassFields</code> <a href="https://www.typescriptlang.org/zh/tsconfig#useDefineForClassFields">#</a></td><td>为类字段使用定义</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="项目compileroptions"><a aria-hidden="true" tabindex="-1" href="#项目compileroptions"><span class="icon icon-link"></span></a>项目(compilerOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>composite</code> <a href="https://www.typescriptlang.org/zh/tsconfig#composite">#</a></td><td>composite 选项会强制执行某些约束，使得构建工具（包括 在 --build 模式下的 TypeScript 本身）可以快速确定一个工程是否已经建立</td></tr><tr><td align="left"><code>disableReferencedProjectLoad</code> <a href="https://www.typescriptlang.org/zh/tsconfig#disableReferencedProjectLoad">#</a></td><td>禁用引用项目加载</td></tr><tr><td align="left"><code>disableSolutionSearching</code> <a href="https://www.typescriptlang.org/zh/tsconfig#disableSolutionSearching">#</a></td><td>禁用解决方案搜索</td></tr><tr><td align="left"><code>disableSourceOfProjectReferenceRedirect</code> <a href="https://www.typescriptlang.org/zh/tsconfig#disableSourceOfProjectReferenceRedirect">#</a></td><td>禁用源项目引用重定向</td></tr><tr><td align="left"><code>incremental</code> <a href="https://www.typescriptlang.org/zh/tsconfig#incremental">#</a></td><td>使 TypeScript 将上次编译的工程图信息保存到磁盘上的文件中</td></tr><tr><td align="left"><code>tsBuildInfoFile</code> <a href="https://www.typescriptlang.org/zh/tsconfig#tsBuildInfoFile">#</a></td><td>这个选项可以让您指定一个文件来存储增量编译信息，以作为复合工程的一部分，从而可以更快的构建更大的 TypeScript 代码库</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="监听选项watchoptions"><a aria-hidden="true" tabindex="-1" href="#监听选项watchoptions"><span class="icon icon-link"></span></a>监听选项(watchOptions)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>watchFile</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-watchFile">#</a></td><td>如何监视单个文件的策略</td></tr><tr><td align="left"><code>watchDirectory</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-watchDirectory">#</a></td><td>在缺乏递归文件监视功能的系统下监视整个目录树的策略</td></tr><tr><td align="left"><code>fallbackPolling</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-fallbackPolling">#</a></td><td>使用文件系统事件时，此选项指定当系统用完本机文件观察器和/或不支持本机文件观察器时使用的轮询策略</td></tr><tr><td align="left"><code>synchronousWatchDirectory</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-synchronousWatchDirectory">#</a></td><td>在本机不支持递归监视的平台上同步调用回调并更新目录监视程序的状态</td></tr><tr><td align="left"><code>excludeDirectories</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-excludeDirectories">#</a></td><td>您可以使用 excludeFiles 来大幅减少在 --watch 期间监视的文件数量</td></tr><tr><td align="left"><code>excludeFiles</code> <a href="https://www.typescriptlang.org/zh/tsconfig#watch-excludeFiles">#</a></td><td>您可以使用 excludeFiles 从监视的文件中删除一组特定文件</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"watchOptions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"synchronousWatchDirectory"</span><span class="token operator">:</span> <span class="token boolean">true</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"><div class="wrap-header h3wrap"><h3 id="类型采集typeacquisition"><a aria-hidden="true" tabindex="-1" href="#类型采集typeacquisition"><span class="icon icon-link"></span></a>类型采集(typeAcquisition)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>enable</code> <a href="https://www.typescriptlang.org/zh/tsconfig#type-enable">#</a></td><td>提供用于在 JavaScript 项目中禁用类型获取的配置</td></tr><tr><td align="left"><code>include</code> <a href="https://www.typescriptlang.org/zh/tsconfig#type-include">#</a></td><td>如果您有一个 JavaScript 项目，其中 TypeScript 需要额外的指导来理解全局依赖关系，或者已通过 disableFilenameBasedTypeAcquisition 禁用了内置推理</td></tr><tr><td align="left"><code>exclude</code> <a href="https://www.typescriptlang.org/zh/tsconfig#type-exclude">#</a></td><td>提供用于禁用 JavaScript 项目中特定模块的类型获取的配置</td></tr><tr><td align="left"><code>disableFilenameBasedTypeAcquisition</code> <a href="https://www.typescriptlang.org/zh/tsconfig#type-disableFilenameBasedTypeAcquisition">#</a></td><td>TypeScript 的类型获取可以根据项目中的文件名推断出应该添加哪些类型</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
<hr>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"typeAcquisition"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"enable"</span><span class="token operator">:</span> <span class="token boolean">false</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></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><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|