TypeScript 进阶：泛型、联合类型和类型守卫

泛型（Generics）

基础泛型

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}

const str = identity<string>("hello");
const num = identity<number>(42);

// 泛型接口
interface Box<T> {
  content: T;
}

const stringBox: Box<string> = { content: "hello" };
const numberBox: Box<number> = { content: 42 };

泛型约束

interface Lengthwise {
  length: number;
}

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

logLength("hello");  // ✅
logLength([1, 2, 3]); // ✅
logLength(42);        // ❌ 没有 length 属性

多泛型参数

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const result = merge({ name: "张三" }, { age: 25 });
// 类型：{ name: string } & { age: number }

联合类型（Union Types）

基础用法

type ID = string | number;

function printId(id: ID) {
  console.log(`ID: ${id}`);
}

printId(123);      // ✅
printId("ABC");    // ✅
printId(true);     // ❌

字面量联合

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function request(method: HttpMethod, url: string) {
  // ...
}

request("GET", "/api/users");  // ✅
request("PATCH", "/api/users"); // ❌

可区分联合

type Circle = { kind: "circle"; radius: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };

type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
  }
}

类型守卫（Type Guards）

typeof 守卫

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());  // value 是 string
  } else {
    console.log(value.toFixed(2));     // value 是 number
  }
}

instanceof 守卫

class Dog { bark() { console.log("Woof!"); } }
class Cat { meow() { console.log("Meow!"); } }

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

in 守卫

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

自定义类型守卫

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

function process(value: unknown) {
  if (isString(value)) {
    // value 被收窄为 string
    console.log(value.length);
  }
}

类型断言

// as 语法
const input = document.getElementById("input") as HTMLInputElement;
input.value = "hello";

// 尖括号语法（JSX 中不能用）
const input = <HTMLInputElement>document.getElementById("input");

实用工具类型

// Partial: 所有属性可选
interface User { id: number; name: string; }
type PartialUser = Partial<User>;

// Required: 所有属性必填
type RequiredUser = Required<PartialUser>;

// Pick: 选择部分属性
type UserId = Pick<User, "id">;

// Omit: 排除部分属性
type UserName = Omit<User, "id">;

// Record: 构建对象类型
type UserMap = Record<string, User>;

// ReturnType: 获取函数返回类型
type UserReturnType = ReturnType<() => User>;

掌握这些高级类型，你的 TypeScript 代码会更安全、更灵活！