TypeScript高级技巧

运行时类型安全

使用Zod进行Schema验证

// 运行时类型安全

import { z } from 'zod';

// 定义Schema
const UserSchema = z.object({
  id: z.number().int().positive(),
  name: z.string().min(1).max(100),
  email: z.string().email(),
  age: z.number().int().min(0).max(150).optional(),
  role: z.enum(['admin', 'user', 'guest']).default('user'),
  createdAt: z.date().default(() => new Date()),
  metadata: z.record(z.unknown()).optional(),
});

// 推断TypeScript类型
type User = z.infer;

// 验证数据
function parseUser(data: unknown): User {
  return UserSchema.parse(data);  // 验证失败抛出错误
}

function safeParseUser(data: unknown): User | null {
  const result = UserSchema.safeParse(data);
  return result.success ? result.data : null;
}

// 异步验证
const AsyncUserSchema = UserSchema.extend({
  avatar: z.string().url().refine(
    async (url) => {
      // 验证URL可访问
      const response = await fetch(url, { method: 'HEAD' });
      return response.ok;
    },
    { message: 'Avatar URL is not accessible' }
  ),
});

// 转换类型
const UserInputSchema = z.object({
  name: z.string(),
  email: z.string().email(),
  age: z.string().transform((val) => parseInt(val, 10)),
});

// 组合Schema
const AddressSchema = z.object({
  street: z.string(),
  city: z.string(),
  zipCode: z.string(),
});

const UserWithAddressSchema = UserSchema.extend({
  address: AddressSchema,
});

// 数组验证
const UserListSchema = z.array(UserSchema);

// 联合类型
const ResultSchema = z.union([
  z.object({ success: z.literal(true), data: UserSchema }),
  z.object({ success: z.literal(false), error: z.string() }),
]);

// API响应类型
const ApiResponseSchema = (dataSchema: T) =>
  z.object({
    status: z.number(),
    message: z.string(),
    data: dataSchema,
  });

const UserResponseSchema = ApiResponseSchema(UserSchema);
type UserResponse = z.infer;

branded types（品牌类型）

// 品牌类型：在结构类型系统中实现名义类型

declare const __brand: unique symbol;

type Brand = T & { [__brand]: B };

// 定义品牌类型
type UserId = Brand;
type PostId = Brand;
type Email = Brand;

// 创建品牌类型值
function createUserId(id: string): UserId {
  return id as UserId;
}

function createPostId(id: string): PostId {
  return id as PostId;
}

// 使用
const userId = createUserId('user-123');
const postId = createPostId('post-456');

// 类型错误！不能混用
function getUser(id: UserId): User { /* ... */ }
getUser(userId);  // OK
getUser(postId);  // Error: Argument of type 'PostId' is not assignable to parameter of type 'UserId'

// 验证品牌类型
function isEmail(value: string): value is Email {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

function sendEmail(to: Email, subject: string) {
  // 确保to是验证过的Email类型
}

const email = 'test@example.com';
if (isEmail(email)) {
  sendEmail(email, 'Hello');  // OK
}

// 更安全的品牌类型模式
type Validated = Brand;

interface FormData {
  email: string;
  password: string;
}

function validateForm(data: FormData): Validated | null {
  if (data.email.includes('@') && data.password.length >= 8) {
    return data as Validated;
  }
  return null;
}

function submitForm(data: Validated) {
  // 只能提交验证过的数据
}

设计模式与架构

依赖注入类型安全

// 类型安全的依赖注入

// 服务令牌
type ServiceToken = symbol & { __type: T };

function createToken(name: string): ServiceToken {
  return Symbol(name) as ServiceToken;
}

// 容器接口
interface Container {
  register(token: ServiceToken, instance: T): void;
  resolve(token: ServiceToken): T;
}

// 实现
class ServiceContainer implements Container {
  private services = new Map();
  
  register(token: ServiceToken, instance: T): void {
    this.services.set(token, instance);
  }
  
  resolve(token: ServiceToken): T {
    const service = this.services.get(token);
    if (!service) {
      throw new Error(`Service not found: ${String(token)}`);
    }
    return service as T;
  }
}

// 定义服务
interface IUserService {
  getUser(id: string): Promise;
}

interface ILogger {
  log(message: string): void;
}

// 创建令牌
const UserServiceToken = createToken('UserService');
const LoggerToken = createToken('Logger');

// 使用
const container = new ServiceContainer();

container.register(LoggerToken, console);
container.register(UserServiceToken, new UserService());

// 类型安全的解析
const userService = container.resolve(UserServiceToken);
const logger = container.resolve(LoggerToken);

事件总线类型安全

// 类型安全的事件总线

// 事件映射
type EventMap = {
  'user:login': { userId: string; timestamp: Date };
  'user:logout': { userId: string };
  'post:created': { postId: string; authorId: string };
  'error': { message: string; code: number };
};

// 类型安全的事件总线
class TypedEventBus> {
  private listeners: {
    [K in keyof Events]?: Set<(payload: Events[K]) => void>;
  } = {};
  
  on(
    event: K,
    listener: (payload: Events[K]) => void
  ): () => void {
    if (!this.listeners[event]) {
      this.listeners[event] = new Set();
    }
    this.listeners[event]!.add(listener);
    
    return () => {
      this.listeners[event]!.delete(listener);
    };
  }
  
  emit(event: K, payload: Events[K]): void {
    this.listeners[event]?.forEach(listener => listener(payload));
  }
  
  once(
    event: K,
    listener: (payload: Events[K]) => void
  ): void {
    const onceListener = (payload: Events[K]) => {
      listener(payload);
      this.off(event, onceListener);
    };
    this.on(event, onceListener);
  }
  
  off(
    event: K,
    listener: (payload: Events[K]) => void
  ): void {
    this.listeners[event]?.delete(listener);
  }
}

// 使用
const eventBus = new TypedEventBus();

// 类型安全的事件监听
eventBus.on('user:login', ({ userId, timestamp }) => {
  console.log(`User ${userId} logged in at ${timestamp}`);
});

// 类型安全的事件触发
eventBus.emit('user:login', {
  userId: '123',
  timestamp: new Date(),
});

// 错误：类型不匹配
eventBus.emit('user:login', {
  userId: '123',
  // timestamp: 'now',  // Error: Type 'string' is not assignable to type 'Date'
});

状态机类型

// 类型安全的状态机

type StateMachineConfig = {
  initial: State;
  states: {
    [S in State]: {
      on?: {
        [E in Event]?: State | { target: State; action?: () => void };
      };
      entry?: () => void;
      exit?: () => void;
    };
  };
};

class StateMachine<
  State extends string,
  Event extends string
> {
  private currentState: State;
  
  constructor(private config: StateMachineConfig) {
    this.currentState = config.initial;
  }
  
  getState(): State {
    return this.currentState;
  }
  
  send(event: Event): void {
    const stateConfig = this.config.states[this.currentState];
    const transition = stateConfig.on?.[event];
    
    if (!transition) return;
    
    const targetState = typeof transition === 'string' 
      ? transition 
      : transition.target;
    
    // 执行exit动作
    stateConfig.exit?.();
    
    // 执行transition action
    if (typeof transition === 'object') {
      transition.action?.();
    }
    
    // 切换状态
    this.currentState = targetState;
    
    // 执行entry动作
    this.config.states[targetState].entry?.();
  }
}

// 定义状态机
type TrafficLightState = 'green' | 'yellow' | 'red';
type TrafficLightEvent = 'TIMER' | 'POWER_OUTAGE';

const trafficLightMachine = new StateMachine({
  initial: 'green',
  states: {
    green: {
      on: { TIMER: 'yellow' },
      entry: () => console.log('Green light!'),
    },
    yellow: {
      on: { TIMER: 'red' },
      entry: () => console.log('Yellow light!'),
    },
    red: {
      on: { TIMER: 'green' },
      entry: () => console.log('Red light!'),
    },
  },
});

// 使用
trafficLightMachine.send('TIMER');  // OK
trafficLightMachine.send('POWER_OUTAGE');  // OK（虽然没有定义，但类型允许）
// trafficLightMachine.send('UNKNOWN');  // Error: Argument of type '"UNKNOWN"' is not assignable

架构决策总结

总结

TypeScript的类型系统是图灵完备的，能够表达极其复杂的类型关系。但类型的终极目的是服务于代码质量和开发体验，而非炫技。

掌握高级类型技巧后，应该将其应用于实际架构设计：构建类型安全的API层、设计领域模型、实现可靠的依赖注入。让类型成为团队的共同语言，提升整体开发效率和代码可靠性。