TypeScript 中的泛型工具详解

TypeScript 提供了一系列强大的泛型工具类型,可以帮助我们更灵活地操作和转换类型。以下是主要的泛型工具类型及其用法:

1. 基础工具类型

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 PartialUser {
    name?: string;
    age?: number;
}

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

1.3. Readonly<T>

将类型 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 UserRecord = Record<'name' | 'email', string>;
// 等同于 { name: string; email: string; }

1.5. Pick<T,K>

从类型 T 中选取部分属性 K 来构造新类型。

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

type UserBasicInfo = Pick<User, 'name' | 'email'>;
// 等同于 { name: string; email: string; }

1.6. Omit<T,K>

从类型 T 中排除部分属性 K 来构造新类型。

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

type UserWithoutAge = Omit<User, 'age'>;
// 等同于 { name: string; email: string; }

2. 条件类型工具

2.1. Exclude<T,U>

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

type T = 'a' | 'b' | 'c';
type U = 'a' | 'b';

type Result = Exclude<T, U>;  // 'c'

2.2. Extract<T,U>

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

type T = 'a' | 'b' | 'c';
type U = 'a' | 'b';

type Result = Extract<T, U>;  // 'a' | 'b'

2.3. NonNullable<T>

从类型 T 中排除 null 和 undefined

type T = string | number | null | undefined;

type Result = NonNullable<T>;  // string | number

3. 函数相关工具

3.1. ReturnType<T>

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

type Fn = () => string;

type Result = ReturnType<Fn>;  // string

3.2. Parameters<T>

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

type Fn = (a: number, b: string) => void;

type Result = Parameters<Fn>;  // [a: number, b: string]

3.3. ConstructorParameters<T>

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

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

type Result = ConstructorParameters<typeof User>;  // [name: string, age: number]

3.4. InstanceType<T>

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

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

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

4. 其他实用工具

4.1. ThisParameterType<T>

提取函数类型 T 的 this 参数类型。

function toHex(this: Number) {
    return this.toString(16);
}

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

4.2. OmitThisParameter<T>

从函数类型 T 中移除 this 参数。

function toHex(this: Number) {
    return this.toString(16);
}

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

4.3. Awaited<T>

获取 Promise 的解析值类型(递归解包 Promise)。

type T = Promise<Promise<string>>;

type Result = Awaited<T>;  // string

5. 字符串操作工具

5.1. Uppercase<T>

将字符串字面量类型转换为大写。

type T = 'hello';

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

5.2. Lowercase<T>

将字符串字面量类型转换为小写。

type T = 'HELLO';

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

5.3. Capitalize<T>

将字符串字面量类型的首字母转换为大写。

type T = 'hello';

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

5.4. Uncapitalize<T>

将字符串字面量类型的首字母转换为小写。

type T = 'Hello';

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aiguangyuan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值