类型检查

如何进行类型检查？

在变量、函数参数、函数返回值的后面加上:数据类型即可。

基本类型

Boolean 类型

let flag: boolean = true;

Number 类型

let num: number = 1;

String 类型

let name: string = 'jack';

数组

数组的类型检查方式有两种：

// 1.
let list: number[] = [1, 2, 3];
// 2.
let arr: Array<string> = ['a', 'b', 'c'];

由于第二种带有尖括号，而尖括号在 React 中表示组件，为了避免出现问题，建议使用第一种方式来进行类型检查。

Object 类型

let obj: object = {
	foo: 'foo',
	bar: 'bar'
}

null 和 undefined

默认情况下，null 和 undefined 是其他类型的子类型，换句话说就是，null 和 undefined 可以赋值给任何类型，但这容易导致一些不必要的错误。

let name: string = undefined;
name.toUpperCase(); // 报错

为了避免这些错误，建议在 ts 配置文件中设置compilerOptions.strictNullChecks: true，表示开启严格的空类型检查，这样就不能将这两个值赋值给其他类型。

其他的常用类型

联合类型

多种类型任选其一，可以配合类型保护进行判断。

类型保护

当对某个变量进行类型判断之后，在判断的语句块中，可以确定它的确切类型，通常情况下可以用 typeof、constructor 来触发

let name: string|undefined;

if (typeof name === 'string') {
  // 在这里会触发类型保护，保证 name 一定是string
}

void 类型

通常用于约束函数的返回值，表示该函数中没有任何返回。

function log(msg: string): void {
	console.log(msg);
}

never 类型

通常用于约束函数的返回值，表示该函数永远不会结束。

function deadLoop(): never {
    while(true) {
        console.log(1);
    }
}

字面量类型

使用字面量进行约束。

let gender: 'male'|'female' = 'male';
let user: {
  name: 'string' // 注意这里没有逗号
  age: 'number'
}

元组类型(Tuple)

一个固定长度的数组，并且数组的每一项类型确定。

let arr:[string, number]; // arr变量必须是一个长度为2的数组，且第一项是字符串，第二项是数字

any 类型

可以绕过类型检查，能赋值任意类型。

类型别名

对已知的一些类型定义名称。

格式：type 类型别名 = 具体类型

type Gender = 'male' | 'female';
type User = {
    name:string
    age:number
    gender: Gender
}

let u: User;
u = {
  name: 'jack',
  age: 18,
  gender: 'male'
}

函数的类型约束

函数重载

在函数实现之前，对函数的多种情况进行声明。

// 实现一个函数，接收两个参数，两个参数的类型必须一致
// 如果是 number 类型则返回两个参数相乘的结果
// 如果是 string 类型则返回两个参数拼接的结果
function combine(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a * b;
  } else if (typeof a === 'string' && typeof b === 'string') {
    return a + b;
  }
  throw new Error('a 和 b 类型必须一致');
}

const result1 = combine(1, 2); // result1 类型仍是 number | string
const result2 = combine('a', 'b'); // result2 类型仍是 number | string

要解决上述代码的问题，需要为 combine 函数提供多个函数类型定义来进行函数重载。

// 实现一个函数，接收两个参数，两个参数的类型必须一致
// 如果是 number 类型则返回两个参数相乘的结果
// 如果是 string 类型则返回两个参数拼接的结果
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a * b;
  } else if (typeof a === 'string' && typeof b === 'string') {
    return a + b;
  }
  throw new Error('a 和 b 类型必须一致');
}

const result1 = combine(1, 2); // result1 类型是 number
const result2 = combine('a', 'b'); // result2 类型是 string

可选参数

可以在某些参数名的末尾加上?，表示该参数是可选的，但必须是参数列表的末尾。

function sum(a: number, b: number, c?: number) {
  if (c) {
    return a + b + c;
  } else {
    return a + b;
  }
}

const count = sum(1, 2);