TypeScript中的类型演算-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1113 天，文章内容可能已经过时。

类型演算

根据已知的信息，计算出新的类型

typeof

TS中的typeof，书写位置在类型约束的位置上，表示获取某个数据的类型

例如：

const a: string = "abc";

const b: typeof a = "bcd";

1
2
3

TypeScript中的类型演算
可以看到b的类型和a一样，也是string

当typeof作用于类的时候，得到的类型，是该类的构造函数

class User {}

function createUser(u: typeof User): User {
  return new u();
}

const u = createUser(User);

// 相当于

class User {}

function createUser(u: new () => User): User {
  return new u();
}

const u = createUser(User);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

TypeScript中的类型演算

keyof

keyof可以作用于类、接口、类型别名、用于获取其他类型中的所有成员名组成的联合类型

例如：我们要打印某个对象中的字段值

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

function printUser(obj: User, prop: "name" | "age") {
  console.log(obj[prop]);
}

const u: User = {
  name: "xiaohong",
  age: 10,
};

printUser(u, "name"); // xiaohong

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

prop的约束类型就必须把User中的所有类型写出来，这样就会产生很多问题，例如新增字段或者修改字段，都会造成很大的改动，这时候就可以使用keyof

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

function printUser(obj: User, prop: keyof User) {
  console.log(obj[prop]);
}

const u: User = {
  name: "xiaohong",
  age: 10,
};

printUser(u, "name"); // xiaohong

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

keyof可以读取User接口中的所有成员，形成一个联合类型

in

该关键字往往和keyof联用，限制某个索引类型的取值范围

例如：我们需要约束一个对象，对象中有name和age两个字段

type UserString = {
  name: string;
  age: string;
};

const u: UserString = {
  name: "xiaohong",
  age: "10",
};

1
2
3
4
5
6
7
8
9

这时候也可以使用in

type UserString = {
  [u in "name" | "age"]: string;
};

const u: UserString = {
  name: "xiaohong",
  age: "10",
};

1
2
3
4
5
6
7
8

和keyof联用

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

type UserString = {
  [u in keyof User]: string;
};

const u: UserString = {
  name: "xiaohong",
  age: "10",
};

1
2
3
4
5
6
7
8
9
10
11
12
13

虽然接口User中的age是number类型，但是通过类型UserString重新赋值后，也会变成string类型，如果还是想按照接口User中的类型，可以写成：

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

type UserString = {
  [u in keyof User]: User[u];
};

const u: UserString = {
  name: "xiaohong",
  age: 10,
};

1
2
3
4
5
6
7
8
9
10
11
12
13

如果要在接口User的基础上，把所有的值改成只读的，通过in和keyof联用的方式，就能很容易实现：

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

type UserReadonly = {
  readonly [u in keyof User]: User[u];
};

const u: UserReadonly = {
  name: "xiaohong",
  age: 10,
};

u.name = "xiaoming"; // 报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以通过泛型写成通用的方式，这样别的接口也能使用：（在TS中有很多预定义的）

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

type UserReadonly<T> = {
  readonly [u in keyof T]: T[u];
};

const u: UserReadonly<User> = {
  name: "xiaohong",
  age: 10,
};

1
2
3
4
5
6
7
8
9
10
11
12
13

TS中预定义的类型演算

Partial<T> // 将类型T中的成员变成可选
/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

	
Required<T> // 将类型T中的成员变成必填
/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P]; // -号指的是去掉可选，就是必填
};


Readonly<T> // 将类型T中的成员变成只读
/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

	
Exclude<T, U> // 从T中剔除可以赋值给U的类型
/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

	
Extract<T, U> // 提取T中可以赋值给U的类型
/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;

	
NonNullable<T> // 从T中剔除null和undefined
/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T;

	
ReturnType<T> // 获取函数返回值类型
/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

	
InstanceType<T> // 获取构造函数类型的实例类型
/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61