技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

工具类型

Partial

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

// 所有属性变为可选
type PartialUser = Partial<User>;

function updateUser(user: User, updates: PartialUser): User {
  return { ...user, ...updates };
}

Required

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

// 所有属性变为必需
type RequiredUser = Required<User>;

let user: RequiredUser = {
  name: 'John',
  age: 25,
  email: 'john@example.com'
};

Readonly

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

// 所有属性变为只读
type ReadonlyUser = Readonly<User>;

let user: ReadonlyUser = {
  name: 'John',
  age: 25
};

// user.name = 'Jane'; // 错误

Pick

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

// 选择部分属性
type UserPreview = Pick<User, 'id' | 'name'>;

let preview: UserPreview = {
  id: 1,
  name: 'John'
};

Omit

interface User {
  id: number;
  name: string;
  password: string;
  email: string;
}

// 排除部分属性
type UserPublic = Omit<User, 'password'>;

let user: UserPublic = {
  id: 1,
  name: 'John',
  email: 'john@example.com'
};

Record

// 创建对象类型
type Role = 'admin' | 'user' | 'guest';

type Permissions = Record<Role, string[]>;

let permissions: Permissions = {
  admin: ['read', 'write', 'delete'],
  user: ['read', 'write'],
  guest: ['read']
};

Exclude

// 从联合类型中排除
type T1 = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c'
type T2 = Exclude<string | number | boolean, boolean>; // string | number

Extract

// 从联合类型中提取
type T1 = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // 'a'
type T2 = Extract<string | number | boolean, boolean>; // boolean

NonNullable

// 排除 null 和 undefined
type T1 = NonNullable<string | number | null | undefined>; // string | number
type T2 = NonNullable<string | null>; // string

ReturnType

// 获取函数返回值类型
function getUser() {
  return {
    id: 1,
    name: 'John',
    age: 25
  };
}

type User = ReturnType<typeof getUser>;
// { id: number; name: string; age: number }

Parameters

// 获取函数参数类型
function createUser(name: string, age: number, email: string) {
  return { name, age, email };
}

type Params = Parameters<typeof createUser>;
// [string, number, string]

function wrapper(...args: Params) {
  return createUser(...args);
}

ConstructorParameters

// 获取构造函数参数类型
class User {
  constructor(public name: string, public age: number) {}
}

type UserParams = ConstructorParameters<typeof User>;
// [string, number]

InstanceType

// 获取构造函数实例类型
class User {
  name: string;
  age: number;
}

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

ThisParameterType

// 获取函数 this 参数类型
function toHex(this: Number) {
  return this.toString(16);
}

type T = ThisParameterType<typeof toHex>; // Number

OmitThisParameter

// 移除函数 this 参数
function toHex(this: Number) {
  return this.toString(16);
}

type T = OmitThisParameter<typeof toHex>; // () => string

Uppercase

type T = Uppercase<'hello'>; // 'HELLO'

Lowercase

type T = Lowercase<'HELLO'>; // 'hello'

Capitalize

type T = Capitalize<'hello'>; // 'Hello'

Uncapitalize

type T = Uncapitalize<'Hello'>; // 'hello'

自定义工具类型

DeepPartial

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

interface User {
  name: string;
  address: {
    city: string;
    street: string;
  };
}

let user: DeepPartial<User> = {
  address: {
    city: 'Beijing'
  }
};

DeepReadonly

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

Mutable

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

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

type MutableUser = Mutable<User>;
// { name: string; age: number }
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
高级类型
Next
装饰器