这里将TS的数据类型简单的进行下归类:

  • 基本类型:string、number、boolean、symbol、bigint、null、undefined
  • 引用类型:array、 Tuple(元组)、 object(包含Object和{})、function、class
  • 特殊类型:any、unknow、void、nerver、enum(枚举)
  • 其他类型:类型推理、类型断言、联合类型、类型别名、交叉类型、字面量类型、类型守卫、接口、泛型


    引用类型

引用类型,就是我们常说的 函数、{}、数组、类

Array 数组类型

在 TypeScript 中,数组类型有多种定义方式,比较灵活。

简单使用例子

  1. // 「类型 + 方括号」表示法
  2. let array1: number[] = [1, 1, 2, 3, 5];
  3. // 数组泛型
  4. let array2: Array<number> = [1, 1, 2, 3, 5];
  5. // 用接口表示数组
  6. interface NumberArray {
  7. [index: number]: number;
  8. }
  9. let fibonacci: NumberArray = [1, 1, 2, 3, 5];
  10. // 类数组
  11. // any 在数组中的应用 用 any 表示数组中允许出现任意类型
  12. let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

「类型 + 方括号」表示法

最简单的方法是使用「类型 + 方括号」来表示数组:

  1. let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型:

  1. let fibonacci: number[] = [1, '1', 2, 3, 5];
  2. // Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:

  1. let fibonacci: number[] = [1, 1, 2, 3, 5];
  2. fibonacci.push('8');
  3. // Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中,push 方法只允许传入 number 类型的参数,但是却传了一个 "8" 类型的参数,所以报错了。这里 "8" 是一个字符串字面量类型,会在后续章节中详细介绍。

数组泛型

  1. // 数组泛型
  2. let array2: Array<number> = [1, 1, 2, 3, 5];

Tuple 元组类型

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

  1. // 元组 数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。
  2. let Tom: [string, number] = ['Tom', 25]
  3. Tom.push(100) // 可以使用数组方法,但只能 push 定义的 number 或者 string 类型

特殊类型

any 任意类型

普通类型,在赋值过程中改变类型是不被允许的,如果是 any 类型,则允许被赋值为任意类型

  1. let myFavoriteNumber: any = 'seven';
  2. myFavoriteNumber = 7;

在任意值上访问任何属性都是允许的:

  1. let anyThing: any = 'hello';
  2. console.log(anyThing.myName);
  3. console.log(anyThing.myName.firstName);

也允许调用任何方法:

  1. let anyThing: any = 'Tom';
  2. anyThing.setName('Jerry');
  3. anyThing.setName('Jerry').sayHello();
  4. anyThing.myName.setFirstName('Cat');

可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

  1. let something;
  2. something = 'seven';
  3. something = 7;
  4. something.setName('Tom');

等价于

  1. let something: any;
  2. something = 'seven';
  3. something = 7;
  4. something.setName('Tom'

不建议使用 any,不然就丧失了 TS 的意义,用到 any,就意味着放弃类型检查了,因为它不是用来描述具体类型的。

在使用它之前,我们需要想两件事:

  1. 能否使用更具体的类型
  2. 能否使用 unknown 代替

都不能的情况下,any 才是最后的选择。

unknown 任意类型

不建议使用 any,当我不知道一个类型具体是什么时,该怎么办?

可以使用 unknown 类型

unknown 类型代表任何类型,它的定义和 any 定义很像,但是它是一个安全类型,使用 unknown 做任何事情都是不合法的。 相当于是安全版本的 any 类型

比如,这样一个 divide 函数,

  1. function divide(param: any) {
  2. return param / 2
  3. }

把 param 定义为 any 类型,TS 就能编译通过,没有把潜在的风险暴露出来,万一传的不是 number 类型,不就没有达到预期了吗。

把 param 定义为 unknown 类型 ,TS 编译器就能拦住潜在风险,如下图,

  1. function divide(param: unknown) {
  2. return param / 2
  3. }

image.png

因为不知道 param 的类型,使用运算符 /,导致报错。

再配合类型断言,即可解决这个问题,

  1. function divide(param: unknown) {
  2. // 1.类型断言 —— 不飘红,但执行时可能错误
  3. return param as number / 2
  4. // 2、类型守卫 —— 不飘红,且确保正常执行
  5. if (typeof param === 'number') {
  6. // 推断出类型: number
  7. return param / 2
  8. }
  9. // 3、类型断言函数,抛出错误 —— 不飘红,且确保正常执行
  10. assertIsNumber(param);
  11. return param / 2
  12. }
  13. /** 类型断言函数,抛出错误 */
  14. function assertIsNumber(arg: unknown): asserts arg is Number {
  15. if (!(arg instanceof Number)) {
  16. thrownewTypeError('Not a Number: ' + arg);
  17. }
  18. }

使用 any 好比鬼屋探险,代码执行的时候处处见鬼。而 unknown 结合类型守卫等方式,可以确保上游数据结构不确定时,也能让代码正常执行。

void 空值 指定方法类型

void 类型与 any 类型相反,它表示没有任何类型。

在 TypeScript 中,可以用 void 表示没有任何返回值的函数,方法体中不能return

  1. function alertName(): void {
  2. alert('My name is Tom');
  3. }
  4. // 声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:
  5. let unusable: void = undefined;

nerver 永不存在的值的类型

never 类型表示的是那些永不存在的值的类型。例如never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

值会永不存在的两种情况:

  • 1 如果一个函数执行时抛出了异常,那么这个函数永远不存在返回值(因为抛出异常会直接中断程序运行,这使得程序运行不到返回值那一步,即具有不可达的终点,也就永不存在返回了)
  • 2 函数中执行无限循环的代码(死循环),使得程序永远无法运行到函数返回值那一步,永不存在返回。
  1. // 异常
  2. function error(msg: string): never { // 编译正确
  3. throw new Error(msg);
  4. }
  5. // 死循环
  6. function loopForever(): never { // 编译正确
  7. while (true) {};
  8. }

enum 枚举类型

  1. // 枚举 枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。
  2. enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
  3. console.log(Days["Sun"] === 0); // true
  4. console.log(Days["Mon"] === 1); // true
  5. console.log(Days["Tue"] === 2); // true
  6. console.log(Days["Sat"] === 6); // true
  7. console.log(Days[0] === "Sun"); // true
  8. console.log(Days[1] === "Mon"); // true
  9. console.log(Days[2] === "Tue"); // true
  10. console.log(Days[6] === "Sat"); // true

enum 枚举

联合类型

简单使用

表示取值可以为多种类型中的一种 联合类型使用 | 分隔每个类型。

  1. let UnionTypesr: string | number;

访问联合类型的属性或方法

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

  1. function getLength(something: string | number): number {
  2. return something.length;
  3. }
  4. // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
  5. // Property 'length' does not exist on type 'number'.

上例中,length 不是 stringnumber 的共有属性,所以会报错。
访问 stringnumber 的共有属性是没问题的:

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

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'seven';
  3. console.log(myFavoriteNumber.length); // 5
  4. myFavoriteNumber = 7;
  5. console.log(myFavoriteNumber.length); // 编译时报错
  6. // index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中,第二行的 myFavoriteNumber 被推断成了 string,访问它的 length 属性不会报错。
而第四行的 myFavoriteNumber 被推断成了 number,访问它的 length 属性时就报错了。