typescript学习笔记

2018-09-05 · 2 min read · typescript 前端

先放参考资料:

react-typescript-cheatsheet (强推一波，讲了很多react+ts的实践）

typescript是javascript的语法扩展。。。好处是提供了类型。。可以在编译（结果为js文件)的时候提供静态的类型检查。。。

typescript的问号语法:标记某个参数为可选。

例子:

1export class Thread {
2  id: string;
3  lastMessage: Message;
4  name: string;
5  avatarSrc: string;

1  constructor(id?: string,
2              name?: string,
3              avatarSrc?: string) {
4    this.id = id || uuid();
5    this.name = name;
6    this.avatarSrc = avatarSrc;
7  }
8}

关于typescript的类型推断。。如果在定义时直接赋值则会进行推断，否则会推断类型为any.

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
//上面的写法会编译错误，原因是定义时已经推断类型为string
//但是下面的写法没有问题

1let myFavoriteNumber;
2myFavoriteNumber = 'seven';
3myFavoriteNumber = 7;

1let myFavoriteNumber: string | number;
2myFavoriteNumber = 'seven';
3myFavoriteNumber = 7;

这里的 let myFavoriteNumber: string | number 的含义是，
允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法

1function getLength(something: string | number): number {
2    return something.length;
3}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   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}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

1function swap<T, U>(tuple: [T, U]): [U, T] {
2    return [tuple[1], tuple[0]];
3}

swap([7, 'seven']); // ['seven', 7]

泛型约束:传入的模板参数必须包含接口的形状:

1interface Lengthwise {
2    length: number;
3}

1function loggingIdentity<T extends Lengthwise>(arg: T): T {
2    console.log(arg.length);
3    return arg;
4}

上面的代码表示，传入的参数必须包含一个类型为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}