Typescript 内置 23个泛型工具
date
Oct 10, 2025
slug
typescript-generic-tool
status
Published
tags
Typescript
summary
本文将带领大家学习并理解 Typescript 中 23 个泛型工具，并附有示例和练习题。
type
Post
序号 | 工具类型 | 意图（我想干嘛） | 直觉理解 / 关键词 |
01 | Partial<T> | 对象的属性不一定都有 | 把所有属性改为可选 ? |
02 | Required<T> | 确保所有属性都存在 | 把所有属性改为必选 |
03 | Readonly<T> | 不想让属性被修改 | 把所有属性改为只读 |
04 | Record<K, T> | 创建一个键值映射 | 相当于 { [key in K]: T } |
05 | Pick<T, K> | 只要部分属性 | 从 T 里挑出某些 key |
06 | Exclude<T, U> | 从联合类型里去掉某些类型 | T 中排除掉 U |
07 | Extract<T, U> | 从联合类型里保留某些类型 | T 中保留与 U 交集的类型 |
08 | Omit<T, K> | 不要某些属性 | 从 T 中排除 K |
09 | NonNullable<T> | 去掉 null 和 undefined | 过滤掉空类型 |
10 | Parameters<F> | 提取函数参数类型 | 得到 [参数1类型, 参数2类型, ...] |
11 | ConstructorParameters<F> | 提取构造函数参数类型 | 类似 Parameters，但用于构造函数 |
12 | ReturnType<F> | 提取函数返回值类型 | 得到函数的返回类型 |
13 | InstanceType<C> | 提取类实例类型 | 得到 new C() 的类型 |
14 | Awaited<T> | 拿到 Promise 里包的类型 | Promise<T> → T |
15 | ThisParameterType<F> | 提取函数的 this 类型 | 拿出函数声明中绑定的 this |
16 | OmitThisParameter<F> | 删除函数的 this 参数 | 让函数不再显式依赖 this |
17 | ThisType<T> | 声明对象字面量内部的 this 类型 | 给对象方法里的 this 加类型 |
18 | ReadonlyArray<T> | 不可变数组 | 数组变成只读版本 |
19 | Uppercase<S> | 字符串转大写 | "foo" → "FOO" |
20 | Lowercase<S> | 字符串转小写 | "FOO" → "foo" |
21 | Capitalize<S> | 首字母大写 | "hello" → "Hello" |
22 | Uncapitalize<S> | 首字母小写 | "Hello" → "hello" |
🧩 TypeScript 内置泛型工具示例 + 练习题
1️⃣ 对象属性操作系列
工具：
Partial / Required / Readonly / Pick / Omit / Record练习题：
- 创建一个类型
OptionalUser，使得User的所有属性可选。
- 创建一个类型
UserNameOnly，只保留name属性。
- 创建一个类型
UserWithoutAge，去掉age属性。
- 创建一个类型
Coordinates，键为"lat"和"lng"，值为number。
- 将
User的属性都改成只读。
2️⃣ 联合类型工具
工具：
Exclude / Extract / NonNullable练习题：
- 定义
T = "x" | "y" | "z"，创建类型WithoutX排除"x"。
- 创建类型
OnlyYOrZ，只保留"y" | "z"。
- 创建类型
NotNull，去掉null | undefined。
3️⃣ 函数类型工具
工具：
Parameters / ConstructorParameters / ReturnType / InstanceType练习题：
- 提取
add的参数类型到一个新类型。
- 提取
add的返回类型到一个新类型。
- 提取
Person构造函数参数类型。
- 提取
Person的实例类型。
4️⃣ 异步与 this 操作
工具：
Awaited / ThisParameterType / OmitThisParameter / ThisType练习题：
- 提取
Promise<number>的包裹类型。
- 提取函数
fn的this类型。
- 移除函数
fn的this参数。
- 定义一个对象类型，使用
ThisType给对象方法绑定this类型。
5️⃣ 不可变数组 & 字符串操作
工具：
ReadonlyArray / Uppercase / Lowercase / Capitalize / Uncapitalize练习题：
- 定义一个只读数字数组类型
Numbers.
- 将
"typescript"转成全大写类型。
- 将
"HELLO"转成全小写类型。
- 将
"hello world"首字母大写。
- 将
"HelloWorld"首字母小写。