TS学习笔记-Toy模板网

这篇具有很好参考价值的文章主要介绍了TS学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

TypeScript

1 类型基础

1.1 原始数据类型

boolean、string、number、void、null、undefined、Symbol、BigInt
注意：
1、null与undefined是所有类型的子集。
2、由构造函数创建的对象本质是一个对象。如下代码便会报错。

let createdByNewBoolean: boolean = new Boolean(1);

// Type 'Boolean' is not assignable to type 'boolean'.
//   'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

3、void用于定义无返回值的函数，若用于定义变量，则只能赋值undefined/null，并无太大意义。

2.2 定义对象类型

ts中使用接口(interface)来定义对象，一方面约束了对象属性的类型，一方面约束了对象的形状（必须完全遵循接口属性的数量）。

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

1、可选属性：属性名后加问号即可。
2、任意属性：定义了任意属性后，确定属性与可选属性必须是它的子集。
3、只读属性：readonly放于属性名前即可。约束了属性无法被重新赋值，但需注意的是，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。
注意：接口一般首字母大写，官方推荐接口名以I开头更清晰

2.3 定义数组类型

1、类型+方括号定义。
2、数组泛型：Array<类型>
3、接口表示数组：数组的本质是对象，定义index为number即可。

interface NumberArray {
    [index: number]: number;
}
let fn: NumberArray = [1, 1, 2, 3, 5];

该定义方法多存在于类数组中，如函数的arguments，就是类数组，可以使用数组的length、使用下标获取到项，但是却无法使用任何数组的方法，如arr.sort()，且其本身有一个属性callee，指向当前的函数。此时就需要使用接口来定义。

interface IArgs{
[index: number]: number;
        length: number;
        callee: Function;
}
function sum() {
    let args: IArgs = arguments;
}

2.4 定义函数类型

1、需要对函数的参数及返回值进行类型约束。

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

往往左边的类型声明可以省略，因为它会通过类型推断自动得出类型。
2、可以用接口来定义函数

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

3、注意：
（1）可以写可选参数，也是后面加问号即可。但是必须按必须参数>可选参数的顺序来写。若参数设置了默认值，则将其认定为可选参数，且不受必须参数>可选参数的限制。
（2）剩余参数为一个数组，采用数组的方式定义即可
（3）函数的重载对于参数的类型限制可以采用联合类型声明的方式

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}