第十四章-typescript性能优化与最佳实践

戒不掉你的傻笑づ692

540人浏览 · 2026-04-15 09:32:47

戒不掉你的傻笑づ692 · 2026-04-15 09:32:47 发布

第十四章：TypeScript 性能优化与最佳实践

本章将介绍 TypeScript 的性能优化技巧和最佳实践，帮助你编写更高效、更可维护的 TypeScript 代码。

类型推断

使用类型推断减少类型注解

TypeScript 可以根据初始值自动推断变量类型，减少不必要的类型注解：

// 推荐
let count = 0;
const name = "Alice";

// 不推荐
let count: number = 0;
const name: string = "Alice";

何时需要显式类型注解：

函数参数和返回值
复杂的对象类型
需要明确类型的场景

类型安全

避免使用 any 类型

any 类型会绕过 TypeScript 的类型检查，应该尽量避免使用：

// 推荐
function processValue(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value.toFixed(2);
}

// 不推荐
function processValue(value: any) {
  return value.toString();
}

使用类型守卫而不是类型断言

类型守卫比类型断言更安全，因为它们在运行时进行类型检查：

// 推荐
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function processValue(value: unknown) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  }
}

// 不推荐
function processValue(value: unknown) {
  console.log((value as string).toUpperCase());
}

使用 readonly 修饰符保护不可变数据

readonly 修饰符可以防止数据被意外修改：

// 推荐
interface Config {
  readonly apiUrl: string;
  readonly timeout: number;
}

// 不推荐
interface Config {
  apiUrl: string;
  timeout: number;
}

代码复用

使用泛型提高代码复用性

泛型可以让函数、接口和类适用于多种类型：

// 推荐
function identity<T>(arg: T): T {
  return arg;
}

// 不推荐
function identity(arg: any): any {
  return arg;
}

使用类型别名简化复杂类型

类型别名可以为复杂类型起一个有意义的名字：

// 推荐
type User = {
  id: number;
  name: string;
  email: string;
};

function getUser(id: number): User {
  return { id, name: "Alice", email: "alice@example.com" };
}

// 不推荐
function getUser(id: number): { id: number; name: string; email: string } {
  return { id, name: "Alice", email: "alice@example.com" };
}

类型选择

使用 interface 定义对象类型

对于对象类型，优先使用 interface：

// 推荐
interface User {
  name: string;
  age: number;
}

// 不推荐
type User = {
  name: string;
  age: number;
};

使用联合类型而不是重载

对于简单的类型选择，使用联合类型更简洁：

// 推荐
function greet(name: string | number): string {
  return `Hello, ${name}`;
}

// 不推荐
function greet(name: string): string;
function greet(name: number): string;
function greet(name: any): string {
  return `Hello, ${name}`;
}

现代 JavaScript 特性

使用可选链和空值合并

可选链（?.）和空值合并（??）可以简化代码：

// 推荐
const city = user?.address?.city ?? "Unknown";

// 不推荐
const city = user && user.address && user.address.city || "Unknown";

使用 const 断言创建精确的字面量类型

as const 断言可以创建更精确的类型：

// 推荐
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
} as const;

// 不推荐
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

高级类型技巧

使用 keyof 获取对象键的类型

// 推荐
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// 不推荐
function getProperty(obj: any, key: string): any {
  return obj[key];
}

使用映射类型创建新类型

// 推荐
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 不推荐
interface Readonly {
  // 手动定义每个属性
}

使用条件类型创建灵活的类型

// 推荐
type NonNullable<T> = T extends null | undefined ? never : T;

// 不推荐
type NonNullable = any;

使用类型工具简化类型定义

// 推荐
type PartialUser = Partial<User>;
type ReadonlyUser = Readonly<User>;

// 不推荐
type PartialUser = {
  id?: number;
  name?: string;
  email?: string;
};

性能优化

使用类型导入减少运行时开销

// 推荐
import type { User } from './types';

// 不推荐
import { User } from './types';

避免过度复杂的类型

// 推荐
type User = {
  id: number;
  name: string;
};

// 不推荐
type User<T extends { id: number; name: string }> = T & {
  email: string;
};

异步编程

为异步操作定义类型

// 推荐
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// 不推荐
async function fetchUser(id: number) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

代码质量

使用枚举代替魔法数字

// 推荐
enum Status {
  Pending = 'pending',
  Success = 'success',
  Error = 'error'
}

function updateStatus(status: Status) {
  // ...
}

// 不推荐
function updateStatus(status: string) {
  // ...
}

使用类型守卫确保类型安全

// 推荐
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value
  );
}

// 不推荐
function isUser(value: unknown): boolean {
  return true;
}

使用类型注解提高代码可读性

// 推荐
function calculateTotal(price: number, quantity: number, tax: number): number {
  return price * quantity * (1 + tax);
}

// 不推荐
function calculateTotal(price, quantity, tax) {
  return price * quantity * (1 + tax);
}

性能优化技巧

1. 减少类型检查

使用类型推断减少显式类型注解
避免过度复杂的类型定义
合理使用类型工具

2. 优化编译速度

配置合理的 include/exclude
使用项目引用
启用增量编译

3. 减少运行时开销

使用类型导入
避免运行时类型检查
合理使用装饰器

最佳实践总结

实践	说明
使用类型推断	减少不必要的类型注解
避免 any 类型	保持类型安全
使用类型守卫	比类型断言更安全
使用 readonly	保护不可变数据
使用泛型	提高代码复用性
使用类型别名	简化复杂类型
使用 interface	定义对象类型
使用联合类型	简化类型选择
使用可选链	简化属性访问
使用空值合并	提供默认值
使用 const 断言	创建精确类型
使用 keyof	获取对象键类型
使用映射类型	创建新类型
使用条件类型	创建灵活类型
使用类型工具	简化类型定义
使用类型导入	减少运行时开销
为异步操作定义类型	提高类型安全
使用枚举	代替魔法数字
使用类型守卫	确保类型安全
使用类型注解	提高代码可读性