#TypeScript
#开发技巧
#教程
💡 TypeScript 5.8 的 10 个实用技巧
TypeScript 5.8 带来了很多实用的新特性,这里分享 10 个我最喜欢的技巧!
技巧 1: 更精确的推断
// 之前
function createPoint(x: number, y: number) {
return { x, y }; // 返回类型:{ x: number; y: number; }
}
// 现在 - 支持泛型推断
function createPoint<T extends number>(x: T, y: T) {
return { x, y }; // 更精确的类型推断
}
技巧 2: 改进的 const 推断
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000,
} as const;
// config.apiUrl 的类型现在是字面量类型
// 而不是 string
技巧 3: 更好的错误边界
// 使用新的 satisfies 操作符
type Route = {
path: string;
component: string;
};
const routes = {
home: { path: '/', component: 'Home' },
about: { path: '/about', component: 'About' },
} satisfies Record<string, Route>;
技巧 4: 模板字面量类型
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = `/api/${string}`;
type ApiRequest = `${HttpMethod} ${Endpoint}`;
// 类型: "GET /api/users" | "POST /api/users" | ...
技巧 5: 条件类型优化
type ExtractPromise<T> = T extends Promise<infer U> ? U : T;
type Result = ExtractPromise<Promise<string>>; // string
技巧 6: 映射类型改进
type ReadonlyKeys<T> = {
readonly [K in keyof T]: T[K];
};
type PartialKeys<T> = {
[K in keyof T]?: T[K];
};
技巧 7: 工具类型组合
type AppUser = {
id: string;
name: string;
email: string;
password: string;
};
// 组合使用工具类型
type PublicUser = Omit<AppUser, 'password'>;
type UserUpdate = Partial<Pick<AppUser, 'name' | 'email'>>;
技巧 8: 类型守卫优化
function isString(value: unknown): value is string {
return typeof value === 'string';
}
function process(value: unknown) {
if (isString(value)) {
// value 在这里被推断为 string
return value.toUpperCase();
}
}
技巧 9: 泛型约束
type Numeric = number | bigint;
function add<T extends Numeric>(a: T, b: T): T {
return (a + b) as T;
}
add(1, 2); // number
add(1n, 2n); // bigint
技巧 10: 模块解析优化
// 使用新的模块解析策略
{
"compilerOptions": {
"moduleResolution": "bundler",
"module": "ESNext"
}
}
总结
这些技巧可以帮助你写出更类型安全、更易维护的 TypeScript 代码。建议在实际项目中逐步应用!
📚 更多技巧请参考 TypeScript 官方文档
3.4K 阅读
67 评论