先放参考资料:
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
15
16let myFavoriteNumber: string | number;
17myFavoriteNumber = 'seven';
18myFavoriteNumber = 7;
19
20这里的 let myFavoriteNumber: string | number 的含义是，
21允许 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'.
类型断言:
1functionf 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}