Performance optimization tips

TypeScript, as a superset of JavaScript, can significantly improve code maintainability in large-scale projects, but performance issues still require attention. From the type system to compilation configuration and runtime optimizations, applying techniques judiciously can greatly enhance execution efficiency.

Type System Optimization

Precise type definitions not only reduce runtime errors but also help the compiler generate more efficient code. Avoid overusing the any type, as it completely bypasses type checking:

// Bad practice: loses type safety
function processData(data: any) {
  return data.map(item => item * 2)
}

// Good practice: use generic constraints
function processData<T extends number>(data: T[]): T[] {
  return data.map(item => item * 2)
}

For large object types, prefer interface inheritance over repetitive definitions:

interface BaseUser {
  id: number
  name: string
}

interface AdminUser extends BaseUser {
  permissions: string[]
}

Compilation Configuration Tuning

Key parameters in tsconfig.json directly impact output code quality:

{
  "compilerOptions": {
    "target": "ES2020", // Choose the highest version based on the target environment
    "module": "ESNext", // Enable Tree Shaking
    "strict": true,     // Enable all strict checks
    "noUnusedLocals": true, // Remove unused variables
    "importHelpers": true  // Reduce duplicate utility functions
  }
}

Enabling the incremental option can significantly speed up subsequent compilations:

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

Reducing Runtime Overhead

Avoid using decorators and other metaprogramming features in hot-path code:

// Bad practice: decorators increase runtime overhead
class HeavyClass {
  @logMethod
  expensiveOperation() { /*...*/ }
}

// Good practice: call utility functions directly
class LightClass {
  expensiveOperation() {
    log('operation start')
    // ...core logic
  }
}

For frequently called functions, use type assertions instead of full type checking:

interface Point {
  x: number
  y: number
}

function distance(p: Point) {
  // No need for full type validation at runtime
  const {x, y} = p as Point
  return Math.sqrt(x*x + y*y)
}

Data Structure Optimization

Choosing the right data structures can significantly improve algorithm efficiency:

// Use Map for frequent lookups
const userCache = new Map<number, User>()

// Use Set for unique values
const activeUserIds = new Set<string>()

For immutable data, use const assertions to help the compiler optimize:

const ROLES = ['admin', 'editor', 'viewer'] as const
type Role = typeof ROLES[number]  // Generates a union type

Async Code Optimization

Designing async flows properly can reduce unnecessary waiting:

// Execute independent tasks in parallel
async function fetchAllData() {
  const [users, products] = await Promise.all([
    fetchUsers(),
    fetchProducts()
  ])
  return { users, products }
}

Avoid unnecessary try/catch nesting when using async/await:

// Improved error handling
async function loadData() {
  const result = await fetchData().catch(handleError)
  if (!result) return
  
  // Normal processing logic
}

Memory Management Techniques

Release references to large objects promptly to prevent memory leaks:

class DataProcessor {
  private cache: bigData | null = null
  
  process() {
    const data = this.cache || this.loadData()
    // ...processing logic
    this.cleanCache() // Explicit cleanup
  }
  
  private cleanCache() {
    this.cache = null
  }
}

For short-term heavy computations, consider offloading to Web Workers:

// Main thread
const worker = new Worker('./compute.worker.ts')
worker.postMessage(largeDataSet)

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

Module Loading Strategy

Dynamic imports can significantly improve initial load speed:

// Lazy-load heavy modules
async function handleComplexOperation() {
  const { complexAlgorithm } = await import('./heavy-module')
  return complexAlgorithm(input)
}

Configure sideEffects properly to help bundlers optimize:

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

Type Checking Acceleration

Large projects can use project references to reduce compilation time:

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

For non-production code like test files, configure looser rules separately:

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

Toolchain Optimization

Use tsc --watch with nodemon for efficient development cycles:

# Run type checking and execution in parallel
concurrently "tsc --watch" "nodemon dist/app.js"

For monorepo projects, adopt incremental build strategies:

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

Browser-Specific Optimizations

Type optimizations for DOM operations:

// Specify element types precisely to avoid runtime checks
const canvas = document.getElementById('drawing') as HTMLCanvasElement
const ctx = canvas.getContext('2d')!

Use requestAnimationFrame to optimize rendering performance:

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // ...drawing logic
  requestAnimationFrame(animate)
}

Server-Side Optimization Techniques

Optimize stream processing in Node.js environments:

import { createReadStream } from 'fs'

function processLargeFile() {
  return new Promise((resolve) => {
    createReadStream('huge.log')
      .on('data', chunk => {
        // Process in chunks
      })
      .on('end', resolve)
  })
}

Prefer Buffer over string operations where appropriate:

// More efficient for binary data processing
function mergeBuffers(buffers: Buffer[]) {
  return Buffer.concat(buffers)
}