我的技术博客

TypeScript 高级类型技巧

作者: Nexus Trinity... 次浏览
💻技术
TypeScript前端开发类型系统

深入探讨 TypeScript 中的高级类型特性和实用技巧

TypeScript 高级类型技巧

TypeScript 提供了强大的类型系统，本文将介绍一些高级类型技巧。

1. 泛型约束

使用 extends 关键字对泛型进行约束：

interface HasLength {
  length: number;
}

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

// 正确
logLength("hello");
logLength([1, 2, 3]);

// 错误：number 类型没有 length 属性
// logLength(123);

2. 条件类型

条件类型允许根据类型关系进行类型推断：

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

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

3. 映射类型

创建基于现有类型的新类型：

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

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

type ReadonlyUser = Readonly<User>;
// { readonly name: string; readonly age: number; }

4. 工具类型

TypeScript 内置了许多实用的工具类型：

// Partial - 将所有属性变为可选
type PartialUser = Partial<User>;

// Pick - 选取特定属性
type UserName = Pick<User, 'name'>;

// Omit - 排除特定属性
type UserWithoutAge = Omit<User, 'age'>;

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

5. 模板字面量类型

TypeScript 4.1+ 支持模板字面量类型：

type EventName = 'click' | 'scroll' | 'mousemove';
type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onScroll" | "onMousemove"

实战示例

结合多种类型特性创建类型安全的 API：

interface APIResponse<T> {
  data: T;
  status: number;
  message: string;
}

async function fetchData<T>(url: string): Promise<APIResponse<T>> {
  const response = await fetch(url);
  return response.json();
}

// 使用
interface Post {
  id: number;
  title: string;
  content: string;
}

const result = await fetchData<Post>('/api/posts/1');
console.log(result.data.title); // 类型安全

总结

掌握 TypeScript 的高级类型系统可以：

  • 提高代码的类型安全性
  • 减少运行时错误
  • 提升开发体验
  • 增强代码可维护性

继续学习和实践这些技巧，能够写出更加健壮的 TypeScript 代码。

📚 相关文章推荐