技术笔记
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#前端#技术