H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

本文地址:H5W3 » 【前端技术】TypeScript到底有什么好

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址