【TypeScript】条件类型

TypeScript 条件类型(Conditional Types)是一种高级类型工具,允许基于一个条件来选择两种不同的类型之一。条件类型的使用通常结合泛型类型参数,能够在类型系统中进行复杂的条件分支操作。条件类型的通用形式如下:

typescript 复制代码
T extends U ? X : Y
  • T 是待检查的类型。
  • U 是要检查是否可分配给 T 的类型。
  • 如果 T 可以赋值给 U,则条件类型的结果是 X,否则是 Y

1、可选属性的条件类型

考虑一个使用条件类型来创建可选属性的示例:

typescript 复制代码
type MakePropertyOptional<T, K extends keyof T> = {
    [P in K]: T[P];
} & {
    [P in Exclude<keyof T, K>]?: T[P];
};

type OriginalType = {
    name: string;
    age: number;
};

type UpdatedType = MakePropertyOptional<OriginalType, 'age'>;

定义了一个条件类型 MakePropertyOptional,它接受两个类型参数:T 是原始类型,K 是属性名的联合类型。它的工作原理如下:

  • MakePropertyOptional<OriginalType, 'age'>OriginalType 的属性按照 K 的分组分为两部分,一部分包括 age 属性,另一部分包括其余属性。
  • age 属性保持不变,而其他属性被标记为可选(?)。

2、联合类型的条件类型

考虑一个使用条件类型来过滤联合类型的示例:

typescript 复制代码
type FilterByType<T, U> = T extends U ? T : never;

type OriginalUnion = string | number | boolean;
type FilteredUnion = FilterByType<OriginalUnion, string>;

在这个示例中,FilterByType 条件类型将筛选出 OriginalUnion 联合类型中的符合条件的类型。在这里,我们只选择了字符串类型,所以 FilteredUnion 的类型将是 string

3、根据条件选择返回类型

这个示例演示了如何使用条件类型根据条件选择返回类型:

typescript 复制代码
type If<Condition extends boolean, Then, Else> = Condition extends true ? Then : Else;

type Result = If<true, 'Yes', 'No'>; // Result 类型为 'Yes'

If 是一个自定义条件类型,它根据 Condition 参数的值返回 ThenElse 中的一个。在这里,由于条件是 true,所以 Result 的类型是 'Yes'

这些示例展示了 TypeScript 条件类型的多种应用,包括属性操作、类型过滤和条件分支。它们允许你在类型级别进行复杂的判断和操作,提高了代码的类型安全性和可读性。 当使用 TypeScript 的条件类型时,你可以执行许多复杂的类型操作。以下是更多示例,每个示例都详细描述其目的和工作原理:

4、从对象类型中提取特定属性类型

假设你有一个包含不同属性类型的对象,并且你想从中提取特定属性的类型。你可以使用条件类型来实现这一点:

typescript 复制代码
type ExtractPropertyType<T, K> = T extends { [key: string]: infer U } ? U : never;

type MyObject = {
    name: string;
    age: number;
    isValid: boolean;
};

type AgeType = ExtractPropertyType<MyObject, 'age'>; // AgeType 类型为 number

在这个示例中,ExtractPropertyType 条件类型根据属性名 K 从对象类型 T 中提取对应属性的类型。

5、根据条件从联合类型中排除特定类型

有时你可能想从联合类型中排除特定的类型。条件类型可以帮助你实现这一点:

typescript 复制代码
type ExcludeType<T, U> = T extends U ? never : T;

type OriginalUnion = string | number | boolean;
type WithoutNumbers = ExcludeType<OriginalUnion, number>;

在这个示例中,ExcludeType 条件类型将从 OriginalUnion 联合类型中排除了 number 类型,所以 WithoutNumbers 的类型将是 string | boolean

6、根据数组元素类型构建新数组类型

你可以使用条件类型来构建新数组类型,其中的每个元素类型都是给定类型的属性类型:

typescript 复制代码
type ArrayElementType<T> = T extends (infer U)[] ? U : never;

type MyArray = [string, number, boolean];
type Element = ArrayElementType<MyArray>; // Element 类型为 string | number | boolean

在这个示例中,ArrayElementType 条件类型将从数组类型 T 中提取元素类型,这对于操作数组类型非常有用。

7、使用条件类型进行函数参数检查

条件类型可以用于检查函数的参数类型,并根据不同的条件执行不同的操作:

typescript 复制代码
type CheckParams<T> = T extends (...args: infer Args) => any
    ? Args
    : never;

function printLength(arr: number[]) {
    const length = arr.length;
    console.log(`Array length: ${length}`);
}

type Params = CheckParams<typeof printLength>; // Params 类型为 [number[]]

在这个示例中,CheckParams 条件类型从函数类型 T 中提取参数类型。这可以用来在编译时检查函数的参数类型。

这些示例展示了 TypeScript 条件类型的更多应用,包括属性提取、类型排除、数组操作和函数参数检查。条件类型可以帮助你在类型级别执行复杂的操作,从而增强代码的类型安全性和可维护性。

相关推荐
Tiffany_Ho7 小时前
【TypeScript】知识点梳理(三)
前端·typescript
看到请催我学习12 小时前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
天涯学馆18 小时前
Deno与Secure TypeScript:安全的后端开发
前端·typescript·deno
applebomb21 小时前
【2024】uniapp 接入声网音频RTC【H5+Android】Unibest模板下Vue3+Typescript
typescript·uniapp·rtc·声网·unibest·agora
读心悦1 天前
TS 中类型的继承
typescript
读心悦1 天前
在 TS 的 class 中,如何防止外部实例化
typescript
Small-K2 天前
前端框架中@路径别名原理和配置
前端·webpack·typescript·前端框架·vite
宏辉2 天前
【TypeScript】异步编程
前端·javascript·typescript
LJ小番茄3 天前
TS(type,属性修饰符,抽象类,interface)一次性全部总结
前端·javascript·vue.js·typescript
It'sMyGo3 天前
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
前端·javascript·typescript