TypeScript真香体验

修行全栈
260 阅读6分钟

TypeScript

导引

  • TS是什么 官方文档
  • 为什么要用TS
  • TS能干点什么
  • 使用TS的成本

TS是什么

typeScript = Type + Script（标准JS）。我们从TS的官方网站上就能看到定义：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript。TypeScript是一个编译到纯JS的有类型定义的JS超集。

为什么使用 Typescript

背景：生命周期较长（常常持续几年）的复杂SPA应用，保障开发效率的同时提升代码的可维护性和线上运行时质量。

  • 增加代码的可读性和可维护性
  • 减少运行时错误，代码更加安全，减少隐藏 BUG
  • 享受到代码提示带来的好处
  • 重构神器

TS能干点什么

静态检查

这类问题是ESLint等工具检测不出来的。

低级错误

const animal = [{
  name: 'tiger',
  age: 2
}, {
  name: 'bird',
  age: 3
}];
const sortedAnimal = animal.sort((a, b) => a.name.localCompare(b.name));

执行TS编译命令tsc，检测到错误：

 error TS2339: Property 'localCompare' does not exist on type 'string'.

如果是在支持TS的IDE中（VS Code、WebStorm等），则不需等到编译，在IDE中就可以非常明显在localCompare位置提示出错误信息。

localCompare这种输入手误（或者手滑不小心删除或添加了字符）时有发生，如果没有编译器静态检查，那有可能就是一个字符引发的血案：埋下了一个隐藏的运行时bug。如果在SPA应用中，这个问题需要较长的操作路径才能被发现，一旦用户触发这个地雷，那它就会爆炸：应用直接crash（在没有页面刷新的SPA中问题尤为凸显）。

非空判断（很多时候后端数据是不可靠的）

let data = {
  list: null,
  success: true
};
const value = data.list.length;

执行tsc编译：

error TS2532: Object is possibly 'null'.

data.list.length这行直接引用了data.list的属性，但data.list的数据格式有不是数组的可能性，这种场景在前端处理后端接口返回时经常出现，接口返回的数据层级可能非常深，如果在某一级缺少了非空判断逻辑，那就意味着埋下了一个不知道什么时候就会引爆的炸弹。

类型推断

const arr = [];
arr.toUpperCase();
​
class Cat {
  miao() {}
}
​
class Dog {
  wang() {}
}
const cat = new Cat();
cat.wang();

执行tsc编译：

error TS2339: Property 'toUpperCase' does not exist on type 'any[]'. error TS2339: Property 'wang' does not exist on type 'Cat'.

TS有类型推断，给不同类型的执行对象调用错误的方法都将被检查出来。

面向对象编程增强

访问权限控制

class Person {
  protected name: string;
  public age: number;
  constructor(name: string) { this.name = name; }
}
​
class Employee extends Person {
  static someAttr = 1;
  private department: string;
​
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.name);

执行tsc编译：

error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.

Person中name属性是protected类型，只能在自己类中或者子类中使用。访问权限控制在面向对象编程中很有用，他能帮忙我们做到信息隐藏，JS面向对象编程的一个大问题就是没有提供原生支持信息隐藏的方案（很多时候都是通过约定编码方式来做）。信息隐藏有助于更好的管理系统的复杂度，这在软件工程中显得尤为重要。

接口

interface Machine {
  move(): void
}

interface Human {
  run(): void
}

class Base {
}

class Robot extends Base implements Machine, Human {
  run() {
    console.log('run');
  }
  move() {
    console.log('move');
  }
}

Robot类可以继承Base类，并实现Machine和Human接口，这种可以组合继承类和实现接口的方式使面向对象编程更为灵活、可扩展性更好。

泛型

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

定义了一个模板类型T，实例化GenericNumber类时可以传入内置类型或者自定义类型。泛型（模板）在传统面向对象编程语言中是很常见的概念了，在代码逻辑是通用模式化的，参数可以是动态类型的场景下比较有用。

类型系统

interface SystemConfig {
  attr1: number;
  attr2: string;
  func1(): string;
}

interface ModuleType {
  data: {
    attr1?: string,
    attr2?: number
  },
  visible: boolean
}

const config: SystemConfig = {
  attr1: 1,
  attr2: 'str',
  func1: () => ''
};

const mod: ModuleType = {
  data: {
    attr1: '1'
  },
  visible: true
};

我们定义了一个系统配置类型SystemConfig和一个模块类型ModuleType，我们在使用这些类型时就不能随便修改config和mod的数据了。每个被调用方负责自己的对外类型展现，调用者只需关心被调用方的类型，不需关心内部细节，这就是类型约束的好处，这对于多人协作的团队项目非常有帮助。

模块系统增强

namespace N {
  export namespace NN {
    export function a() {
      console.log('N.a');
    }
  }
}

N.NN.a();

TS除了支持ES6的模块系统之外，还支持命名空间。这在管理复杂模块的内部时比较有用。

使用TS的成本

成本对比

成本点ESTS说明
学习和踩坑成本※※※※※※※※虽然是JS超集，但还是要学习TS本身及面向对象基础知识，开发环境搭建、使用中的问题和坑也需要自己趟，好在TS社区比较成熟，网上沉淀的资料很多
整体代码量※※※※※※※※※TS代码增加比较完善的类型定义的话整体代码量比原生ES多5%~10%左右
原生JS（标准ES、浏览器端、服务器端）※※※※※※※※IDE内置了详尽的类型声明，可以智能提示方法和参数说明，提升了效率
依赖外部库（React、Lodash、Antd）※※※※※※※※有TS类型声明库，IDE智能提示和分析，效率提升
内部公共库、模块※※※※※※※团队内部自行编写类型定义文件，有一定工作量，但开发效率可以有一些提升，逐步完善类型定义后，效率进一步提升
团队协作效率※※※※※※※对系统配置、外部接口、内部模块做类型定义后，实例对象属性就不能随意改了，每个被调用方负责自己的对外类型展现（可以理解为形状），调用者只需关心被调用方的类型，不需关心内部细节
代码可维护性※※※※※※由于团队成员水平差异，和软件的熵的特质，长期迭代维护的项目总会遇到可维护性的问题，有了强类型约束和静态检查，以及智能IDE的帮助下，可以降低软件腐化的速度，提升可维护性，且在重构时，强类型和静态类型检查会帮上大忙，甚至有了类型定义，会不经意间增加重构的频率
运行时稳定性※※※※※※由于TS有静态类型检查，很多bug都会被消灭在上线前

小结

总的来说，TypeScript更适合于大型项目的开发，后期的维护成本更低。

感谢

本次分享到这里就结束了，感谢您的阅读，如果本文对您有什么帮助，别忘了动动手指点个赞 ❤️ 和关注。

更多内容欢迎关注访问下面二维码或搜索公众号：修行全栈，获取更多实用内容。

qrcode_for_gh_0a9d846748ac_344.jpg

avatar
文章
阅读
粉丝