如何用 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 typed
let [code, message] = error; // code is number and message is string
let anotherCode = error[0]; // anotherCode is number
let anotherMessage = error[1]; // anotherMessage is string
2. 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 注进来那么麻烦了。