前端TypeScript高级技巧正确做法(让你的代码更安全)

毒舌时刻

前端用TypeScript？说白了，很多人第一反应就是：这不自己给自己找麻烦吗？

“Ja vaScript跑得挺好的，干嘛要上TypeScript”——结果呢？类型错误满天飞，一行代码改半天。

“TypeScript规则太多，束手束脚”——代价是代码维护起来像拆冲击波。

“只在关键地方用TypeScript，其他全扔给any”——那跟没用有什么区别？

事实是，TypeScript不是来给你添堵的，它是真正帮你兜底的。认清这一点，代码质量才能真正上去。

为什么你需要这个？

• 类型安全：编译阶段就能把类型错误揪出来，不用等到线上炸了才慌。
• 代码提示：IDE的智能补全直接拉满，开发效率自然水涨船高。
• 重构安全：重构的时候，类型系统就是你的安全带，敢动敢改。
• 可读性：类型本身就在说人话，代码意图一目了然。
• 可维护性：运行时错误少了，维护成本自然跟着降。

反面教材

// 反面教材：过度使用any
function processData(data: any) {  // 没有类型检查，容易出错
  return data.name.toUpperCase();
}

// 反面教材：类型定义不完整
interface User {
  id: number;
  name: string;
  // 缺少email等其他属性
}

// 反面教材：类型断言滥用
function getUser(id: number): User {
  // 不安全的类型断言
  return fetch(`/api/users/${id}`).then(res => res.json()) as unknown as User;
}

正确的做法

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

// 使用泛型约束
interface Lengthwise {
  length: number;
}

function loggingIdentity(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: 'zhangsan@example.com'
};
// TypeScript会自动推断user的类型

// 正确的做法：使用映射类型
interface Person {
  name: string;
  age: number;
}

// 生成只读类型
type ReadonlyPerson = Readonly;

// 生成可选类型
type PartialPerson = Partial;

// 生成必填类型
type RequiredPerson = Required;

// 正确的做法：使用条件类型
// 提取Promise的返回类型
type UnwrapPromise = T extends Promise ? U : T;

// 测试
async function fetchData(): Promise {
  return 'data';
}

// 类型会被推断为string
let data: UnwrapPromise>;

// 正确的做法：使用模板字面量类型
type EventName = `${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: