Note: This article is available in Chinese only. 本文暂无英文版本。
View original
先放参考资料：
react-typescript-cheatsheet （强推一波，讲了很多 react+ts 的实践）
typescript 是 javascript 的语法扩展，好处是提供了类型，可以在编译（结果为 js 文件）的时候提供静态的类型检查。
typescript的问号语法：标记某个参数为可选。
例子：
1export class Thread {
2 id: string;
3 lastMessage: Message;
4 name: string;
5 avatarSrc: string;
6
7 constructor(id?: string,
8 name?: string,
9 avatarSrc?: string) {
10 this.id = id || uuid();
11 this.name = name;
12 this.avatarSrc = avatarSrc;
13 }
14}关于 typescript 的类型推断，如果在定义时直接赋值则会进行推断，否则会推断类型为 any。
1let myFavoriteNumber = 'seven';
2myFavoriteNumber = 7;
3
4// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
5//上面的写法会编译错误，原因是定义时已经推断类型为string
6//但是下面的写法没有问题
7
8let myFavoriteNumber;
9myFavoriteNumber = 'seven';
10myFavoriteNumber = 7;
11
12
13
14
15let myFavoriteNumber: string | number;
16myFavoriteNumber = 'seven';
17myFavoriteNumber = 7;这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法。
1function getLength(something: string | number): number {
2 return something.length;
3}
4
5// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
6// Property 'length' does not exist on type 'number'.
类型断言：
1function getLength(something: string | number): number {
2 if ((<string>something).length) {
3 return (<string>something).length;
4 } else {
5 return something.toString().length;
6 }
7}类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的。
泛型：
1function createArray<T>(length: number, value: T): Array<T> {
2 let result: T[] = [];
3 for (let i = 0; i < length; i++) {
4 result[i] = value;
5 }
6 return result;
7}
8
9createArray<string>(3, 'x'); // ['x', 'x', 'x']
10
11
12
13
14function swap<T, U>(tuple: [T, U]): [U, T] {
15 return [tuple[1], tuple[0]];
16}
17
18swap([7, 'seven']); // ['seven', 7]
泛型约束：传入的模板参数必须包含接口的形状：
1interface Lengthwise {
2 length: number;
3}
4
5function loggingIdentity<T extends Lengthwise>(arg: T): T {
6 console.log(arg.length);
7 return arg;
8}上面的代码表示，传入的参数必须包含一个类型为 number、名字为 length 的属性。
这里要强调的是，名字是重要的。如果把 length 改为其他名字，将不能通过编译。
定义一个普通的 class 属性（不是 props）的办法：
在构造函数之前声明即可，参考如下代码中的 pointer: number
1class App extends React.Component<{
2 message: string,
3}> {
4 pointer: number // like this
5 componentDidMount() {
6 this.pointer = 3;
7 }
8 render() {
9 return (
10 <div>{this.props.message} and {this.pointer}</div>
11 );
12 }
13}