TypeScript使用总结(一)

下面是一些TypeScript的总结。

TSLint 配置

这一步主要是通过约束TypeScript的编写过程来保证类型安全。在tslint.json中，进行如下配置：

"rule": {
	...
	"no-any": true,
}

配置no-any的原因很简单，any并不能使得你的代码变得类型安全，同时使得你的代码直接退化成JavaScript，这样跟直接写JavaScript没什么两样，甚至还多了几个字符。

下一步是对tsconfig.json进行设置，这个配置主要是配置编译选项，下面仅仅给出较为宽松，但是又不失类型安全的配置：

"compilerOptions": {
	...
    // 在每个文件中添加 'use strict;'
	"alwaysStrict": true,
    // 在表达式和声明上有隐含的 any类型时报错。
	"noImplicitAny": true,
    // 当 this表达式的值为 any类型的时候，生成一个错误。
	"noImplicitThis": true,
    // 	不是函数的所有返回路径都有返回值时报错。
	"noImplicitReturns": true
}

更多配置，可以参考TypeScript官方编译配置文档。

这里要注意，并不是所有人都能接受strict对于代码的检查，按照官方文档，开启strict会启动以下这几个选项：

• --noImplicitAny，
• --noImplicitThis，
• --alwaysStrict，
• --strictBindCallApply，
• --strictNullChecks（这里是主要问题，会开启空检查，未标明非空而为空的代码一律不通过），
• --strictFunctionTypes ，
• --strictPropertyInitialization.

不过建议还是开启strict吧。

类型的使用

在这里，主要讲的是一些语法上的技巧，不会讲得太多语法上的东西，因为大部分内容在 官方文档 都有说明。

Null & Undefined & readonly

众所周知，null 和 undefined 是不同的两个类型，那么 TS 当然也要区分它们，所以，以下代码会编译不过：

const data: {} | null = undefined;

所以，为了使得以上代码能够编译通过，需要加上这么 undefined 这个类型：

const data: {} | null | undefined = undefined;

当然对于 undefined 来说，它还有一些特别的使用方式，注意到问号，其实就是提供一种简单的方式来标识这个对象中的键值可以为未定义。

interface IStudent {
	firstName?: string;
	lastName?: string;
}
const student: IStudent = {};

// 然而上面这种写法跟下面这种写法是不一样的，采用联合类型来编写，编译器会认为这个对象的键是必须存在的。
interface ITeacher {
    firstName: string | undefined;
    lastName: string | undefined;
}

const teacher: ITeacher = {}; // Error

那么，在 strict 开启的情况下，在类中任意一个属性的定义都需要初始化：

class Student {
	firstName: string;  // Error
    lastName: string = '';
}

如果需要标记不需要初始化，有两种方式

Condition Type

在TypeScript中，这个是一个非常有用的类型，它可以通过这种方式来定义一个类型：

type Condition<T> = T extend U ? T : never;

不过请注意：在使用Condition Type的时候，类型的判断不是通过类名，而是通过鸭子辩型来判断的。

Class Type

定义一个泛型工厂函数，看起来像是这样的：

function create<T>(c: {new(...args: any[]): T; }, ...args: any[]): T {
    return new c();
}

但是要写这么一坨{new(...args: any[]): T;}看起来可能不太直观，那么我们可以这样定义一下：

interface ClassType<T> {
	new (...args: any[]): T;
}

那么这个泛型工厂函数就可以简化成这样：

function create<T>(c: ClassType<T>, ...args: any[]): T {
    return new c(...args);
}

Index Type

在 JS 中，我们都知道一个对象是可以随时随地的为对象添加键（只要对象是可扩展的）。所以，为了适配这种情况，TS 使用了索引类型，它看起来像这样：

type IndexType = { [p: string]: string }

也就是说，它使用了 [] 方括号来表示键的类型，如果一个对象接受了这个类型，那么它可以这样：

const value: IndexType = {};

value['hello'] = 'world';

它可以通过配合 infer 关键字，可以推导出某个对象类型中的值的类型的集合：

type ValueType<T> = T extends {[p in keyof T]: infer V} ? V : never;

一个比较常用的地方是用在 Proxy 中，来避免 get 和 set 操作的 any：

class Student {
	constructor(public name: string = '') {}
}

const student = new Proxy(new Student('Tony'), {
	// 请看这里：
	set(target: Student, p: keyof Student, value: ValueType<Student>, receiver: any): boolean {
		...
		return true;
	}
});

Array Type

在 JS 中，array 中的数据可以是任意类型的，那么为了配合 JS，它可以这样定义：

const numbers: number[] = [];

const anys: [number, string, object] = [];

重载

在 TavaScript 中使用了一种非常有意思的方式来实现重载，一开始我还没搞懂怎么运行，但是弄懂了之后，其实就是把应该在编译期的判断放在了运行期。但是这样做会更加符合 ts 的哲学——只在编译期提供类型。这样通过这种形式的重载，在类型擦除的过程中，就不会生成多个不同函数签名以及不同名的函数。

来看看例子，看看这个是如何使用的：

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: number | string, y: number | string): number | string {
    if (typeof x === 'number' && typeof y === 'number') {
        return x + y;
    } else if (typeof x === 'string' && typeof y === 'string') {
    	return x + y;
    }
}

本篇总结

主要说了一些配置技巧、编写技巧，以及重载。下一篇应该会说一下装饰器等进阶功能。