TypeScript 学习笔记(一)：初识TS

前言

TypeScript是微软公司开发的一种基于 JavaScript的编程语言。它的目的并不是创造一种全新语言，而是增强 JavaScript 的功能，使其更适合多人合作的企业级项目。

TypeScript可以看成是JavaScript的超集，即它继承了后者的全部语法，所有JavaScript脚本都可以当作TypeScript脚本，此外它再增加了一些自己的语法。TypeScript对JavaScript添加的最主要部分，就是类型系统。

类型是什么

类型（type）指的是一组具有相同特征的值。如果两个值具有某种共同的特征，就可以说，它们属于同一种类型。

一旦确定某个值的类型，就意味着，这个值具有该类型的所有特征，可以进行该类型的所有运算。凡是适用该类型的地方，都可以使用这个值，凡是不适用该类型的地方，使用这个值都会报错。可以这样理解，类型是人为添加的一种约束。 主要目的是在软件开发过程中，帮助提高代码质量，减少错误。

下面是一段简单的 TypeScript 代码，演示一下类型的作用。

function add(n:number) {
  return n + 1;
}

上面示例中，函数add()有一个参数n，类型为数值（number），表示这个位置只能使用数值，传入其他类型的值就会报错。

add('hello') // 报错

上面示例中，函数add()传入了一个字符串hello，TypeScript 发现类型不对，就报错了，指出这个位置只能传入数值，不能传入字符串。

JavaScript 语言就没有这个功能，不会检查类型对不对。开发阶段很可能发现不了这个问题，代码也许就会原样发布，导致用户在使用时遇到错误。作为比较，TypeScript 是在开发阶段报错，这样有利于提早发现错误，避免使用时报错。另一方面，函数定义里面加入类型，具有提示作用，可以告诉开发者这个函数怎么用。

动态类型与静态类型

TypeScript 的主要功能是为 JavaScript 添加类型系统。JavaScript本身就有一套类型系统，比如123和Hello。但是，JavaScript 的类型系统非常弱，而且没有使用限制，运算符可以接受各种类型的值。 在语法上，JavaScript 属于动态类型语言。

下面举个例子：

let x = 1;
x = 'hello';

上面的例子中，变量x声明时，值的类型是数值，但是后面可以改成字符串。所以，无法提前知道变量的类型是什么，也就是说，变量的类型是动态的。 正是因为存在这些动态变化，所以 JavaScript 的类型系统是动态的，不具有很强的约束性。这对于提前发现代码错误，非常不利。

TypeScript 引入了一个更强大、更严格的类型系统，属于静态类型语言。

上面的代码在 TypeScript 里面都会报错。

let x = 1;
x = 'hello'; // 报错

上面示例中，报错是因为变量赋值时，TypeScript 已经推断确定了类型，后面就不允许再赋值为其他类型的值，即变量的类型是静态的。TypeScript 的作用，就是为 JavaScript 引入这种静态类型特征。

静态类型的优缺点

静态类型的优点

静态类型有很多好处。

（1）有利于代码的静态分析。

有了静态类型，不必运行代码，就可以确定变量的类型，从而推断代码有没有错误。 这对于大型项目非常重要，单单在开发阶段运行静态检查，就可以发现很多问题，避免交付有问题的代码，大大降低了线上风险。

（2）有利于发现错误。

由于每个值、每个变量、每个运算符都有严格的类型约束，TypeScript就能轻松发现拼写错误、语义错误和方法调用错误，节省时间。

（3）更好的 IDE 支持，做到语法提示和自动补全。

IDE（集成开发环境，比如 VSCode）一般都会利用类型信息，提供语法提示功能（编辑器自动提示函数用法、参数等）和自动补全功能（只键入一部分的变量名或函数名，编辑器补全后面的部分）。

（4）提供了代码文档。

类型信息可以部分替代代码文档，解释应该如何使用这些代码，熟练的开发者往往只看类型，就能大致推断代码的作用。借助类型信息，很多工具能够直接生成文档。

（5）有助于代码重构。

修改他人的 JavaScript 代码，往往非常痛苦，项目越大越痛苦，因为不确定修改后是否会影响到其他部分的代码。 类型信息大大减轻了重构的成本。一般来说，只要函数或对象的参数和返回值保持类型不变，就能基本确定，重构后的代码也能正常运行。如果还有配套的单元测试，就完全可以放心重构。越是大型的、多人合作的项目，类型信息能够提供的帮助越大。

静态类型的缺点

静态类型也存在一些缺点。

（1）丧失了动态类型的代码灵活性。

动态类型有非常高的灵活性，给予程序员很大的自由，静态类型将这些灵活性都剥夺了。

（2）增加了编程工作量。

有了类型之后，程序员不仅需要编写功能，还需要编写类型声明，确保类型正确。这增加了不少工作量，有时会显著拖长项目的开发时间。

（3）更高的学习成本。

类型系统通常比较复杂，要学习的东西更多，要求开发者付出更高的学习成本。

（4）引入了独立的编译步骤。

原生的 JavaScript 代码，可以直接在 JavaScript 引擎运行。添加类型系统以后，就多出了一个单独的编译步骤，检查类型是否正确，并将 TypeScript 代码转成 JavaScript 代码，这样才能运行。

总的来说，这些缺点使得 TypeScript 不一定适合那些小型的、短期的个人项目。

类型声明和推断

类型声明

TypeScript代码最明显的特征，就是为JavaScript变量加上了类型声明。

let foo:string;

在上面示例中，变量foo的后面使用冒号，声明了它的类型为string。

变量的值应该与声明的类型一致，如果不一致，TypeScript 就会报错。

// 报错
let foo:string = 123;

上面示例中，变量foo的类型是字符串，但是赋值为数值123，TypeScript 就报错了。

另外，TypeScript 规定，变量只有赋值后才能使用，否则就会报错。

let x:number;
console.log(x) // 报错

上面示例中，变量x没有赋值就被读取，导致报错。而JavaScript允许这种行为，不会报错，没有赋值的变量会返回undefined。

类型推断

类型声明并不是必需的，如果没有，TypeScript 会自己推断类型。

let foo = 123;

上面示例中，变量foo并没有类型声明，TypeScript 就会推断它的类型。由于它被赋值为一个数值，因此 TypeScript 推断它的类型为number。 后面，如果变量foo更改为其他类型的值，跟推断的类型不一致，TypeScript 就会报错。