前端 TypeScript 高级技巧：提升代码安全与质量

正确的做法

// 正确的做法：使用泛型
function identity<T>(arg: T): T {
  return arg;
}

// 使用泛型约束
interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// 正确的做法：使用联合类型和类型守卫
type Shape = Circle | Square;
interface Circle {
  kind: 'circle';
  radius: number;
}
interface Square {
  kind: 'square';
  sideLength: number;
}
function getArea(shape: Shape): number {
  // 类型守卫
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.sideLength ** 2;
  }
}

// 正确的做法：使用类型推断
const user = {
  id: 1,
  name: '张三',
  email: '[email protected]'
};
// TypeScript 会自动推断 user 的类型

// 正确的做法：使用映射类型
interface Person {
  name: string;
  age: number;
}
// 生成只读类型
type ReadonlyPerson = Readonly<Person>;
// 生成可选类型
type PartialPerson = Partial<Person>;
// 生成必填类型
type RequiredPerson = Required<PartialPerson>;

// 正确的做法：使用条件类型
// 提取 Promise 的返回类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
// 测试
async function fetchData(): Promise<string> {
  return 'data';
}
// 类型会被推断为 string
let data: UnwrapPromise<ReturnType<typeof fetchData>>;

// 正确的做法：使用模板字面量类型
type EventName<T extends string> = `${T}Changed`;
type MouseEventName = EventName<'click' | 'mouseover' | 'mouseout'>;
// 类型为 'clickChanged' | 'mouseoverChanged' | 'mouseoutChanged'

// 正确的做法：使用类型别名和接口
// 类型别名
type UserID = number;
type UserName = string;
type Email = string;
// 接口
interface User {
  id: UserID;
  name: UserName;
  email: Email;
  createdAt: Date;
  updatedAt: Date;
}

// 正确的做法：使用枚举
enum Role {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest'
}
function checkPermission(role: Role): boolean {
  return role === Role.Admin;
}

// 正确的做法：使用命名空间
namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;
  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: