专栏笔记总结大全

目录介绍

• 01.常用实用工具
  • 1.1 Partial
  • 1.2 Required
  • 1.3 Readonly
  • 1.4 Record<K, T>
  • 1.5 Pick<T, K>
  • 1.6 Omit<T, K>
  • 1.7 Exclude<T, U>
  • 1.8 Extract<T, U>
  • 1.9 NonNullable
  • 1.10 ReturnType
  • 1.11 Parameters
  • 1.12 ConstructorParameters
  • 1.13 InstanceType
• 02.自定义实用工具
  • 2.1 创建可选属性
  • 2.2 创建只读属性
  • 2.3 创建不可为空属性
• 03.应用场景

01.常用实用工具

TypeScript 提供了一系列实用工具类型（Utility Types），用于简化类型操作和增强类型系统的灵活性。

这些工具类型可以帮助开发者更高效地处理类型转换、组合和操作。

1.1 Partial<T>

将类型 T 的所有属性变为可选。

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

type PartialUser = Partial<User>;
// 等价于 { name?: string; age?: number }

1.2 Required<T>

将类型 T 的所有属性变为必选。

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

type RequiredUser = Required<User>;
// 等价于 { name: string; age: number }

1.3 Readonly

将类型 T 的所有属性变为只读。

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

type ReadonlyUser = Readonly<User>;
// 等价于 { readonly name: string; readonly age: number }

1.4 Record<K, T>

创建一个对象类型，其键为 K，值为 T。

type UserRoles = Record<string, string>;
// 等价于 { [key: string]: string }

const roles: UserRoles = {
    admin: "Admin",
    user: "User",
};

1.5 Pick<T, K>

从类型 T 中选取指定的属性 K。

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

type UserNameAndAge = Pick<User, "name" | "age">;
// 等价于 { name: string; age: number }

1.6 Omit<T, K>

从类型 T 中排除指定的属性 K。

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

type UserWithoutEmail = Omit<User, "email">;
// 等价于 { name: string; age: number }

1.7 Exclude<T, U>

从类型 T 中排除可以赋值给 U 的类型。

type T = string | number | boolean;
type StringOrNumber = Exclude<T, boolean>;
// 等价于 string | number

1.8 Extract<T, U>

从类型 T 中提取可以赋值给 U 的类型。

type T = string | number | boolean;
type StringOrBoolean = Extract<T, string | boolean>;
// 等价于 string | boolean

1.9 NonNullable

从类型 T 中排除 null 和 undefined。

type T = string | number | null | undefined;
type NonNullableT = NonNullable<T>;
// 等价于 string | number

1.10 ReturnType

获取函数类型 T 的返回值类型。

function add(x: number, y: number): number {
    return x + y;
}

type AddReturnType = ReturnType<typeof add>;
// 等价于 number

1.11 Parameters

获取函数类型 T 的参数类型组成的元组。

function add(x: number, y: number): number {
    return x + y;
}

type AddParameters = Parameters<typeof add>;
// 等价于 [x: number, y: number]

1.12 ConstructorParameters

获取构造函数类型 T 的参数类型组成的元组。

class Person {
    constructor(public name: string, public age: number) {}
}

type PersonConstructorParams = ConstructorParameters<typeof Person>;
// 等价于 [name: string, age: number]

1.13 InstanceType

获取构造函数类型 T 的实例类型。

class Person {
    constructor(public name: string, public age: number) {}
}

type PersonInstance = InstanceType<typeof Person>;
// 等价于 Person

02.自定义实用工具

开发者可以结合 TypeScript 的类型操作符（如 keyof、in、extends 等）创建自定义的实用工具类型。

2.1 创建可选属性

type Optional<T> = {
    [K in keyof T]?: T[K];
};

2.2 创建只读属性

type Readonly<T> = {
    readonly [K in keyof T]: T[K];
};

2.3 创建不可为空属性

type NonNullableProperties<T> = {
    [K in keyof T]: NonNullable<T[K]>;
};

03.应用场景

• 表单处理：使用 Partial 表示部分提交的表单数据。
• API 响应：使用 Pick 或 Omit 选择或排除某些字段。
• 类型安全：使用 ReturnType 和 Parameters 确保函数类型的一致性。
• 状态管理：使用 Readonly 确保状态不可变。