如何用 TypeScript 提高 JS 工程的健壮性

Question

如何用 TypeScript 提高 JS 工程的健壮性

Answer 1

1. Typed Tuple虽然 JavaScript 里一直没有正宗的 Tuple 类型，但是在 JavaScript 中使用 Tuple 一直都是很常见的事情，可以基于数组也可以基于对象，有了解构赋值以后用数组还是对象的代码量几乎完全相同。在 TypeScript ，如果我们需要一个具有静态类型的 Tuple，一种方式是定义一个 interface 然后使用对象，但是这样看起来比较麻烦。另一种方式就是直接使用 TypeScript 提供的 Tuple 类型：let error: [number, string] = [123, 'Some Message'];在 TypeScript 的类型标注中，当我们把类型写在方括号之前，就是 Typed Array，当类型写在方括号之中，就是 Typed Tuple 了。接着我们就可以使用类型安全的方式解构或者手动取值：// Both correctly typedlet [code, message] = error; // code is number and message is stringlet anotherCode = error[0]; // anotherCode is numberlet anotherMessage = error[1]; // anotherMessage is string2. String Literal Type当我们需要使用静态可枚举的内容时，最正统的方式当然是使用 Enum。不过对于一些需要和已有 JavaScript 类库交互时，必须得使用 String 类型，这时候往往会难以进行静态检查（例如拼写错误）。这时候，可以使用 TypeScript 提供的 String Literal Type：class Socket {on (event: 'open' | 'message' | 'error' | 'close', cb) {// ...}}let mySock = new Socket();socket.on('message', () => {});这样，如果传入的 String 不在预设范围内，就会报错，从而实现静态检查效果。3. Void对于所有没有返回值的函数或者方法，都应该声明为 Void 类型，而不是留空，后者为 Any 类型。function log(message: string): void {// ...}4. Implements Class对于面向对象编程，组合优于继承，但是对于组合，我们往往需要先定义一个接口类型，然后再定义一个这个接口的实现类型，十分繁琐。在 TypeScript 中，我们可以直接 Implements（而非 extends）一个（或多个）类：class Base1 {method1 () {}}class Base2 {method2 () {}}class MyClass implements Base1, Base2 {constructor (private base1: Base1, private base2: Base2) {}method1 () { return this.base1.method1(); }method2 () { return this.base2.method2(); }}这样，我们就不要像 Java 那样先定义一个 SomeInterface，再定义一个 SomeImpl，再把自己的 Class 实现 Interface，再把 SomeImpl 注进来那么麻烦了。