1995 年，34 岁的程序员 Brendan Eich 被告知，为配合公司浏览器的宣发，务必 10 日内弄一个编程语言出来。这门语言需要在浏览器运行、长得像 Java、足够简单。

Brendan 废寝忘食，在 deadline 前圆满完成领导交代的任务。他没想到，匆忙攒出来的 JavaScript，后来能存活这么久，而且还能用于开发大型项目。早知道这样，他或许会多争取一些开发时间。

后来，微软转型为云平台服务商，计划将 Office 套件的三大核心应用移植到浏览器环境中。在迁移过程中，他们发现，尽管 JavaScript 作为浏览器的唯一编程语言，但在开发大型软件时却显得颇为困难。因此，微软发明了 TypeScript。TypeScript 引入了一套类型系统，显著提升了 JavaScript 应用的健壮性。

为什么类型系统这么重要？类型系统就像书面合同一样，白纸黑字写清楚每个变量的期望类型。如果你传递的类型不对，编写代码时就能拿到报错信息。

没有类型约束的 JS，编写代码时不报错，但是可能会在上线运行几天后，因为类型错误而报错。

下面从最简单的类型标注开始，认识 TypeScript 语言。

一、原始类型

TypeScript 的类型标注使用冒号后缀语法。

需要注意的是，原始类型 string, number 和 boolean 的标注都是首字母小写。

ES2015 新增一个 Symbol 原始类型，表示全局唯一的键。

ES2020 引入了新的原始类型 BigInt，用于表示很大的整数。

二、数组

数组类型的标注有两种风格，一种是“类型[]”，一种是“Array<类型>”。第二种是泛型（generics）语法，表示“类型的类型”。

三、特殊类型 any

TypeScript 内置一个特殊类型 any。使用 any 类型时，会关闭编译器的报错机制。此时，这种变量看似“无所不能”，其实是一种“掩耳盗铃”似的自欺欺人，类型错误依然存在，只是不报出来而已。因此，最好不要使用 any，如果非用不可，越少越好。

四、函数

在函数定义中，形参和返回值的类型标注和变量类似，都是后缀语法。

当 TypeScript 可以推导出类型时，可以省略类型标注。

对于匿名函数，当 TypeScript 可以根据上下文推断类型时，也可以省略形参和返回值的类型标注。

这种根据上下文推导类型的过程称作上下文类型（contextual typing）。通过它可以大大减少代码的编写。

五、对象类型

声明对象类型时，把它的所有键名及其对应的类型写在花括号内。

如果某个属性是可选的，在属性名后增加问号 ?。使用可选属性前，一定要进行判空处理。

如果不进行判空处理，强行使用可选属性，TypeScript 会报错。

六、联合类型

TypeScript 的类型系统非常灵活，它提供了一些类型操作符，允许你通过组合现有类型，创建新的类型。

联合类型（Union Types）就是这么一种组合类型，它由多个子类型组成，可以接收匹配任意子类型的变量。联合类型使用竖线分割符 | 定义。

使用联合类型的变量时要注意区分类型。可以使用 typeof 或 Array.isArray 等方法用于细分类型。

七、类型别名

类型别名使用 type 关键字，为已存在的类型赋予新的名字，方便反复调用。

类型别名非常灵活，不仅可以用于对象类型，也可以用于基本类型、联合类型等其他任意类型。

通过相交运算符 & 创建新的别名。

八、接口定义

接口是另一种创建类型的方法，但它只能创建对象类型。

可以通过 extends 关键字派生新的接口。

类型别名和接口有相似的地方，也有一些不同。最大的区别是，接口可以通过反复定义添加字段，别名不可以。

什么时候使用别名？什么时候使用接口？TypeScript 官方的建议是：优先使用接口，直到接口无法满足需求时，才使用类型别名。

九、类型断言

类型断言（type assertion）用于强制类型转换，使用关键字 as 或尖括号语法实现。

使用类型断言时要注意，可以在父子类型之间转换类型，但是请不要在不相关的类型之间强制转换，TypeScript 会报错的。

十、字面量类型

对于字符串或数字常量，是一种特殊的字面量类型。通常使用它们定义联合类型，可以当作智能提示的可选项，提高开发体验。

参考资料

1. My dotJS 2017 Keynote，https://brendaneich.com/2017/12/my-dotjs-2017-keynote/，by Brendan Eich，2017-12-02
2. Brendan Eich on Creating JavaScript in 10 Days, and What He'd Do Differently Today，https://thenewstack.io/brendan-eich-on-creating-javascript-in-10-days-and-what-hed-do-differently-today/，by David Cassel，2018-08-26
3. TypeScript 官网，https://www.typescriptlang.org/
4. ECMAScript 4: The missing version，https://evertpot.com/ecmascript-4-the-missing-version/， by Evert Pot，2020-05-28
5. The Real Story Behind ECMAScript 4，https://auth0.com/blog/the-real-story-behind-es4/，by Sebastian Peyrott，2017-03-01
6. The Basics，https://www.typescriptlang.org/docs/handbook/2/basic-types.html
7. Everyday Types，https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

完