2. JavaScript & TypeScript 语法

2.6 类型基础、类型别名、接口、泛型

本章将会讲解与 TypeScript 相关的基础内容，人类塔几乎全部使用 ts 进行编程，因此这部分相当重要，而且难度也不低，请仔细阅读。

目录：

2.6.1 类型基础、类型别名、接口 P3 41楼

2.6.2 联合类型、交叉类型、泛型 P3 42楼

2.6.3 类的类型、命名空间、枚举 P4 43楼

2.6.4 类型守卫、类型演算、杂项 P4 44楼

2.6.1 类型基础、类型别名、接口

2.6.1.1 类型的作用

我们知道，JavaScript 是一个弱类型语言，也就是说，我们不需要明确声明变量的类型，也不需要考虑类型不兼容的情况，也不会进行任何类型检查。这也就意味着，我们很可能会由于类型上的缺陷，导致程序出现 bug，而且很难找到原因。例如，一个函数应当传入一个数字作为参数，但是你传入了一个字符串，这个时候就会出现问题，但是排查的时候很可能难以发现。但是在 TypeScript 中，这种情况就不会发生，因为 ts 的类型系统可以严格限定每个参数的类型，确保类型不会出错。

由此可见，类型系统是一个非常有用的东西，而 ts 拥有一套几乎在所有语言中最强的类型系统，这意味着我们可以将类型限制地极其严格，从而完全避免任何类型错误（甚至有人拿 ts 的类型系统写了一套 ts 的类型系统，可见它的类型演算能力有多强）。在人类塔中，有很多有着严格类型限制的函数、类型等。因此，想要彻底弄懂人类塔，这一章节必须彻底搞明白。

2.6.1.2 基础类型用法

ts 有这几种常用的基本类型：number string boolean void null undefined any。其中，void 可以认为是 undefined 或 null，一般用于无返回值函数的返回值类型，any 可以认为是任意类型，使用这个类型时，不会进行任何类型检查，因此应当尽量避免使用 any。

在声明变量/常量时，可以使用 `: 类型` 的形式显式声明其类型：

const abc: string = '123';
let def: number = 123;

当然，也可以不声明其类型，这样，ts 会自动帮我们推导其类型：

const abc = '123'; // ts 自动推导为 string 类型

注意，ts 推导的类型不一定完全准确，有时候还是需要自己手动显式声明。

2.6.1.3 函数的类型声明

函数需要声明的类型包括参数的类型和返回值类型。与上面类似，可以使用 `: 类型` 的形式显式声明其类型：

function fn(a: number, b: number): number {
    return a + b;
}

当我们没有办法判断出参数的类型时（例如声明一个函数等），我们要求参数必须显式声明类型，返回值可以不填，ts 会自动推导，当然有时候依然不准确。

对于一个变量或者常量，还可以这么声明函数：

const fn: (a: number, b: number) => number = (a, b) => a + b;

在这里，(a: number, b: number) => number 作为一个类型给到了常量 fn，然后赋值了一个函数给 fn。注意，我们在前面已经声明了函数的参数类型，因此后面并不需要重新声明。当然，你还可以这么写：

const fn = (a: number, b: number): number => a + b;

可见，函数的类型声明非常灵活，在大部分情况下按照符合直觉的形式写都是可以的。但是需要注意的是，如果参数只有一个，还需要声明类型的话，那么参数的括号不能省略。

当然，参数也可以是函数类型：

function fn(func: (v: number) => void): void {
    const list = Array(10).fill(1);
    list.forEach(func);
}

这里这两个函数都没有返回值，因此返回值类型为 void。这里我声明了一个函数类型的参数，函数内容可以先不管。那么对于这个函数，我们可以这么使用：

fn(v => console.log(v));

注意到这里我们并没有显式声明 v 的类型，但是却不会报错，这是为什么呢？我们看 fn 的类型声明，它声明了 func 的第一个参数 v 的类型是 number，因此在这里，v 的类型一定是 number，因此不会报错。于是这时候，我们就不需要标出其类型了。

ts还允许函数出现可选参数，可选参数使用 ? 来进行标注：

function myFunc(param1: number, param2?: string)

2.6.1.4 类型别名

类型别名（Type Aliasing）可以让你的类型拥有一个名称，相当于声明了一个“变量”，类似于C语言中的 #typedef。它通过 type 关键字进行声明：

type MyType = number;
type MyFunc = (x: number) => void;

上面这两句中，我就声明了两个类型别名，其中 MyType 表示 number 类型，而 MyFunc 表示一个函数类型。我们可以直接使用它们：

function myFunc(x: MyType, fn: MyFunc): void

这样的话，它们表示的类型就类似于变量一样作为了上面这个函数的参数类型。在用法上，它跟普通的类型几乎完全一样，把它当成普通的类型也没有问题。

2.6.1.5 数组与元组

数组和元组用于声明数组类型。数组类型的声明方式很简单，使用 Type[] 的形式即可：

type MyArray = number[];

这就是一个数字型的数组类型。下面来看元组类型。

元组是一类特殊的数组类型，它固定了数组每一项的类型，要求对应项的类型必须为特定类型，因此它的限定要比数组类型更为严格。例如：

type MyArray1 = [number, string, boolean];

这个元组类型就声明了一个三元素数组，要求每一项依次是 number, string, boolean 类型。除此之外，还可以对每一项加一个名称，名称只起到提示作用，对类型没有任何影响：

type MyArray2 = [num: number, name: string];

这里的 num 和 name 就是对应项的“名称”，可以起到方便阅读的作用。

元组还可以相互合并，使用拓展语法：

type MyArray3 = [...MyArray1, ...MyArray2]; // [number, string, boolean, num: number, name: string]

这样就可以将两个元组进行合并，产生一个新的元组。当然，也可以将一个数组类型合并到元组上，这样这个元组就会变成前几项固定类型，而后面数量不固定的元组。

与函数的参数类似，元组也可以声明可选项：

type MyArray4 = [boolean, name?: string, number?];

可以发现，可选项可以在元素名称后面加问号，或者在类型后面加问号来实现。与函数参数一样，可选项必须位于必选项后面。

除此之外，数组和元组还会用于函数的剩余参数，其中数组表示剩余参数不定数量，而元组则表示剩余参数指定数量，类型对应：

function func1(...params: string[]): void // 剩余参数为字符串类型
function func2(...params: [name: string, value: number]): void // 剩余参数有两个，分别为string和number类型，等价于：
function func3(name: string, value: number): void

2.6.1.6 接口与对象类型

js中万物皆对象，因此对象类型是一个非常重要的类型。它的声明也很简单，属于“键值对”的形式，与声明对象很像：

type ObjectType = {
    name: string;
    value: number;
}

其中行尾分号非必填，也可以填逗号。为统一风格，建议所有的声明都用同一种风格，例如人类塔中行尾全部使用分号。

在使用对象类型时，也与其他的一致：

const obj: ObjectType = {
    name: '古祠',
    value: 2691
};

对象中也可以使用可选属性，与函数声明类似：

type ObjectType = {
    name: string;
    value?: number;
}

值得注意的是，在ts中，我们不会先声明一个空对象，然后对其属性赋值，而是会直接对其进行初始化，因为不这么做的话，会引起类型错误，因此需要养成遵守类型的习惯。

而接口也是对象类型声明，它与上述使用类型别名声明几乎一致：

interface ObjectType {
    name: string;
    value: number;
}

同样，接口中也可以使用 ? 来声明可选属性。

与 type 不同的是，接口可以通过多次声明来进行拓展，这使得接口的灵活性要高于类型别名：

interface ObjectType {
    name: string;
}

interface ObjectType {
    value: number;
}

接口还可以进行继承，它与类的继承类似，继承会使得子接口包含所有父接口的属性，同时允许对父接口的属性类型进行缩窄（例如 string[] 可以缩窄为 [string, string]，但反过来就不行了，这部分内容会在后面进行细致讲解）：

interface Base {
    name: string;
}

interface ObjectType extends Base {
    value: number;
}

这时，ObjectType 的类型就包含了 name 和 value 两个属性。

除此之外，接口还可以进行多继承，它允许一个接口继承自多个接口，被继承的接口间使用逗号分隔：

interface Base1 {
    name: string;
}

interface Base2 {
    value: number;
}

interface ObjectType extends Base1, Base2 {
    symbol: string;
}

对象类型中，还可以声明只读类型（接口与类型别名中均可，读作 read-only），它表示这个值在声明之后便不可被写入，只能被读取：

interface ObjectType {
    readonly name: string;
}
const obj: ObjectType = { name: '古祠' };
obj.name = '鹿神'; // 报错，只读类型不能被赋值

对象类型还有一种特殊的类型，就是索引类型，它与数组类型类似，允许对象声明一种类型的键（string, number, symbol），只要使用对应类型的键去获取，就不会报错。使用 ts 官方文档的说法，它应该在这种情况下使用：Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. 即你不知道属性的具体名称，但知道属性的类型是什么时。它的声明方式如下：

interface ObjectType {
    [key: string]: string;
}

其中 [key: string] 说明键的类型是字符串，这表明只要使用字符串类型的键进行获取，就不会有任何报错，因此这种声明方式也有一定的风险，非必要不使用。例如，下面这段代码是完全没有问题的：

const obj: ObjectType = {};
obj.abc = '1';
obj['abcd-ejk\\'] = '234';

值得注意的是，使用数字型去调用对象的属性的时候，数字会先转换成字符串再获取，因此数字型也会满足上述字符串索引类型，而字符串不会满足数字索引类型，而 symbol 则不会这样，但 symbol 作为索引的场景很少，我们一般不会使用到。

obj[1] = '123'; // 这是没有问题的

作业