TypeScript 5.0 是一个重要的里程碑版本，带来了许多令开发者兴奋的新特性。本文将深入解析这些新特性，帮助你快速掌握并在项目中应用。
装饰器 (Decorators) 正式稳定
经过多年的发展，装饰器终于在 TypeScript 5.0 中正式稳定。这意味着你可以放心地在生产环境中使用装饰器了。
function logged(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`调用方法 ${propertyKey} 参数:`, args);
const result = originalMethod.apply(this, args);
console.log(`方法 ${propertyKey} 返回:`, result);
return result;
};
}
class Calculator {
@logged
add(a: number, b: number): number {
return a + b;
}
}
const 断言的增强
TypeScript 5.0 对 const 断言进行了重要改进，使得类型推断更加精确。
// 之前的版本
const colors = ['red', 'green', 'blue'] as const;
// 类型: readonly ["red", "green", "blue"]
// TypeScript 5.0 的改进
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000,
retries: 3
} as const satisfies Config;
// 现在可以同时获得 const 断言的好处和类型检查
模板字面量类型的性能优化
模板字面量类型在 TypeScript 5.0 中得到了显著的性能提升，处理复杂字符串类型时更加高效。
type APIEndpoint<T extends string> = `/api/${T}`;
type UserEndpoints = APIEndpoint<'users' | 'profiles' | 'settings'>;
// 类型: "/api/users" | "/api/profiles" | "/api/settings"
// 更复杂的例子
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type APIRoute<Method extends HTTPMethod, Path extends string> =
`${Method} ${APIEndpoint<Path>}`;
type UserRoutes = APIRoute<HTTPMethod, 'users'>;
// 类型: "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users"
联合类型的缩小改进
TypeScript 5.0 在联合类型的类型缩小方面做了重要改进，特别是在处理复杂条件语句时。
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'square'; sideLength: number }
| { kind: 'triangle'; base: number; height: number };
function getArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
// TypeScript 5.0 能更好地推断这里的 shape 类型
return Math.PI * shape.radius ** 2;
case 'square':
return shape.sideLength ** 2;
case 'triangle':
return (shape.base * shape.height) / 2;
default:
// 更精确的 never 类型检查
const _exhaustive: never = shape;
return _exhaustive;
}
}
新的配置选项
TypeScript 5.0 引入了一些新的编译器选项，帮助开发者更好地控制编译行为。
--verbatimModuleSyntax
这个新选项确保模块语法的精确保留，对于需要精确控制模块输出的项目非常有用。
{
"compilerOptions": {
"verbatimModuleSyntax": true
}
}
--allowImportingTsExtensions
允许直接导入 .ts 和 .tsx 文件，在某些构建环境中很有用。
// 现在可以直接导入 .ts 文件
import { utils } from './utils.ts';
性能改进
TypeScript 5.0 在多个方面进行了性能优化：
1. 更快的类型检查
- 优化了联合类型和交集类型的处理
- 改进了条件类型的计算效率
- 减少了内存使用
2. 增量编译优化
// tsconfig.json
{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
}
}
3. 项目引用的改进
对于大型项目，项目引用的性能得到了显著提升。
实际应用示例
让我们看一个结合多个新特性的实际例子：
// 定义一个带有装饰器的服务类
@injectable()
class UserService {
constructor(
private database: Database,
private logger: Logger
) {}
@cached(300) // 缓存5分钟
@logged
async getUser(id: string): Promise<User | null> {
const query = `SELECT * FROM users WHERE id = ?` as const;
return this.database.queryOne(query, [id]);
}
@validateInput
async createUser(userData: CreateUserData): Promise<User> {
const user = await this.database.insert('users', userData);
this.logger.info(`创建用户: ${user.id}`);
return user;
}
}
// 使用模板字面量类型定义 API 路由
type UserRoutes = {
[K in `${HTTPMethod} /users${string}`]: RouteHandler;
};
// const 断言与 satisfies 结合使用
const userRoutes = {
'GET /users': UserService.prototype.getUsers,
'GET /users/:id': UserService.prototype.getUser,
'POST /users': UserService.prototype.createUser,
'PUT /users/:id': UserService.prototype.updateUser,
'DELETE /users/:id': UserService.prototype.deleteUser
} as const satisfies UserRoutes;
迁移指南
从 TypeScript 4.x 升级
- 更新 TypeScript 版本：
npm install -D typescript@5.0
- 检查配置文件：
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"strict": true,
"exactOptionalPropertyTypes": true
}
}
- 修复破坏性变更：
- 检查装饰器的使用
- 更新
lib配置 - 验证模块解析设置
常见问题
装饰器元数据
如果你使用装饰器元数据，需要安装 reflect-metadata：
npm install reflect-metadata
import 'reflect-metadata';
@Reflect.metadata('design:type', String)
property: string;
模块解析
确保你的模块解析设置正确：
{
"compilerOptions": {
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"noEmit": true
}
}
总结
TypeScript 5.0 是一个重要的版本，不仅稳定了装饰器功能，还在性能和类型系统方面做了重要改进。主要亮点包括：
- 装饰器正式稳定 - 可以安全地在生产环境使用
- const 断言增强 - 更精确的类型推断
- 性能优化 - 更快的编译和类型检查
- 新的配置选项 - 更灵活的编译控制
- 类型缩小改进 - 更智能的类型推断
这些改进使得 TypeScript 在大型项目中的表现更加出色，同时也让开发体验更加流畅。建议开发者尽快升级到 TypeScript 5.0，享受这些新特性带来的好处。
