前言

该系列内容是在阅读理解《TypeScript 入门教程》的同时，自己的一些读书笔记，如有侵权联系移除。

文中[Ts => TypeScript] | [Js=> JavaScript]，无特殊说明不在重复解释。

官方定义

Typed JavaScript at Any Scale. 添加了类型系统的 JavaScript，适用于任何规模的项目。

TypeScript 的特性

js本身是一门灵活的语言(变量初始化和赋值的类型不同/隐式转换/原型属性方法可修改/函数是一等公民)，而ts的类型系统，在很大程度上弥补这些问题。

类型系统

类型系统按照[类型检查的时机]来分类，可以分为动态类型和静态类型。
动态类型顾名思义就是在运行时才会进行类型检查，所以我们无法在编译阶段获得较为完整的效验类型反馈，且类型错误也会导致运行时出现错误。
静态类型是指在编译阶段就能确定每个变量的类型，这种类型错误会导致语法错误。从而在编译阶段即可获得较为完整的反馈。
Js本身是一门解释性语言，没有编译阶段，即是动态类型。

  1. // !运行时会报错（foo.split 不是一个函数），造成线上 bug
  2. let foo = 1;
  3. foo.split(' ');
  4. # Uncaught TypeError: foo.split is not a function

Ts本身不能直接在浏览器使用，需要在运行前编译为Js，编译阶段进行类型检查，即Ts是静态类型。

  1. // !编译时会报错（数字没有 split 方法），无法通过编译
  2. let foo = 1;
  3. foo.split(' ');
  4. # 类型“number”上不存在属性“split”

注：ts在没有手动声明变量类型的情况下，会自动推论

TypeScript 是弱类型

类型系统按照[是否允许隐式类型转换]来分类，可以分为强类型和弱类型。Ts本身是完全兼容Js的，不会修改Js的特性，即Js 和 Ts都是弱类型：

  1. console.log(1 + '1');
  2. // 打印出字符串 '11'

作为对比Python是强类型：(本系列只对Ts进行学习，Py相关选择性忽略)

  1. print(1 + '1')
  2. # TypeError: unsupported operand type(s) for +: 'int' and 'str'

虽然 TypeScript 不限制加号两侧的类型，但是我们可以借助 TypeScript 提供的类型系统，以及 ESLint 提供的代码检查功能，来限制加号两侧必须同为数字或同为字符串。这在一定程度上使得 TypeScript 向「强类型」更近一步了——当然，这种限制是可选的。

这样的类型系统体现了Ts的核心设计理念：在完整保留了Js运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的Bug。

适用项目规模

Ts适用任何大型项目，可为大型项目带来更高的可维护性，以及更少的Bug(编译阶段给大部分的编译问题解决掉，线上出现的基本都是逻辑错误，及边界错误)。
中小型项目反倒很少看到Ts的主要原因在于：对于Ts的额外代码量\以及项目周期的长短\项目人员较少。引入原文的话：

在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论][]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个[编译选项][]，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。

Js和Ts可共存，在老的Js使用Ts是痛苦的，但不代表它是完全不可行的。可以在编写新文件的时候使用Ts，后续不断迁移旧文件，和React中Class改为Hooks大致一样。
Vscode编辑器在编写Js的过程中，代码补全及接口提示等功能就是通过TypeScript Language Service实现的。
image.png
一些库和组件也支持Ts。
image.png
有些库不支持Ts，但Ts基本会提示安装对应的类型声明库。

  1. yarn add @types/react

与标准同步发展

Ts另外一个特性就是和ECMAScript标准同步发展。

ECMAScript 是 JavaScript 核心语法的标准，自 2015 年起，每年都会发布一个新版本，包含一些新的语法。 一个新的语法从提案到变成正式标准，需要经历以下几个阶段： Stage 0：展示阶段，仅仅是提出了讨论、想法，尚未正式提案。 Stage 1：征求意见阶段，提供抽象的 API 描述，讨论可行性，关键算法等。 Stage 2：草案阶段，使用正式的规范语言精确描述其语法和语义。 Stage 3：候选人阶段，语法的设计工作已完成，需要浏览器、Node.js 等环境支持，搜集用户的反馈。 Stage 4：定案阶段，已准备好将其添加到正式的 ECMAScript 标准中。

一个语法进入到Stage 3阶段后，Ts就会实现它。
当然除了ECMAScript标准之外，Ts团队也推进了诸多语法提案，比如可选链操作符[?.] (记得是在ES2020中，可以自行去了解)等。

总结

什么是Ts？

  • 添加了类型系统的Js
  • 适用于任何规模的项目
  • 静态类型、弱类型的语言
  • 完全兼容Js，且不会影响Js特性
  • 本身不能在浏览器、Node.js等环境中运行，需要先编译为Js
  • 编译严格程度自己(团队)做主
  • 和Js共存
  • 增强了编辑器(IDE)的功能
  • 社区活跃，常用的库和插件基本都支持
  • 发展同步ECMAScript标准

    附：TypeScript 的发展历史

    2012-10：微软发布了 TypeScript 第一个版本（0.8），此前已经在微软内部开发了两年。 2014-04：TypeScript 发布了 1.0 版本。 2014-10：Angular 发布了 2.0 版本，它是一个基于 TypeScript 开发的前端框架。 2015-01：ts-loader 发布，webpack 可以编译 TypeScript 文件了。 2015-04：微软发布了 Visual Studio Code，它内置了对 TypeScript 语言的支持，它自身也是用 TypeScript 开发的。 2016-05：@types/react发布，TypeScript 可以开发 React 应用了。 2016-05：@types/node发布，TypeScript 可以开发 Node.js 应用了。 2016-09：TypeScript 发布了 2.0 版本。 2018-06：TypeScript 发布了 3.0 版本。 2019-02：TypeScript 宣布由官方团队来维护 typescript-eslint，以支持在 TypeScript 文件中运行 ESLint 检查。 2020-05：Deno 发布了 1.0 版本，它是一个 JavaScript 和 TypeScript 运行时。 2020-08：TypeScript 发布了 4.0 版本。 2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript。