TS映射类型技巧

Janing
  2025-09-25 20:14 2025-09-25 20:14 Created   2025-09-25 20:34:14 2025-09-25 20:34:14 Updated      

TypeScript 中的映射类型是什么

1. 概念介绍

TypeScript 中的映射类型和数学中的映射类似，能够将一个集合的元素转换为新集合的元素，只是 TypeScript 映射类型是将一个类型映射成另一个类型。

在我们实际开发中，经常会需要一个类型的所有属性转换为可选类型，这时候你可以直接使用 TypeScript 中的 Partial工具类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
type User = {
  name: string;
  location: string;
  age: number;
}

type User2 = Partial<User>;
/*
  User2 的类型：

  type User2 = {
      name?: string | undefined;
      location?: string | undefined;
      age?: number | undefined;
  }
*/

这样我们就实现了将 User类型映射成 User2类型，并且将 User类型中的所有属性转为可选类型。

2. 实现方法

TypeScript 映射类型的语法如下：

1
2
3
type TypeName<Type> = {
  [Property in keyof Type]: boolean;
};

我们既然可以通过 Partial工具类型非常简单的实现将指定类型的所有属性转换为可选类型，那其内容原理又是如何？

我们可以在编辑器中，将鼠标悬停在 Partial名称上面，可以看到编辑器提示如下：

1
2
type Partial<T> = { [P in keyof T]?: T[P] | undefined; }
Make all properties in T optional

拆解一下其中每个部分：

type Partial<T>：定义一个类型别名 Partial和泛型 T；
keyof T：通过 keyof操作符获取泛型 T中所有 key，返回一个联合类型（如果不清楚什么是联合类型，可以理解为一个数组）；

1
2
3
4
5
6
7
type User = {
  name: string;
  location: string;
  age: number;
}

type KeyOfUser = keyof User; // "name" | "location" | "age"

in：类似 JS 中 for...in中的 in，用来遍历目标类型的公开属性名；
T[P]：是个索引访问类型（也称查找类型），获取泛型 T中 P类型，类似 JS 中的访问对象的方式；
?:将类型值设置为可选类型；
{ [P in keyof T] ?: T[P] | undefined}：遍历 keyof T返回的联合类型，并定义用 P变量接收，其每次遍历返回的值为可选类型的 T[P]。
这样就实现了 Partial工具类型，这种操作方法非常重要，是后面进行 TypeScript 类型体操的重要基础。

映射类型的应用

TypeScript 映射类型经常用来复用一些对类型的操作过程，比如 TypeScript 目前支持的 21 种工具类型，将我们常用的一些类型操作定义成这些工具类型，方便开发者复用这些类型。

所有已支持的工具类型可以看下官方文档：
https://www.typescriptlang.org/docs/handbook/utility-types.html

下面我们挑几个常用的工具类型，看下其实现过程中是如何使用映射类型的。

在学习 TypeScript 过程中，推荐多在官方的 Playground 练习和学习：
https://www.typescriptlang.org/zh/play

1. Required 必选属性

用来将类型的所有属性设置为必选属性。

实现如下：

1
2
3
type Required<T> = {
    [P in keyof T]-?: T[P];
};

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
type User = {
  name?: string;
  location?: string;
  age?: number;
}

type User2 = Required<User>;
/*
  type User2 = {
      name: string;
      location: string;
      age: number;
  }
*/

const user: User2 = {
  name: 'pingan8787',
  age: 18
}
/*
  报错：
  Property 'location' is missing in type '{ name: string; age: number; }'
  but required in type 'Required<User>'.
*/

这边的 -?符号可以暂时理解为“将可选属性转换为必选属性”，下一节会详细介绍这些符号。

2. Readonly 只读属性

用来将所有属性的类型设置为只读类型，即不能重新分配类型。

实现如下：

1
2
3
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
}

使用方式：

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
type User = {
  name?: string;
  location?: string;
  age?: number;
}

type User2 = Readonly<User>;
/*
  type User2 = {
      readonly name?: string | undefined;
      readonly location?: string | undefined;
      readonly age?: number | undefined;
  }
*/

const user: User2 = {
  name: 'pingan8787',
  age: 18
}

user.age = 20;
/*
  报错：
  Cannot assign to 'age' because it is a read-only property.
*/

3. Pick 选择指定属性

用来从指定类型中选择指定属性并返回。

实现如下：

1
2
3
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
}

使用如下：

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
type User = {
  name?: string;
  location?: string;
  age?: number;
}

type User2 = Pick<User, 'name' | 'age'>;
/*
  type User2 = {
      name?: string | undefined;
      age?: number | undefined;
  }
*/

const user1: User2 = {
  name: 'pingan8787',
  age: 18
}

const user2: User2 = {
  name: 'pingan8787',
  location: 'xiamen', // 报错
  age: 18
}
/*
  报错
  Type '{ name: string; location: string; age: number; }' is not assignable to type 'User2'.
  Object literal may only specify known properties, and 'location' does not exist in type 'User2'.
*/

4. Omit 忽略指定属性

作用类似与 Pick工具类型相反，可以从指定类型中忽略指定的属性并返回。

实现如下：

1
2
3
type Omit<T, K extends string | number | symbol> = {
  [P in Exclude<keyof T, K>]: T[P];
}

使用方式：

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
type User = {
  name?: string;
  location?: string;
  age?: number;
}

type User2 = Omit<User, 'name' | 'age'>;
/*
  type User2 = {
      location?: string | undefined;
  }
*/

const user1: User2 = {
  location: 'xiamen',
}

const user2: User2 = {
  name: 'pingan8787', // 报错
  location: 'xiamen'
}
/*
  报错：
  Type '{ name: string; location: string; }' is not assignable to type 'User2'.
  Object literal may only specify known properties, and 'name' does not exist in type 'User2'.
*/

5. Exclude 从联合类型中排除指定类型

用来从指定的联合类型中排除指定类型。

实现如下：

1
type Exclude<T, U> = T extends U ? never : T;

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
type User = {
  name?: string;
  location?: string;
  age?: number;
}

type User2 = Exclude<keyof User, 'name'>;
/*
  type User2 = "location" | "age"
*/

const user1: User2 = 'age';
const user2: User2 = 'location';
const user3: User2 = 'name';  // 报错
/*
  报错：
  Type '"name"' is not assignable to type 'User2'.
*/

映射修饰符的应用

在自定义映射类型的时候，我们可以使用两个映射类型的修饰符来实现我们的需求：

readonly修饰符：将指定属性设置为只读类型；
?修饰符：将指定属性设置为可选类型；
前面介绍 Readonly和 Partial工具类型的时候已经使用到：

1
2
3
4
5
6
7
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
}

type Partial<T> = {
  [P in keyof T]?: T[P] | undefined;
}

当然，也可以对修饰符进行操作：

+添加修饰符（默认使用）；
-删除修饰符；
比如：

1
2
3
type Required<T> = {
    [P in keyof T]-?: T[P]; // 通过 - 删除 ? 修饰符
};

也可以放在前面使用：

1
2
3
type NoReadonly<T> = {
  -readonly [P in keyof T]: T[P]; // 通过 - 删除 readonly 修饰符
}

构造器参数

在实现构造器传参时，可以通过ConstructorParameters<T>提供参数提示

1
2
3
4
5
6
7
8
9
10
11
class Sub{
	constructor(tips: string){}
}

class Pool{
	static Create<T extends new (...args:any)=>any>(t:T, ...params:ConstructorParamters<T>)
	
}

Pool.Create(Sub, ...)//此处会提示 Create(t:typeof Sub, tips:string):void

  • Title: TS映射类型技巧
  • Author: Janing
  • Created at : 2025-09-25 20:14:00
  • Updated at : 2025-09-25 20:34:14
  • Link: https://your-domain.com/TS映射类型技巧/
  • License: This work is licensed under CC BY-NC-SA 4.0.
On this page
TS映射类型技巧
  1. TypeScript 中的映射类型是什么
    1. 1. 概念介绍
    2. 2. 实现方法
  2. 映射类型的应用
    1. 1. Required 必选属性
    2. 2. Readonly 只读属性
    3. 3. Pick 选择指定属性
    4. 4. Omit 忽略指定属性
    5. 5. Exclude 从联合类型中排除指定类型
  3. 映射修饰符的应用
  4. 构造器参数