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

基础类型转换

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