# TypeScript高级特性解析：实战项目应用案例
一、类型系统进阶：从泛型到类型编程
1.1 泛型约束与类型推导实战
在TypeScript（TS）的类型系统中，泛型（Generics）是实现类型复用的核心工具。根据2023年State of JS调查报告，83%的TS开发者将泛型列为最常用的高级特性。我们通过电商系统的商品过滤功能来演示其应用：
// 定义泛型接口约束
interface Filter<T> {
(items: T[], predicate: (item: T) => boolean): T[];
}
// 实现价格过滤器
const priceFilter: Filter<Product> = (products, predicate) => {
return products.filter(predicate);
};
// 自动推导出T为number类型
function createRange<T>(min: T, max: T): T[] {
return [min, max];
}
const yearRange = createRange(2010, 2023); // number[]
通过类型参数约束（extends关键字），我们可以确保类型安全的同时保持灵活性。在复杂类型推导场景中，TS 4.7引入的Instantiation Expressions特性允许我们预先指定部分类型参数：
type ApiResponse<T> = { data: T; code: number };
// 预定义错误响应类型
type ErrorResponse = ApiResponse<{ message: string }>;
// 使用类型推导获取Promise返回值类型
type UnpackPromise<T> = T extends Promise<infer U> ? U : never;
1.2 条件类型与映射类型深度应用
在TS 4.1+版本中，条件类型（Conditional Types）与映射类型（Mapped Types）的组合使用可显著提升类型表达能力。以下是电商系统的典型应用场景：
// 构造商品属性类型
type Product = {
id: string;
name: string;
price: number;
variants?: Variant[];
};
// 创建可空版本的类型
type Nullable<T> = {
[K in keyof T]: T[K] | null;
};
// 条件类型实现类型守卫
type FilteredKeys<T, U> = {
[K in keyof T]: T[K] extends U ? K : never;
}[keyof T];
// 获取所有函数类型的属性名
type FunctionKeys = FilteredKeys<Product, Function>; // never
通过模板字面量类型（Template Literal Types），我们可以实现更精细的类型操作。在电商系统的权限控制模块中：
type Permission = 'read' | 'write' | 'delete';
type Resource = 'product' | 'order';
// 自动生成权限字符串类型
type FullPermission = `${Permission}_${Resource}`;
// "read_product" | "write_product" | ... | "delete_order"
二、装饰器与元编程实战
2.1 类装饰器实现DI容器
结合Experimental Decorators与reflect-metadata库，我们可以实现轻量级依赖注入：
// 定义装饰器工厂
function Injectable(constructor: Function) {
Reflect.defineMetadata('injectable', true, constructor);
}
@Injectable
class ProductService {
getProducts() { /* ... */ }
}
// 依赖解析逻辑
class Container {
static get<T>(target: new () => T): T {
if (Reflect.getMetadata('injectable', target)) {
return new target();
}
throw new Error('Target not injectable');
}
}
2.2 方法装饰器实现性能监控
通过Method Decorator实现AOP编程，为关键业务方法添加性能追踪：
function logPerformance(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = async function (...args: any[]) {
const start = performance.now();
try {
return await original.apply(this, args);
} finally {
console.log(`${key} executed in ${performance.now() - start}ms`);
}
};
}
class OrderService {
@logPerformance
async processOrder(order: Order) {
// 订单处理逻辑
}
}
三、工程化实践与配置优化
3.1 项目引用与复合编译
在monorepo架构中，通过TS Project References提升编译效率：
// tsconfig.base.json
{
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@common/*": ["packages/common/src/*"]
}
}
}
// packages/app/tsconfig.json
{
"references": [
{ "path": "../common" }
]
}
3.2 类型声明合并策略
通过Declaration Merging扩展第三方库类型定义：
// 扩展Express的Request类型
declare global {
namespace Express {
interface Request {
user?: {
id: string;
role: string;
};
}
}
}
// 使用扩展后的类型
app.get('/products', (req, res) => {
if (req.user?.role === 'admin') {
// 管理员逻辑
}
});
四、综合案例：电商系统类型设计
通过组合多种高级特性实现类型安全的购物车系统：
type Currency = 'USD' | 'EUR';
type Price<C extends Currency> = {
amount: number;
currency: C;
format: `${number} ${C}`;
};
type DiscountStrategy<T extends Product> = (products: T[]) => number;
class ShoppingCart<T extends Product> {
private items: T[] = [];
constructor(
private discountStrategy: DiscountStrategy<T>
) {}
get total(): Price<'USD'> {
const total = this.items.reduce((sum, item) =>
sum + item.price.amount, 0);
const discount = this.discountStrategy(this.items);
return {
amount: total - discount,
currency: 'USD',
format: `${total - discount} USD`
};
}
}
该设计通过泛型约束保证商品类型一致性，使用条件类型实现货币格式自动生成，结合策略模式实现灵活的价格计算逻辑。
TypeScript, 高级特性, 类型系统, 装饰器, 工程化实践, 类型编程
