性能优化技巧

TypeScript 作为 JavaScript 的超集，在大型项目中能显著提升代码可维护性，但性能问题仍需关注。从类型系统到编译配置，再到运行时优化，合理运用技巧可大幅提升执行效率。

类型系统优化

精确的类型定义不仅能减少运行时错误，还能帮助编译器生成更高效的代码。避免过度使用 any 类型，它会完全跳过类型检查：

// 反例：丧失类型安全
function processData(data: any) {
  return data.map(item => item * 2)
}

// 正例：使用泛型约束
function processData<T extends number>(data: T[]): T[] {
  return data.map(item => item * 2)
}

对于大型对象类型，优先使用接口继承而非重复定义：

interface BaseUser {
  id: number
  name: string
}

interface AdminUser extends BaseUser {
  permissions: string[]
}

编译配置调优

tsconfig.json 中的关键参数直接影响输出代码质量：

{
  "compilerOptions": {
    "target": "ES2020", // 根据目标环境选择最高版本
    "module": "ESNext", // 启用 Tree Shaking
    "strict": true,     // 启用所有严格检查
    "noUnusedLocals": true, // 删除未使用变量
    "importHelpers": true  // 减少重复工具函数
  }
}

启用 incremental 选项可显著加速后续编译：

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./build/.tsbuildinfo"
  }
}

减少运行时开销

避免在热路径代码中使用装饰器等元编程特性：

// 反例：装饰器增加运行时开销
class HeavyClass {
  @logMethod
  expensiveOperation() { /*...*/ }
}

// 正例：直接调用工具函数
class LightClass {
  expensiveOperation() {
    log('operation start')
    // ...核心逻辑
  }
}

对于频繁调用的函数，使用类型断言替代完整类型检查：

interface Point {
  x: number
  y: number
}

function distance(p: Point) {
  // 运行时无需验证完整类型
  const {x, y} = p as Point
  return Math.sqrt(x*x + y*y)
}

数据结构优化

选择合适的数据结构能显著提升算法效率：

// 频繁查找使用 Map
const userCache = new Map<number, User>()

// 需要唯一值时使用 Set
const activeUserIds = new Set<string>()

对于不可变数据，使用 const assertions 帮助编译器优化：

const ROLES = ['admin', 'editor', 'viewer'] as const
type Role = typeof ROLES[number]  // 生成联合类型

异步代码优化

合理设计异步流程可减少不必要的等待：

// 并行执行独立任务
async function fetchAllData() {
  const [users, products] = await Promise.all([
    fetchUsers(),
    fetchProducts()
  ])
  return { users, products }
}

使用 async/await 时避免不必要的 try/catch 嵌套：

// 改进的错误处理方式
async function loadData() {
  const result = await fetchData().catch(handleError)
  if (!result) return
  
  // 正常处理逻辑
}

内存管理技巧

及时释放大对象引用防止内存泄漏：

class DataProcessor {
  private cache: bigData | null = null
  
  process() {
    const data = this.cache || this.loadData()
    // ...处理逻辑
    this.cleanCache() // 显式清理
  }
  
  private cleanCache() {
    this.cache = null
  }
}

对于短期大量计算，考虑使用 Web Worker 分流：

// 主线程
const worker = new Worker('./compute.worker.ts')
worker.postMessage(largeDataSet)

// compute.worker.ts
self.onmessage = ({data}) => {
  const result = heavyCompute(data)
  self.postMessage(result)
}

模块加载策略

动态导入可显著提升首屏加载速度：

// 按需加载重型模块
async function handleComplexOperation() {
  const { complexAlgorithm } = await import('./heavy-module')
  return complexAlgorithm(input)
}

合理配置 sideEffects 帮助打包工具优化：

// package.json
{
  "sideEffects": [
    "**/*.css",
    "**/*.global.ts"
  ]
}

类型检查加速

大型项目可配置项目引用缩短编译时间：

// tsconfig.json
{
  "references": [
    { "path": "./core" },
    { "path": "./ui" }
  ]
}

对于测试文件等非生产代码，单独配置宽松规则：

// tsconfig.test.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noUnusedLocals": false,
    "strictNullChecks": false
  }
}

工具链优化

使用 tsc --watch 配合 nodemon 实现高效开发循环：

# 并行执行类型检查和运行
concurrently "tsc --watch" "nodemon dist/app.js"

对于 monorepo 项目，采用增量构建策略：

// lerna.json
{
  "command": {
    "build": {
      "ignoreChanges": ["**/*.md", "**/*.test.ts"]
    }
  }
}

浏览器特定优化

针对 DOM 操作的类型优化：

// 精确指定元素类型避免运行时检查
const canvas = document.getElementById('drawing') as HTMLCanvasElement
const ctx = canvas.getContext('2d')!

使用 requestAnimationFrame 优化渲染性能：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // ...绘制逻辑
  requestAnimationFrame(animate)
}

服务端优化技巧

Node.js 环境下注意流处理优化：

import { createReadStream } from 'fs'

function processLargeFile() {
  return new Promise((resolve) => {
    createReadStream('huge.log')
      .on('data', chunk => {
        // 分块处理
      })
      .on('end', resolve)
  })
}

合理使用 Buffer 替代字符串操作：

// 二进制数据处理更高效
function mergeBuffers(buffers: Buffer[]) {
  return Buffer.concat(buffers)
}