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最强大的应用场景：代码分支合并冲突解决、项目重构的安全保障。

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