TypeScript用起来真香

TypeScript的主要特性

1. 超集 ：TypeScript 是 JavaScript 的一个超集。

2. 类型系统 ：正如其名，TypeScript在JavaScript的基础上，包装了类型机制，使其变身为 静态类型 语言。

3. 编辑器功能 ：增强了编辑器和IDE功能，包括代码补全、接口提示、跳转到定义、重构等。

4. 错误提示 ：可以在编译阶段就发现大部分错误，帮助调试程序。

JavaScript的特点

1. JavaScript 是一种轻量级的解释性脚本语言。

2. JavaScript 是弱类型、动态类型语言，允许隐式转换，只有运行时才能确定变量的类型。

超集

也就是说，你不是“不用JavaScript开发而改用TypeScript”了，本质上开发语言还是JavaScript，只是TypeScript在JavaScript的基础上扩展了新的特性，JavaScript该有的，TypeScript都有。

为什么TypeScript的静态类型能增强代码的可读性和可维护性

TypeScript通过类型注解提供编译时的静态类型检查。

编程语言可简单地看作对一系列变量的处理，变量从某个维度上讲是建立在类型系统上的，就像客观世界万物也是由各种类型组成。

首先是基础的类型，代表计量的数字类型，代表身份的字符串类型，代表逻辑是否的布尔类型，代表集合的对象（含数组），代表存在性的'空'。

然后是各种自定义的类型，某样生活用品、某种职业，即面向对象编程里的对象、类、接口的概念。

这也符和人对事物的普遍认知，从一个类型，就能大致知道它是什么、怎么能得到它、它能做什么，减少查阅、理解、校验的过程，最好的情况是无需将关注点转移……

最强大的地方还不在于基础类型的注解，而在于自定义类型（接口或类）、内置对象（HTMLElement，Event等）的提示。

以confirmAddFruits这个组件中方法和fruits.service这个服务层的函数为例。

1. 它是什么

以入参fruit为例：

• JavaScript

1. 去fruits.service.js看看，它是http请求传给后端的参数，是个对象。

2. 到接口文档看看。

• TypeScript

1. 是个Fruit类型的对象。

2. 操作编辑器能直接显示fruit含有id, name, isFresh属性，每个属性是什么类型。

2. 怎么能得到它：

以组件成员变量fruits为例：

• JavaScript

去data处看看，初始值是null（因为某些需要，初始值不能是[]），最多从命名推测应该是个数组，但数组是怎么构成的，还得回想或查一下model层、view层的设计。

• TypeScript

操作编辑器能直接显示fruits的类型是Fruit[]，即Fruit类型的单项构成的数组，于是操作数组合并。

3. 它能做什么

this.fruitService.addFruit 是调用服务层的方法，它返回什么？

• JavaScript

去查接口文档

• TypeScript

返回 Observable<Fruit> ，订阅之，得到的数据是Fruit类型：一个水果。

// confirmAddFruits.js
export default {
  data() {
    return {
      fruits: null,
      isShowModal: false;
    }
  }
  
  confirmAddFruit(fruit) {
    this.fruitService.addFruit(fruit).then(fruit => {
      this.fruits = [fruit, ...this.fruits];
      this.isShowModal = false;
    });
  }
}复制代码

// confirmAddFruit.ts
interface Fruit {
  id: number;
  name: string;
  isFresh: boolean
}

export class FruitsComponent {
  fruits: Fruit[] = [];
  isShowModal = false;
  
  confirmAddFruit(fruit: Fruit): void {
    this.fruitService.addFruit(fruit as Fruit).subscribe((fruit: Fruit) => {
      this.fruits = [fruit, ...this.fruits];
      this.isShowModal = false;
    });
  }
}复制代码

// fruits.service.js  
function addFruit(fruit) {
   // ...
}复制代码

// fruits.service.ts  
function addFruit(fruit: Fruit): Observable<Fruit> {
  // ...
}复制代码

可读性和可维护性

JavaScript所能做的

1. 依靠编码规范，命名、注释（特别是类型的注释）。

2. 对自己编写代码和维护他人代码的熟悉度。

3. 编辑器的搜索、替换、重构等功能，代码提示、补全。（搜索替换易出错）

4. 自动测试、手动测试。

5. 运行错误的提示。

TypeScript所能做的

函数参数的传递是是最容易出错出bug的地方之一，有了类型注解，就能一目了然得知道需要传递什么样的参数，防止遗漏、误删。

引用类型数据相较于基本数据类型，数据的维护难度更大，有了接口定义，就不再混乱。

此外，在编译阶段的类型检查和错误提示，可以取代很多单元测试所需要的工作。

增强的编辑器功能

TypeScript提供了静态的代码分析，在编译之前，可以过滤掉大部分错误，而JS是无法做到的。

错误提示

随便举几个例子：

1. 表单输入的数字，获取到的是字符串。

2. 函数参数（尤其是数量）的检查。无论是输入时，还是编译时的检查。

3. 最强大的不在于JS类型的提示，而在于自定义类型（接口或类）的提示。具体项的提示，编辑器中搞定，不用切换视口。

缺点

我几乎找不出TS有什么缺点。

唯一的就是：写类型定义会一定程度上降低开发效率，但是在大项目中可折衷进行，磨刀不误砍柴工。

最后的彩蛋

TypeScript最强大的应用场景：代码分支合并冲突解决、项目重构的安全保障。

类型系统符合人对事物的普遍认知，提供了强力的安全保障机制，智能提示大大提高代码编写效率！