技术笔记

TypeScript 高级类型体操指南

从泛型到条件类型,掌握 TypeScript 类型系统的进阶技巧

TypeScript前端技术

TypeScript 的类型系统非常强大,掌握高级类型技巧可以让你的代码更加安全和优雅。这篇文章带你走进 TypeScript 类型体操的世界。

泛型约束

interface HasId {

id: number;

}

function findById<T extends HasId>(items: T[], id: number): T | undefined {

return items.find(item => item.id === id);

}

条件类型

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true

type B = IsString<number>; // false

映射类型

type Readonly<T> = {

readonly [P in keyof T]: T[P];

};

type Optional<T> = {

[P in keyof T]?: T[P];

};

模板字面量类型

type EventName = `on${Capitalize<string>}`;

type CSSProperty = `-${string}`;

实用工具类型

TypeScript 内置了许多实用的工具类型:Partial、Required、Pick、Omit、Record、Exclude、Extract、ReturnType 等。

掌握这些高级类型技巧,能让你在 TypeScript 项目中写出更健壮、更优雅的代码。

返回文章列表
#TypeScript#前端#技术