TypeScript 类型系统 2 0 2 1 年 1 月 2 1 日 分 享 人 陈 文 岗 ： 学 校 中国科学院大学 ： 关于TypeScript 2 TypeScript是微软推出的JavaScript静态类型版本，它是 JavaScript的超集，可以编译为纯粹的JavaScript TypeScript 到 JavaScript 3 add.ts add.js add 6 TypeScript 高级类型 7 TypeScript 高级类型 8 TypeScript 特殊类型 9 TypeScript 结构类型系统 10 标明类型系统 即使两个类的结构完全一致，也不能互相赋值 结构类型系统 类型形状一致即可互相赋值 TypeScript 类型声明空间 11 类型声明空间里包含用来当做类型注解的内容 类型不能赋给一个变量，也不能作为值进行传递（class除外）

和 Generators 模块 命名空间 命名空间和模块 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json TypeScript 3.6 TypeScript 3.5 TypeScript 3.4 TypeScript 3.3 TypeScript 3.2 TypeScript 3.1 - 3 - 本文档使用 书栈网 · BookStack.CN 构建 TypeScript 3.0 TypeScript 2.9 TypeScript 2.8 TypeScript 2.7 TypeScript - 4 - 本文档使用 书栈网 · BookStack.CN 构建 TypeScript 1.4 - 5 - 本文档使用 书栈网 · BookStack.CN 构建 致谢 当前文档 《TypeScript 4.0 使用手册》 由 进击的皇虫 使用 书栈网(BookStack.CN) 进 行构建，生成于 2020-09-09。 书栈网仅提供文档编写、整理、归类等功能，以及对文档内容的生成和导出工具。

那么TypeScript究竟为何物？又有什么 魅力呢？ TypeScript是Microsoft公司注册商标。 TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript 代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。 TypeScript目前还在积极的开发完善之中，不断地会有新的特性加入进来。 因此本 手册也会紧随官方的每个 Handbook（中文版） 8 快速上手 让我们使用TypeScript来创建一个简单的Web应用。 安装TypeScript 有两种主要的方式来获取TypeScript工具： 通过npm（Node.js包管理器） 安装Visual Studio的TypeScript插件 Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你 DestinationFolder="$(MSBuildProjectDirectory)\Scripts" 现在，在工程上右击选择重新加载项目。 此时应当能在解决方案资源管理器 （Solution Explorer）中看到 node_modules 。 用 TypeScript 写一个简单的 Angular 应用 首先，将 app.ts 改成： import

从巧夺天工的匠人技艺、 到解放生产力的工业产品、再到宇宙运行的科学规律，几乎每一件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 感谢校铨在知识产权方面提供的专业帮助，这对本开源书的完善起到了重要作用； ‧ 感谢苏潼为本书设计了精美的封面和 logo ，并在我的强迫症的驱使下多次耐心修改； ‧ 感谢 @squidfunk 提供的排版建议，以及他开发的开源文档主题 Material‑for‑MkDocs 。 在写作过程中，我阅读了许多关于数据结构与算法的教材和文章。这些作品为本书提供了优秀的范本，确保 了本书内容的准确性与品质。在此感谢所有老师和前辈的杰出贡献！ 高效地展开阶段二和阶段三的学习。 第 0 章 前言 hello‑algo.com 9 图 0‑8 算法学习路线 0.3 小结 ‧ 本书的主要受众是算法初学者。如果你已有一定基础，本书能帮助你系统回顾算法知识，书中源代码也 可作为“刷题工具库”使用。 ‧ 书中内容主要包括复杂度分析、数据结构和算法三部分，涵盖了该领域的大部分主题。 ‧ 对于算法新手，在初学阶段阅读一本入门书至关重要，可以少走许多弯路。

“Hello World!”的 美好回忆。 ‧ 感谢苏潼为本书设计了精美的封面和 LOGO，并在我的强迫症下多次耐心修改。 ‧ 感谢 @squidfunk 提供的写作排版建议，以及他开发的开源文档主题 Material‑for‑MkDocs 。 在写作过程中，我阅读了许多关于数据结构与算法的教材和文章。这些作品为本书提供了优秀的范本，确保 了本书内容的准确性与品质。在此感谢所有老师和前辈们的杰出贡献！ 更高效地展开第二和第三阶段的学习。 第 0 章 前言 hello‑algo.com 8 图 0‑7 算法学习路线 0.3 小结 ‧ 本书的主要受众是算法初学者。如果已有一定基础，本书能帮助您系统回顾算法知识，书内源代码也可 作为“刷题工具库”使用。 ‧ 书中内容主要包括复杂度分析、数据结构、算法三部分，涵盖了该领域的大部分主题。 ‧ 对于算法新手，在初学阶段阅读一本入门书籍至关重要，可以少走许多弯路。 ，每轮执行求和操作，即可求得 ?(?) 。 ‧ 递归：将问题分解为子问题 ?(?) = ?+?(?−1) ，不断（递归地）分解下去，直至基本情况 ?(0) = 0 时终止。 1. 调用栈 递归函数每次调用自身时，系统都会为新开启的函数分配内存，以存储局部变量、调用地址和其他信息等。 这将导致两方面的结果。 ‧ 函数的上下文数据都存储在称为“栈帧空间”的内存区域中，直至函数返回后才会被释放。因此，递归 通常比迭代更加耗费内存空间。

从巧夺天工的匠人技艺、 到解放生产力的工业产品、再到宇宙运行的科学规律，几乎每一件平凡或令人惊叹的事物背后，都隐藏着精 妙的算法思想。 同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小 到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下； 羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。 感谢校铨在知识产权方面提供的专业帮助，这对本开源书的完善起到了重要作用； ‧ 感谢苏潼为本书设计了精美的封面和 logo ，并在我的强迫症的驱使下多次耐心修改； ‧ 感谢 @squidfunk 提供的排版建议，以及他开发的开源文档主题 Material‑for‑MkDocs 。 在写作过程中，我阅读了许多关于数据结构与算法的教材和文章。这些作品为本书提供了优秀的范本，确保 了本书内容的准确性与品质。在此感谢所有老师和前辈的杰出贡献！ 开阶段二和阶段三的学习。 第 0 章 前言 www.hello‑algo.com 9 图 0‑8 算法学习路线 0.3 小结 ‧ 本书的主要受众是算法初学者。如果你已有一定基础，本书能帮助你系统回顾算法知识，书中源代码也 可作为“刷题工具库”使用。 ‧ 书中内容主要包括复杂度分析、数据结构和算法三部分，涵盖了该领域的大部分主题。 ‧ 对于算法新手，在初学阶段阅读一本入门书至关重要，可以少走许多弯路。

学习与进步！ Figure 0‑7. 评论区示例 0. 写在前面 hello‑algo.com 7 0.3. 小结 ‧ 本书主要面向算法初学者。对于已经有一定积累的同学，这本书可以帮助你系统回顾算法知识，源代码 可被当作“刷题工具库”来使用。 ‧ 书中内容主要分为复杂度分析、数据结构、算法三部分，覆盖了该领域的大部分主题。 ‧ 对于算法小白，在初学阶段阅读一本入门书是非常有必要的，可以少走许多弯路。 2.2.1. 统计算法运行时间 运行时间能够直观且准确地体现出算法的效率水平。如果我们想要 准确预估一段代码的运行时间，该如何做 呢？ 1. 首先需要 确定运行平台，包括硬件配置、编程语言、系统环境等，这些都会影响到代码的运行效率。 2. 评估 各种计算操作的所需运行时间，例如加法操作 + 需要 1 ns ，乘法操作 * 需要 10 ns ，打印操作需要 5 ns 等。 3. 根据代码 通常情况下，空间复杂度统计范围是「暂存空间」+「输出空间」。 暂存空间可分为三个部分： ‧「暂存数据」用于保存算法运行中的各种 常量、变量、对象 等。 ‧「栈帧空间」用于保存调用函数的上下文数据。系统每次调用函数都会在栈的顶部创建一个栈帧，函数返 回时，栈帧空间会被释放。 ‧「指令空间」用于保存编译后的程序指令，在实际统计中一般忽略不计。 Figure 2‑9. 算法使用的相关空间 /*

●纯语法糖，动态类型 ●上手简单 ●工具不良 ●与新标准有冲突 BuckleScript ●脱胎于OCaml ●类型系统强大 ●编译高度优化 ●语义语法疏远，上手难* Flow Type ●JS+类型标注 ●工具相对完善 ●上手容易 ●与TS设计相似* 比较 类型系统 难度 工具链 CoffeeScript 动态 低 差 BuckleScript 很强 高 较好 FlowType 强 snd[id] return ret } // no annotation! merge({name: 'moe'}, {age: 50}) TS 1.8 ●字面量类型 ●JS特有类型系统的第一步 $element.animate({ x: 114, y: 514, // ease-in, ease-out ease: 'ease-in' }) interface compile error lenNullable([1, 2, 3]) // ok lenNullable(null) // ok TS 2.1+ ●Lookup Type ●JS特有类型系统的集大成作 // We can query property name of a Type interface Person { name: string age: number

TS TS 编译成 JS 时，不会考 类型。 这意味着，程序中的类型对程序生成的输出没有任何影响，类型只在类型检查这一步使用。 类型系统 ● 一般的有两种类型系统 1. 通过显示句法告诉编译器所有值的类型（注解） 2. 自动推导类型 ● TS 身兼两种类型系统 // 建议 原文链接：Programming TypeScript 一般来说，最好让TS 推导类型，少数情况下才显式注解类型。（Why