当前位置：首页 > news >正文

《TypeScript 7天速成系列》第3天：TypeScript高级类型通关秘籍：泛型+联合+交叉类型实战

news 来源：原创 2025/4/29 6:14:55

TypeScript 的类型系统是其最强大的特性之一，但也是许多开发者感到困惑的地方。今天我们就来破解 TypeScript 中最难的类型系统，掌握泛型、联合类型和交叉类型的使用技巧。

一、泛型函数与泛型接口

泛型是 TypeScript 中创建可重用组件的重要工具，它允许我们创建可以处理多种类型而不是单一类型的组件。

function identity<T>(arg: T): T {
  return arg;
}

// 使用方式
let output1 = identity<string>("myString");  // 显式指定类型
let output2 = identity("myString");          // 类型推断

泛型也可以应用于接口：

interface GenericIdentityFn<T> {
  (arg: T): T;
}

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

二、类型别名与联合类型

联合类型表示一个值可以是几种类型之一，而类型别名可以给类型起一个新名字。

type Result = 
  | { success: true; data: string } 
  | { success: false; error: string };

function handleResult(result: Result) {
  if (result.success) {
    console.log(result.data); // 这里可以安全访问data
  } else {
    console.log(result.error); // 这里可以安全访问error
  }
}

联合类型与类型别名的结合使用，可以创建出非常灵活且类型安全的代码结构。

三、类型守卫与类型断言

类型守卫和类型断言是 TypeScript 中处理类型不确定性的重要工具。

// typeof 类型守卫
if (typeof x === "string") {
  console.log(x.toUpperCase()); // 在这个块中，x被确定为string类型
}

// 自定义类型守卫
function isString(test: any): test is string {
  return typeof test === "string";
}

if (isString(x)) {
  console.log(x.toUpperCase());
}

// 类型断言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

四、交叉类型实战

交叉类型是将多个类型合并为一个类型，包含了所有类型的特性。

interface Person {
  name: string;
  age: number;
}

interface Employee {
  company: string;
  position: string;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John",
  age: 30,
  company: "Tech Corp",
  position: "Developer"
};

五、高级类型组合应用

让我们看一个综合应用的例子：

type NetworkLoadingState = {
  state: "loading";
};

type NetworkFailedState = {
  state: "failed";
  code: number;
};

type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};

type NetworkState = 
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

function logger(state: NetworkState): string {
  switch (state.state) {
    case "loading":
      return "Downloading...";
    case "failed":
      return `Error ${state.code} downloading`;
    case "success":
      return `Downloaded ${state.response.title} - ${state.response.summary}`;
  }
}