TypeScript 高级类型技巧：让你的代码更类型安全

1. 条件类型

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false

2. 映射类型

// 将所有属性变为可选
type Partial<T> = {
  [K in keyof T]?: T[K];
};

// 将所有属性变为只读
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

//  Pick 和 Omit
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

3. 工具类型实战

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

// 创建用户时不需要 id
type CreateUser = Omit<User, "id">;

// 更新时可以全部可选
type UpdateUser = Partial<CreateUser>;

// 返回给用户时隐藏密码
type UserResponse = Omit<User, "password">;

4. 模板字面量类型

type EventName = 
  | "click"
  | "hover"
  | "scroll";

type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onHover" | "onScroll"

5. 类型守卫

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function process(value: string | number) {
  if (isString(value)) {
    return value.toUpperCase(); // 这里 value 是 string
  }
  return value.toFixed(2); // 这里 value 是 number
}

6. 泛型约束

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(arg: T): T {
  console.log(arg.length);
  return arg;
}

logLength("hello");     // ✅
logLength([1, 2, 3]);   // ✅
logLength(123);         // ❌

总结

掌握这些高级类型技巧可以让你的 TypeScript 代码更加类型安全、可维护。类型系统是你的朋友，善用它可以在编译时发现更多错误。