大鹏人文1. 为什么选择TypeScript全栈开发
第一次接触TypeScript是在2016年，当时团队正在重构一个大型电商后台系统。JavaScript的弱类型特性让我们在维护过程中吃尽了苦头——一个拼写错误可能要运行到特定分支才会暴露，接口数据结构变更时要在十几个文件中手动检查。自从切换到TypeScript后，这些痛点都得到了显著改善。
TypeScript作为JavaScript的超集，最核心的价值在于类型安全。想象你正在搭建乐高积木，TypeScript就像提供了形状匹配的凹槽，确保每个零件都能严丝合缝地拼接。这种特性在全栈开发中尤为重要，因为你需要同时处理：
- 前端组件的数据流
- 后端API的输入输出
- 数据库模型定义
- 跨层数据传输
我常用的技术栈组合是React+Express+TypeORM，这个组合的亮点在于端到端类型共享。比如定义一个用户类型后，可以在前端表单校验、API路由参数、数据库实体中复用，修改时只需调整一处。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境搭建与项目初始化
2.1 开发环境配置
新手常犯的错误是全局安装TypeScript，这可能导致不同项目版本冲突。推荐使用以下方式：
bash复制# 在项目目录中
npm init -y
npm install typescript --save-dev
npx tsc --init
生成的tsconfig.json需要重点关注这些配置项：
json复制{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
}
}
2.2 全栈项目结构设计
这是我经过多个项目验证的目录结构：
code复制project/
├── client/ # 前端代码
│ ├── src/
│ └── tsconfig.json
├── server/ # 后端代码
│ ├── src/
│ └── tsconfig.json
├── shared/ # 共享类型定义
│ └── types.ts
└── package.json
关键技巧是在根目录的package.json中添加workspaces配置：
json复制{
"workspaces": [
"client",
"server",
"shared"
]
}
这样可以通过import { User } from '@shared/types'实现跨项目类型共享。
3. 核心类型系统实战
3.1 接口与类型别名
接口(interface)和类型别名(type)看似相似，但在全栈开发中有明确分工：
typescript复制// 适合定义DTO和数据模型
interface User {
id: number;
name: string;
email: string;
}
// 适合组合类型
type UserResponse = {
data: User;
meta: {
page: number;
total: number;
};
};
实际项目中我会用接口定义数据库实体，用类型别名处理API响应格式。
3.2 泛型在API层的应用
这是我在实际项目中封装的API响应工具：
typescript复制// shared/api-types.ts
export interface ApiResponse<T = any> {
code: number;
data: T;
message?: string;
}
// 使用示例
export function getUser(): Promise<ApiResponse<User>> {
return axios.get('/api/user');
}
这种模式让前端能准确知道返回的数据结构，配合axios拦截器还能实现统一的错误处理。
4. 前后端类型共享方案
4.1 共享类型定义
在shared/types.ts中定义核心类型：
typescript复制export interface Product {
id: string;
name: string;
price: number;
inventory: number;
}
export type CartItem = {
product: Product;
quantity: number;
};
4.2 后端API实现
使用Express+TypeScript的典型路由：
typescript复制import { Request, Response } from 'express';
import { Product } from '@shared/types';
const products: Product[] = [...];
app.get('/api/products', (req: Request, res: Response<Product[]>) => {
res.json(products);
});
app.post('/api/checkout',
(req: Request<{}, {}, CartItem[]>, res: Response<{ orderId: string }>) => {
// 实现下单逻辑
}
);
4.3 前端消费API
React组件中的类型安全请求：
typescript复制function ProductList() {
const [products, setProducts] = useState<Product[]>([]);
useEffect(() => {
axios.get<Product[]>('/api/products')
.then(res => setProducts(res.data));
}, []);
return (
<ul>
{products.map(p => (
<li key={p.id}>{p.name} - ${p.price}</li>
))}
</ul>
);
}
5. 数据库集成与类型安全
5.1 TypeORM实体定义
typescript复制// server/src/entities/User.ts
import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';
@Entity()
export class User {
@PrimaryGeneratedColumn()
id: number;
@Column()
name: string;
@Column({ unique: true })
email: string;
}
5.2 服务层类型转换
处理数据库实体与DTO的转换：
typescript复制// server/src/services/userService.ts
import { User } from '../entities/User';
import { CreateUserDto } from '../dtos';
export class UserService {
async createUser(dto: CreateUserDto): Promise<User> {
const user = new User();
user.name = dto.name;
user.email = dto.email;
return await user.save();
}
}
6. 高级类型技巧实战
6.1 类型守卫
处理联合类型时的类型收窄：
typescript复制function isAdmin(user: User | Admin): user is Admin {
return 'permissions' in user;
}
function showDashboard(user: User | Admin) {
if (isAdmin(user)) {
// 这里user会被推断为Admin类型
console.log(user.permissions);
}
}
6.2 模板字面量类型
定义路由路径类型：
typescript复制type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ApiRoute = `/api/${string}`;
function request(method: HttpMethod, url: ApiRoute) {
// 实现请求逻辑
}
// 正确使用
request('GET', '/api/products');
// 类型错误
request('PATCH', '/products');
7. 项目构建与部署
7.1 构建配置优化
在tsconfig.json中添加这些生产环境配置：
json复制{
"compilerOptions": {
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"sourceMap": false
}
}
7.2 容器化部署
Dockerfile的TypeScript优化配置：
dockerfile复制FROM node:16
WORKDIR /app
COPY package*.json ./
COPY tsconfig.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["node", "dist/main.js"]
8. 常见问题解决方案
8.1 第三方库类型缺失
遇到没有类型定义的库时，可以这样处理：
- 尝试安装社区维护的类型包：
bash复制npm install --save-dev @types/库名
- 对于没有类型的库，可以创建声明文件：
typescript复制// src/types/module.d.ts
declare module 'untyped-module' {
export function someFunction(arg: string): void;
}
8.2 类型声明合并
扩展第三方库的类型定义：
typescript复制// 扩展Express的Request类型
declare global {
namespace Express {
interface Request {
user?: {
id: string;
role: string;
};
}
}
}
9. 性能优化实践
9.1 增量编译
启用tsconfig.json中的增量编译：
json复制{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": "./.tsbuildinfo"
}
}
9.2 项目引用
对于大型项目，使用项目引用拆分代码：
json复制// tsconfig.base.json
{
"compilerOptions": {
"composite": true
},
"references": [
{ "path": "./packages/core" },
{ "path": "./packages/utils" }
]
}
10. 测试策略
10.1 单元测试类型检查
使用Jest时确保测试代码也通过类型检查：
typescript复制// __tests__/userService.test.ts
import { UserService } from '../services/userService';
describe('UserService', () => {
let service: UserService;
beforeEach(() => {
service = new UserService();
});
test('createUser should return user with id', async () => {
const user = await service.createUser({
name: 'Test',
email: 'test@example.com'
});
expect(user.id).toBeDefined();
});
});
10.2 接口契约测试
使用类型安全的API测试：
typescript复制import { ApiResponse } from '@shared/types';
test('GET /api/products returns valid structure', async () => {
const res = await request(app)
.get('/api/products');
const data: ApiResponse<Product[]> = res.body;
expect(data.code).toBe(200);
expect(Array.isArray(data.data)).toBe(true);
});
11. 项目重构技巧
11.1 渐进式迁移
将JavaScript项目逐步迁移到TypeScript：
- 重命名.js文件为.ts
- 逐步添加类型注解
- 配置allowJs选项
- 开启严格模式分阶段
11.2 类型提取策略
发现重复类型定义时：
typescript复制// 重构前
function getUser(): Promise<{ id: string; name: string }> {...}
function updateUser(user: { id: string; name: string }) {...}
// 重构后
type UserBasic = {
id: string;
name: string;
};
function getUser(): Promise<UserBasic> {...}
function updateUser(user: UserBasic) {...}
12. 调试技巧
12.1 源映射配置
确保调试时能定位到源码：
json复制{
"compilerOptions": {
"sourceMap": true,
"inlineSources": true
}
}
12.2 类型调试技巧
使用类型推导检查复杂类型：
typescript复制type ComplexType = ...;
// 鼠标悬停在DebugType上查看实际类型
type DebugType = ComplexType extends infer T ? T : never;
13. 团队协作规范
13.1 代码风格统一
推荐配置：
json复制{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true,
"noUnusedParameters": true
}
}
13.2 代码审查要点
审查TypeScript代码时重点关注：
- 是否滥用any类型
- 接口定义是否合理
- 类型复用程度
- 复杂类型的可读性
- 类型守卫使用是否恰当
14. 前端框架集成
14.1 React组件类型
定义带类型的函数组件：
typescript复制interface Props {
title: string;
count: number;
onIncrement?: () => void;
}
const Counter: React.FC<Props> = ({ title, count, onIncrement }) => {
return (
<div>
<h2>{title}</h2>
<span>{count}</span>
{onIncrement && <button onClick={onIncrement}>+</button>}
</div>
);
};
14.2 Vue组合式API
使用TypeScript的setup语法：
typescript复制<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(0); // 自动推断为Ref<number>
function increment() {
count.value++;
}
return { count, increment };
}
});
</script>
15. 后端框架深度集成
15.1 NestJS类型系统
利用装饰器实现类型安全：
typescript复制@Controller('users')
export class UsersController {
constructor(private readonly usersService: UsersService) {}
@Get(':id')
async findOne(@Param('id') id: string): Promise<User> {
return this.usersService.findOne(+id);
}
}
15.2 Express中间件类型
自定义中间件类型：
typescript复制import { RequestHandler } from 'express';
interface AuthRequest extends Request {
user: {
id: string;
role: string;
};
}
export const authMiddleware: RequestHandler<{}, any, any, {}, AuthRequest> =
(req, res, next) => {
// 实现认证逻辑
req.user = { id: '123', role: 'admin' };
next();
};
16. 数据库高级技巧
16.1 复杂查询类型
使用TypeORM的QueryBuilder保持类型安全：
typescript复制const users = await userRepository
.createQueryBuilder('user')
.leftJoinAndSelect('user.posts', 'post')
.where('user.age > :age', { age: 18 })
.orderBy('user.name', 'ASC')
.getMany(); // 返回类型为User[]
16.2 事务处理模式
类型安全的事务封装：
typescript复制async function runInTransaction<T>(
work: (manager: EntityManager) => Promise<T>
): Promise<T> {
return getManager().transaction(async manager => {
return await work(manager);
});
}
// 使用示例
await runInTransaction(async manager => {
const user = manager.create(User, { name: 'New' });
await manager.save(user);
return user;
});
17. 微服务架构应用
17.1 gRPC接口定义
使用protobuf生成类型：
proto复制syntax = "proto3";
service UserService {
rpc GetUser (UserRequest) returns (UserResponse);
}
message UserRequest {
string id = 1;
}
message UserResponse {
string id = 1;
string name = 2;
string email = 3;
}
17.2 消息队列类型
定义RabbitMQ消息类型：
typescript复制interface OrderMessage {
orderId: string;
userId: string;
items: Array<{
productId: string;
quantity: number;
}>;
}
channel.consume('orders', (msg) => {
if (msg) {
const content: OrderMessage = JSON.parse(msg.content.toString());
// 处理消息
}
});
18. 前端状态管理
18.1 Redux Toolkit类型
创建类型安全的store：
typescript复制import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
users: usersReducer,
posts: postsReducer
}
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
18.2 React Context模式
类型安全的Context实现：
typescript复制interface AuthContextType {
user: User | null;
login: (email: string, password: string) => Promise<void>;
logout: () => void;
}
const AuthContext = React.createContext<AuthContextType | null>(null);
function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth必须在AuthProvider内使用');
}
return context;
}
19. 性能监控集成
19.1 类型化监控指标
定义性能指标类型：
typescript复制interface PerformanceMetrics {
pageLoad: number;
apiResponseTimes: Record<string, number>;
memoryUsage: {
jsHeapSizeLimit: number;
totalJSHeapSize: number;
usedJSHeapSize: number;
};
}
function sendMetrics(metrics: PerformanceMetrics) {
// 发送到监控系统
}
19.2 错误跟踪集成
类型安全的错误处理：
typescript复制interface TrackedError extends Error {
code?: string;
context?: Record<string, unknown>;
isOperational?: boolean;
}
function trackError(error: TrackedError) {
// 错误上报逻辑
}
20. 持续集成流程
20.1 类型检查流水线
在CI中添加类型检查步骤：
yaml复制steps:
- name: Install dependencies
run: npm ci
- name: Type check
run: npx tsc --noEmit
- name: Run tests
run: npm test
20.2 依赖版本检查
使用类型安全的版本检查：
typescript复制interface DependencyCheck {
name: string;
current: string;
latest: string;
isOutdated: boolean;
}
function checkDependencies(): Promise<DependencyCheck[]> {
// 实现检查逻辑
}
21. 文档生成策略
21.1 TypeDoc集成
自动生成API文档：
bash复制npm install --save-dev typedoc
npx typedoc --out docs src/index.ts
21.2 示例代码验证
确保文档中的代码示例通过类型检查：
typescript复制// 在测试文件中验证示例
test('文档示例1', () => {
const example = () => {
// 从文档复制的示例代码
interface Point {
x: number;
y: number;
}
const p: Point = { x: 10, y: 20 };
return p;
};
expect(example()).toEqual({ x: 10, y: 20 });
});
22. 安全最佳实践
22.1 输入验证类型
定义安全的输入类型：
typescript复制type SanitizedString = string & { __brand: 'Sanitized' };
function sanitize(input: string): SanitizedString {
// 实现清理逻辑
return input.replace(/<script.*?>.*?<\/script>/gi, '') as SanitizedString;
}
function saveContent(content: SanitizedString) {
// 安全地保存内容
}
22.2 权限检查类型
类型安全的权限系统：
typescript复制type Permission = 'read' | 'write' | 'delete';
interface UserWithPermissions {
id: string;
permissions: Permission[];
}
function checkPermission(
user: UserWithPermissions,
required: Permission
): boolean {
return user.permissions.includes(required);
}
23. 国际化方案
23.1 类型化翻译系统
定义翻译键类型：
typescript复制type TranslationKey =
| 'home.title'
| 'home.subtitle'
| 'button.submit'
| 'button.cancel';
const translations: Record<TranslationKey, string> = {
'home.title': 'Welcome',
'home.subtitle': 'Enjoy your stay',
'button.submit': 'Submit',
'button.cancel': 'Cancel'
};
function t(key: TranslationKey): string {
return translations[key];
}
23.2 多语言资源类型
类型安全的语言包：
typescript复制interface LocaleResources {
common: {
buttons: {
ok: string;
cancel: string;
};
};
pages: {
home: {
title: string;
};
};
}
const en: LocaleResources = {
common: {
buttons: {
ok: 'OK',
cancel: 'Cancel'
}
},
pages: {
home: {
title: 'Home'
}
}
};
24. 可视化图表集成
24.1 图表数据类型
定义类型化的图表配置：
typescript复制interface ChartData<T = number | string> {
labels: string[];
datasets: Array<{
label: string;
data: T[];
backgroundColor?: string | string[];
}>;
}
function renderBarChart(data: ChartData<number>) {
// 渲染柱状图
}
function renderPieChart(data: ChartData<string>) {
// 渲染饼图
}
24.2 仪表盘组件
类型安全的仪表盘组件：
typescript复制interface DashboardProps {
widgets: Array<{
id: string;
type: 'chart' | 'metric' | 'table';
title: string;
data: unknown; // 具体类型根据widget类型确定
}>;
layout: {
columns: number;
rowHeight: number;
};
}
function Dashboard({ widgets, layout }: DashboardProps) {
// 实现仪表盘渲染
}
25. 移动端适配方案
25.1 响应式类型
定义响应式断点类型：
typescript复制type Breakpoint = 'mobile' | 'tablet' | 'desktop';
function useBreakpoint(): Breakpoint {
// 实现断点检测逻辑
return 'desktop';
}
function ResponsiveComponent() {
const bp = useBreakpoint();
return (
<div>
{bp === 'mobile' && <MobileView />}
{bp === 'tablet' && <TableView />}
{bp === 'desktop' && <DesktopView />}
</div>
);
}
25.2 平台特定代码
类型安全的平台检测：
typescript复制type Platform = 'ios' | 'android' | 'web';
function getPlatform(): Platform {
// 实现平台检测
return 'web';
}
const platformComponents: Record<Platform, React.ComponentType> = {
ios: IOSComponent,
android: AndroidComponent,
web: WebComponent
};
function PlatformComponent() {
const CurrentComponent = platformComponents[getPlatform()];
return <CurrentComponent />;
}
26. Web组件开发
26.1 自定义元素类型
定义类型安全的Web组件：
typescript复制declare global {
namespace JSX {
interface IntrinsicElements {
'my-component': {
'count'?: number;
'onIncrement'?: (e: CustomEvent) => void;
};
}
}
}
// 使用
<my-component
count={5}
onIncrement={(e) => console.log(e.detail)}
/>
26.2 Shadow DOM集成
类型化的Shadow DOM操作：
typescript复制interface ShadowRootWithStyles extends ShadowRoot {
adoptedStyleSheets: CSSStyleSheet[];
}
function createComponent(): HTMLElement {
const element = document.createElement('div');
const shadow = element.attachShadow({ mode: 'open' }) as ShadowRootWithStyles;
const sheet = new CSSStyleSheet();
sheet.replaceSync(':host { display: block; }');
shadow.adoptedStyleSheets = [sheet];
return element;
}
27. 浏览器API封装
27.1 类型化LocalStorage
安全的存储封装：
typescript复制type StorageKey = 'userToken' | 'darkMode' | 'lastVisited';
function getStorageItem<T>(key: StorageKey): T | null {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
}
function setStorageItem<T>(key: StorageKey, value: T): void {
localStorage.setItem(key, JSON.stringify(value));
}
// 使用
const token = getStorageItem<string>('userToken');
setStorageItem('darkMode', true);
27.2 Fetch API封装
类型安全的HTTP客户端：
typescript复制async function fetchJson<T = unknown>(
input: RequestInfo,
init?: RequestInit
): Promise<T> {
const response = await fetch(input, init);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json() as Promise<T>;
}
// 使用
interface User {
id: string;
name: string;
}
const user = await fetchJson<User>('/api/user/123');
28. Node.js工具开发
28.1 CLI工具类型
类型安全的命令行工具：
typescript复制import { Command } from 'commander';
interface CliOptions {
config?: string;
verbose?: boolean;
output?: string;
}
const program = new Command();
program
.option('-c, --config <path>', 'config file path')
.option('-v, --verbose', 'verbose output')
.option('-o, --output <dir>', 'output directory');
program.parse(process.argv);
const options = program.opts() as CliOptions;
if (options.verbose) {
console.log('Running in verbose mode');
}
28.2 文件系统操作
类型化的文件操作：
typescript复制interface FileStats {
path: string;
size: number;
modified: Date;
isDirectory: boolean;
}
async function getFileStats(path: string): Promise<FileStats> {
const stats = await fs.promises.stat(path);
return {
path,
size: stats.size,
modified: stats.mtime,
isDirectory: stats.isDirectory()
};
}
29. 算法与数据结构
29.1 类型安全的链表
实现泛型链表：
typescript复制class ListNode<T> {
constructor(
public value: T,
public next: ListNode<T> | null = null
) {}
}
class LinkedList<T> {
private head: ListNode<T> | null = null;
append(value: T): void {
const newNode = new ListNode(value);
if (!this.head) {
this.head = newNode;
return;
}
let current = this.head;
while (current.next) {
current = current.next;
}
current.next = newNode;
}
// 其他方法...
}
29.2 排序算法泛型
泛型快速排序实现：
typescript复制function quickSort<T>(arr: T[], compare: (a: T, b: T) => number): T[] {
if (arr.length <= 1) return arr;
const pivot = arr[0];
const left: T[] = [];
const right: T[] = [];
for (let i = 1; i < arr.length; i++) {
if (compare(arr[i], pivot) < 0) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return [...quickSort(left, compare), pivot, ...quickSort(right, compare)];
}
// 使用
const numbers = [5, 3, 8, 1, 2];
const sorted = quickSort(numbers, (a, b) => a - b);
30. 图形编程应用
30.1 Canvas类型操作
类型安全的Canvas绘图：
typescript复制function drawCircle(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
radius: number,
color: string
): void {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
if (ctx) {
drawCircle(ctx, 100, 100, 50, '#ff0000');
}
30.2 WebGL类型封装
类型化的WebGL程序：
typescript复制interface ShaderProgram {
program: WebGLProgram;
attributes: Record<string, number>;
uniforms: Record<string, WebGLUniformLocation | null>;
}
function createShaderProgram(
gl: WebGLRenderingContext,
vertexShaderSource: string,
fragmentShaderSource: string
): ShaderProgram {
// 实现着色器程序创建
return {
program,
attributes: {},
uniforms: {}
};
}
31. 测试工具开发
31.1 类型化测试数据
生成类型安全的测试数据：
typescript复制interface TestUser {
id: string;
name: string;
email: string;
age: number;
}
function createTestUser(overrides?: Partial<TestUser>): TestUser {
return {
id: 'user_' + Math.random().toString(36).substr(2, 9),
name: 'Test User',
email: 'test@example.com',
age: 25,
...overrides
};
}
// 使用
const adminUser = createTestUser({ name: 'Admin', age: 30 });
31.2 测试断言封装
类型安全的断言库：
typescript复制interface Assert {
<T>(actual: T, expected: T, message?: string): void;
deepEqual<T>(actual: T, expected: T, message?: string): void;
throws(fn: () => void, error?: Error | string | RegExp): void;
}
const assert: Assert = {
<T>(actual: T, expected: T, message?: string) {
if (actual !== expected) {
throw new Error(message || `Expected ${expected}, got ${actual}`);
}
},
deepEqual<T>(actual: T, expected: T, message?: string) {
if (JSON.stringify(actual) !== JSON.stringify(expected)) {
throw new Error(message || 'Deep equality check failed');
}
},
throws(fn, error) {
let threw = false;
try {
fn();
} catch (e) {
threw = true;
if (error) {
if (typeof error === 'string') {
if (e.message !== error) {
throw new Error(`Expected error message "${error}", got "${e.message}"`);
}
} else if (error instanceof RegExp) {
if (!error.test(e.message)) {
throw new Error(`Expected error message to match ${error}, got "${e.message}"`);
}
} else if (e instanceof error.constructor) {
if (e.message !== error.message) {
throw new Error(`Expected error "${error.message}", got "${e.message}"`);
}
}
}
}
if (!threw) {
throw new Error('Expected function to throw');
}
}
};
32. 实用工具类型
32.1 深度只读类型
实现深度只读类型：
typescript复制type DeepReadonly<T> = {
readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};
interface User {
name: string;
profile: {
age: number;
address: string;
};
}
const user: DeepReadonly<User> = {
name: 'Alice',
profile: {
age: 25,
address: '123 Main St'
}
};
// 以下代码会报错
// user.name = 'Bob';
// user.profile.age = 30;
32.2 条件类型工具
实用的条件类型：
typescript复制type Nullable<T> = T | null;
type Maybe<T> = T | undefined;
type ValueOf<T> = T[keyof T];
type Promisify<T> = T extends Promise<infer U> ? T : Promise<T>;
// 使用示例
type User = { name: string; age: number };
type UserValue = ValueOf<User>; // string | number
33. 设计模式实现
33.1 工厂模式
类型安全的工厂函数：
typescript复制interface Product {
name: string;
price: number;
description(): string;
}
class Book implements Product {
constructor(
public name: string,
public price: number,
public author: string
) {}
description(): string {
return `${this.name} by ${this.author}`;
}
}
class Electronics implements Product {
constructor(
public name: string,
public price: number,
public brand: string
) {}
description(): string {
return `${this.brand} ${this.name}`;
}
}
function createProduct<T extends Product>(
type: new (...args: any[]) => T,
...args: ConstructorParameters<typeof type>
): T {
return new type(...args);
}
// 使用
const book = createProduct(Book, 'TypeScript Guide', 29.99, 'John Doe');
const laptop = createProduct(Electronics, 'Laptop', 999.99, 'Apple');
33.2 观察者模式
类型安全的事件系统：
typescript复制type Listener<T> = (event: T) => void;
class EventEmitter<T> {
private listeners: Listener<T>[] = [];
addListener(listener: Listener<T>): void {
this.listeners.push(listener);
}
removeListener(listener: Listener<T>): void {
this.listeners = this.listeners.filter(l => l !== listener);
}
emit(event: T): void {
for (const listener of this.listeners) {
listener(event);
}
}
}
// 使用
interface UserEvent {
userId: string;
action: 'login' | 'logout';
}
const userEvents = new EventEmitter<UserEvent>();
userEvents.addListener(event => {
console.log(`User ${event.userId} ${event.action}`);
});
userEvents.emit({ userId: '123', action: 'login' });
34. 函数式编程
34.1 柯里化函数
类型安全的柯里化：
typescript复制function curry<T1, T2, R>(fn: (a: T1, b: T2) => R): (a: T1) => (b: T2) => R;
function curry<T1, T2, T3, R>(fn: (a: T1, b: T2, c: T3) => R): (a: T1) => (b: T2) => (c: T3) => R;
function curry(fn: (...args: any[]) => any): (...args: any[]) => any {
return function curried(...args: any[]) {
if (args.length >= fn.length) {
return fn(...args);
} else {
return (...moreArgs: any[]) => curried(...args, ...moreArgs);
}
};
}
// 使用
const add = (a: number, b: number) => a + b;
const curriedAdd = curry(add);
const addFive = curriedAdd(5);
console.log(addFive(3)); // 8
34.2 函数组合
类型安全的函数组合：
typescript复制function compose<T1, T2, T3>(
f: (x: T2) => T3,
g: (x: T1) => T2
): (x: T1) => T3 {
return (x) => f(g(x));
}
// 使用
const toUpperCase = (s: string) => s.toUpperCase();
const exclaim = (s: string) => s + '!';
const shout = compose(exclaim, toUpperCase);
console.log(shout('hello')); // "HELLO!"
35. 并发编程
35.1 类型化Worker
安全地与Web Worker通信：
typescript复制// worker.ts
interface WorkerMessage<T = any> {
type: string;
payload: T;
}
self.onmessage = (e: MessageEvent<WorkerMessage>) => {
if (e.data.type === 'CALCULATE') {
const result = doCalculation(e.data.payload);
self.postMessage({
type: 'RESULT',
payload: result
});
}
};
function doCalculation(input: number): number {
return input * 2;
}
// main.ts
const worker