当前位置：首页 > news >正文

【TypeScript】TypeScript 内置的工具类型（十四）

news 2025/10/24 11:12:01

本文中介绍的工具类型会跟前面几篇介绍的某些类型重复，本文是做对内置的工具类型做一个总结。

基础类型转换

`Partial<T>` - 所有属性变为可选

interface User {name: string;age: number;email: string;
}type PartialUser = Partial<User>;
// { name?: string; age?: number; email?: string }// 常用于更新操作
function updateUser(user: User, updates: Partial<User>) {return { ...user, ...updates };
}

`Required<T>` - 所有属性变为必选

interface Config {host?: string;port?: number;
}type RequiredConfig = Required<Config>;
// { host: string; port: number }

`Readonly<T>` - 所有属性变为只读

interface Todo {title: string;done: boolean;
}const todo: Readonly<Todo> = { title: 'Learn TS', done: false };
// todo.done = true; // ❌ 错误：只读属性

对象属性操作

`Pick<T, K>` - 选择特定属性

interface User {id: number;name: string;email: string;password: string;
}type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

`Omit<T, K>` - 排除特定属性

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

`Record<K, T>` - 创建对象类型

type Role = 'admin' | 'user' | 'guest';
type RolePermissions = Record<Role, string[]>;
// { admin: string[]; user: string[]; guest: string[] }const permissions: RolePermissions = {admin: ['read', 'write', 'delete'],user: ['read', 'write'],guest: ['read']
};

函数类型操作

`ReturnType<T>` 获取函数返回类型

function createUser() {return { id: 1, name: 'John' };
}type User = ReturnType<typeof createUser>;
// { id: number; name: string }

`Parameters<T>` - 获取函数参数类型

function login(username: string, password: string) {// ...
}type LoginParams = Parameters<typeof login>;
// [string, string]// 使用场景
function wrapper(...args: Parameters<typeof login>) {return login(...args);
}

`ConstructorParameters<T>` - 获取构造函数参数类型

class User {constructor(public name: string, public age: number) {}
}type UserParams = ConstructorParameters<typeof User>;
// [string, number]

`InstanceType<T>` - 获取构造函数实例类型

type UserInstance = InstanceType<typeof User>;
// User

`Extract<T, U>` - 从 T 中提取 U

type ExtractedTypes = Extract<AllTypes, 'a' | 'c'>;
// 'a' | 'c'

`NonNullable<T>` - 排除 null 和 undefined

type MaybeString = string | null | undefined;
type DefiniteString = NonNullable<MaybeString>;
// string

字符串操作类型

Uppercase<T> Lowercase<T> Capitalize<T> Uncapitalize<T>

type Greeting = 'hello world';
type Loud = Uppercase<Greeting>; // 'HELLO WORLD'
type Quiet = Lowercase<Greeting>; // 'hello world'
type Capitalized = Capitalize<Greeting>; // 'Hello world'
type Uncapitalized = Uncapitalize<'Hello'>; // 'hello'

Promise 类型

type Response = Promise<{ data: string }>;
type Data = Awaited<Response>;
// { data: string }// 嵌套 Promise 也能处理
type NestedPromise = Promise<Promise<number>>;
type UnwrappedNumber = Awaited<NestedPromise>;
// number

案例

// 1. API 响应类型处理
interface ApiResponse<T> {code: number;data: T;message: string;
}type JobData = { title: string; salary: string };
type JobResponse = ApiResponse<JobData>;// 提取 data 类型
type ExtractData<T> = T extends ApiResponse<infer U> ? U : never;
type Job = ExtractData<JobResponse>; // JobData// 2. Chrome API 消息类型
interface MessageMap {GET_DATA: { url: string };SAVE_DATA: { data: any };DELETE_DATA: { id: number };
}type MessageType = keyof MessageMap; // 'GET_DATA' | 'SAVE_DATA' | 'DELETE_DATA'
type MessagePayload<T extends MessageType> = MessageMap[T];// 3. 状态管理
interface State {user: User | null;loading: boolean;error: string | null;
}type StateUpdater = Partial<State>; // 部分更新
type ReadonlyState = Readonly<State>; // 只读状态// 4. 事件处理器类型
function handleClick(event: MouseEvent) {console.log(event.clientX);
}type ClickHandler = typeof handleClick;
type ClickEvent = Parameters<ClickHandler>[0]; // MouseEvent

最后详细介绍下ReturnType的法，对于setTimeout函数这么定义类型

ReturnType 是 TypeScript 的一个内置工具类型（Utility Type），用于获取函数的返回值类型。

let tempTimer: ReturnType<typeof setTimeout> | null = null;

这行代码的含义是：

typeof setTimeout - 获取 setTimeout 函数的类型
ReturnType - 获取 setTimeout 函数的返回值类型
| null - 表示这个变量可以是 setTimeout 的返回值类型或 null

在不同环境中，setTimeout 的返回值类型不同：

浏览器环境: 返回 number
Node.js 环境: 返回 NodeJS.Timeout 对象

使用ReturnType<typeof setTimeout>的好处是：

自动适配不同环境
类型安全，可以正确调用 clearTimeout(tempTimer)
代码更灵活，不需要手动指定具体类型

案例
测试地址：https://www.typescriptlang.org/zh/play

// 示例 1: 基础用法
function getUser() {return { name: 'John', age: 30 };
}type User = ReturnType<typeof getUser>; 
// User 类型为 { name: string; age: number }// 示例 2: 箭头函数
const getData = () => ({ id: 1, value: 'test' });
type Data = ReturnType<typeof getData>;
// Data 类型为 { id: number; value: string }// 示例 3: 异步函数
async function fetchData() {return { success: true };
}
type FetchResult = ReturnType<typeof fetchData>;
// FetchResult 类型为 Promise<{ success: boolean }>// 示例 4: 函数类型
type Fn = () => string;
type FnReturn = ReturnType<Fn>;
// FnReturn 类型为 string