TypeScript 实用技巧总结

TypeScript 作为 JavaScript 的超集，为我们提供了强大的类型系统和开发工具支持。本文将总结一些在日常开发中常用的 TypeScript 技巧。

类型定义技巧

1. 类型推导

// 让 TypeScript 自动推导类型
const numbers = [1, 2, 3]; // 类型为 number[]
const first = numbers[0]; // 类型为 number

// 使用 const 断言
const colors = ['red', 'blue', 'green'] as const; // 类型为 readonly ['red', 'blue', 'green']

2. 类型守卫

// 类型守卫函数
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// 使用类型守卫
function processValue(value: unknown) {
  if (isString(value)) {
    // 这里 value 的类型被收窄为 string
    console.log(value.toUpperCase());
  }
}

实用类型工具

1. 常用工具类型

// Partial<T> - 将所有属性变为可选
type PartialUser = Partial<User>;

// Required<T> - 将所有属性变为必需
type RequiredUser = Required<User>;

// Pick<T, K> - 选择部分属性
type UserBasicInfo = Pick<User, 'name' | 'email'>;

// Omit<T, K> - 排除部分属性
type UserWithoutId = Omit<User, 'id'>;

2. 条件类型

// 条件类型示例
type IsString<T> = T extends string ? true : false;

// 分布式条件类型
type ToArray<T> = T extends any ? T[] : never;
type StringArray = ToArray<string>; // string[]
type NumberArray = ToArray<number>; // number[]

最佳实践

1. 使用类型别名和接口

   • 接口用于定义对象类型
   • 类型别名用于联合类型和复杂类型

2. 避免使用 any

   • 优先使用 unknown
   • 必要时使用类型断言

3. 利用类型推导

   • 让 TypeScript 自动推导类型
   • 只在必要时显式声明类型

4. 使用类型守卫

   • 编写类型守卫函数
   • 利用类型收窄提高类型安全性

常见问题解决

1. 处理可选属性

interface Config {
  name?: string;
  age?: number;
}

// 使用非空断言
function processConfig(config: Config) {
  const name = config.name!; // 非空断言
  // 或者使用可选链
  const age = config.age?.toString();
}

2. 处理联合类型

type Status = 'success' | 'error' | 'loading';

function handleStatus(status: Status) {
  switch (status) {
    case 'success':
      return '操作成功';
    case 'error':
      return '操作失败';
    case 'loading':
      return '加载中';
    default:
      // 确保处理所有可能的情况
      const _exhaustiveCheck: never = status;
      return _exhaustiveCheck;
  }
}

总结

TypeScript 的类型系统非常强大，合理使用这些技巧可以：

• 提高代码的可维护性
• 减少运行时错误
• 改善开发体验
• 提供更好的代码提示

建议在日常开发中多实践这些技巧，并根据项目需求选择合适的使用方式。