简体中文 繁體中文 English Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français Japanese

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：为庆祝网站一周年，将在5.1日与5.2日开放注册，具体信息请见后续详细公告
04-22 00:04
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

深入浅出TypeScript泛型编程从基础语法到高级应用提升代码复用性与类型安全性的实用技巧

威震华夏关云长
SunJu_FaceMall

3万

主题

1158

科技点

3万

积分

白金月票

碾压王

积分
32796

立华奏
发表于 2025-10-2 14:10:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

TypeScript作为JavaScript的超集，为我们带来了静态类型检查的能力，大大提高了代码的可靠性和可维护性。在TypeScript的众多特性中，泛型（Generics）是一个尤为强大的工具，它允许我们在定义函数、类和接口时使用类型变量，从而创建可重用的、灵活且类型安全的代码组件。本文将深入探讨TypeScript泛型编程的各个方面，从基础语法到高级应用，帮助读者全面理解并掌握这一重要特性。

一、泛型基础概念

1. 什么是泛型

泛型是一种允许在定义函数、类或接口时使用类型变量的编程特性。通过泛型，我们可以编写适用于多种类型的代码，同时保持类型安全。简单来说，泛型就像是函数的类型参数，让我们能够创建”类型变量”，这些变量可以代表任何类型，在使用时再指定具体的类型。

2. 为什么需要泛型

在没有泛型的情况下，我们可能会使用any类型来处理多种类型的数据，但这会失去类型检查的优势。例如：
  2. function identity(arg: any): any {
  3.     return arg;
  4. }
复制代码

这个函数可以接受任何类型的参数并返回它，但我们失去了参数和返回值之间的类型关联。使用泛型，我们可以保持这种类型关系：
  2. function identity<T>(arg: T): T {
  3.     return arg;
  4. }
复制代码

这里，T是一个类型变量，它捕获了用户提供的类型，使我们能够在函数中使用它，并保持输入和输出之间的类型一致性。

3. 泛型的基本语法

泛型的基本语法是在函数名、类名或接口名后面使用尖括号<>来定义类型变量：
  2. // 泛型函数
  3. function functionName<T>(param: T): T {
  4.     // 函数体
  5. }
  7. // 泛型接口
  8. interface InterfaceName<T> {
  9.     property: T;
  10.     method(param: T): T;
  11. }
  13. // 泛型类
  14. class ClassName<T> {
  15.     property: T;
  16.     constructor(param: T) {
  17.         this.property = param;
  18.     }
  19.     method(): T {
  20.         return this.property;
  21.     }
  22. }
复制代码

二、泛型函数

1. 基本泛型函数

让我们从最基本的泛型函数开始：
  2. // 泛型函数示例
  3. function identity<T>(arg: T): T {
  4.     return arg;
  5. }
  7. // 使用方式一：明确指定类型
  8. let output1 = identity<string>("hello world");
  9. console.log(output1); // "hello world"
  11. // 使用方式二：类型推断（推荐）
  12. let output2 = identity(42); // TypeScript推断T为number
  13. console.log(output2); // 42
复制代码

在这个例子中，identity函数接受一个类型为T的参数，并返回一个相同类型的值。当我们调用这个函数时，可以明确指定类型，也可以让TypeScript根据传入的参数自动推断类型。

2. 多个类型参数

泛型函数可以有多个类型参数：
  2. function pair<T, U>(first: T, second: U): [T, U] {
  3.     return [first, second];
  4. }
  6. let pairOutput = pair<string, number>("hello", 42);
  7. console.log(pairOutput); // ["hello", 42]
  9. // 使用类型推断
  10. let pairOutput2 = pair(true, "world");
  11. console.log(pairOutput2); // [true, "world"]
复制代码

3. 泛型函数与数组

泛型在处理数组时特别有用：
  2. // 获取数组的第一个元素
  3. function getFirstElement<T>(arr: T[]): T | undefined {
  4.     return arr.length > 0 ? arr[0] : undefined;
  5. }
  7. let numbers = [1, 2, 3, 4, 5];
  8. let firstNumber = getFirstElement(numbers);
  9. console.log(firstNumber); // 1
  11. let strings = ["apple", "banana", "cherry"];
  12. let firstString = getFirstElement(strings);
  13. console.log(firstString); // "apple"
  15. // 空数组情况
  16. let emptyArray: number[] = [];
  17. let emptyResult = getFirstElement(emptyArray);
  18. console.log(emptyResult); // undefined
复制代码

4. 泛型函数与对象

泛型函数也可以处理对象：
  2. function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  3.     return obj[key];
  4. }
  6. interface Person {
  7.     name: string;
  8.     age: number;
  9.     address: string;
  10. }
  12. const person: Person = {
  13.     name: "John Doe",
  14.     age: 30,
  15.     address: "123 Main St"
  16. };
  18. let name = getProperty(person, "name");
  19. console.log(name); // "John Doe"
  21. let age = getProperty(person, "age");
  22. console.log(age); // 30
  24. // 以下代码会报错，因为"phone"不是Person的键
  25. // let phone = getProperty(person, "phone");
复制代码

在这个例子中，我们使用了keyof关键字来约束K类型，确保key参数必须是T类型的键。

三、泛型接口

1. 基本泛型接口

泛型接口允许我们定义具有泛型类型的接口：
  2. interface GenericIdentityFn<T> {
  3.     (arg: T): T;
  4. }
  6. function identity<T>(arg: T): T {
  7.     return arg;
  8. }
  10. let myIdentity: GenericIdentityFn<number> = identity;
  11. console.log(myIdentity(10)); // 10
复制代码

2. 泛型接口与对象

泛型接口可以用于描述对象的形状：
  2. interface Collection<T> {
  3.     add(item: T): void;
  4.     remove(item: T): boolean;
  5.     get(index: number): T | undefined;
  6.     size: number;
  7. }
  9. class ArrayCollection<T> implements Collection<T> {
  10.     private items: T[] = [];
  12.     add(item: T): void {
  13.         this.items.push(item);
  14.     }
  16.     remove(item: T): boolean {
  17.         const index = this.items.indexOf(item);
  18.         if (index !== -1) {
  19.             this.items.splice(index, 1);
  20.             return true;
  21.         }
  22.         return false;
  23.     }
  25.     get(index: number): T | undefined {
  26.         return this.items[index];
  27.     }
  29.     get size(): number {
  30.         return this.items.length;
  31.     }
  32. }
  34. // 使用字符串集合
  35. const stringCollection = new ArrayCollection<string>();
  36. stringCollection.add("hello");
  37. stringCollection.add("world");
  38. console.log(stringCollection.get(0)); // "hello"
  39. console.log(stringCollection.size); // 2
  41. // 使用数字集合
  42. const numberCollection = new ArrayCollection<number>();
  43. numberCollection.add(1);
  44. numberCollection.add(2);
  45. console.log(numberCollection.get(1)); // 2
  46. console.log(numberCollection.size); // 2
复制代码

3. 泛型接口与函数

泛型接口可以用于描述函数类型：
  2. interface SearchFunc<T> {
  3.     (source: T[], searchTerm: T): boolean;
  4. }
  6. let numberSearch: SearchFunc<number> = function(source, searchTerm) {
  7.     return source.indexOf(searchTerm) !== -1;
  8. };
  10. console.log(numberSearch([1, 2, 3, 4, 5], 3)); // true
  11. console.log(numberSearch([1, 2, 3, 4, 5], 6)); // false
  13. let stringSearch: SearchFunc<string> = function(source, searchTerm) {
  14.     return source.includes(searchTerm);
  15. };
  17. console.log(stringSearch(["apple", "banana", "cherry"], "banana")); // true
  18. console.log(stringSearch(["apple", "banana", "cherry"], "grape")); // false
复制代码

四、泛型类

1. 基本泛型类

泛型类与泛型接口类似，使用类型参数来描述类的属性和方法：
  2. class GenericNumber<T> {
  3.     zeroValue: T;
  4.     add: (x: T, y: T) => T;
  6.     constructor(zero: T, addFn: (x: T, y: T) => T) {
  7.         this.zeroValue = zero;
  8.         this.add = addFn;
  9.     }
  10. }
  12. let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
  13. console.log(myGenericNumber.add(5, 10)); // 15
  15. let stringNumeric = new GenericNumber<string>("", (x, y) => x + y);
  16. console.log(stringNumeric.add("hello, ", "world")); // "hello, world"
复制代码

2. 泛型类与继承

泛型类可以继承其他类或实现接口：
  2. interface Printable {
  3.     print(): void;
  4. }
  6. class Box<T> implements Printable {
  7.     private content: T;
  9.     constructor(content: T) {
  10.         this.content = content;
  11.     }
  13.     getContent(): T {
  14.         return this.content;
  15.     }
  17.     setContent(content: T): void {
  18.         this.content = content;
  19.     }
  21.     print(): void {
  22.         console.log(`Box contains: ${this.content}`);
  23.     }
  24. }
  26. class SpecialBox<T> extends Box<T> {
  27.     private specialProperty: string;
  29.     constructor(content: T, specialProperty: string) {
  30.         super(content);
  31.         this.specialProperty = specialProperty;
  32.     }
  34.     getSpecialProperty(): string {
  35.         return this.specialProperty;
  36.     }
  38.     print(): void {
  39.         super.print();
  40.         console.log(`Special property: ${this.specialProperty}`);
  41.     }
  42. }
  44. const numberBox = new Box<number>(42);
  45. numberBox.print(); // "Box contains: 42"
  47. const stringSpecialBox = new SpecialBox<string>("Hello", "This is special");
  48. stringSpecialBox.print();
  49. // "Box contains: Hello"
  50. // "Special property: This is special"
复制代码

3. 泛型类与静态成员

需要注意的是，泛型类型不能用于类的静态成员：
  2. class GenericClass<T> {
  3.     static staticProperty: T; // 错误：静态成员不能引用类类型参数
  4.    
  5.     instanceProperty: T; // 正确：实例成员可以引用类类型参数
  6.    
  7.     constructor(value: T) {
  8.         this.instanceProperty = value;
  9.     }
  10. }
复制代码

五、泛型约束

1. 基本泛型约束

有时我们希望限制泛型类型必须满足某些条件，这时可以使用泛型约束：
  2. interface Lengthwise {
  3.     length: number;
  4. }
  6. function loggingIdentity<T extends Lengthwise>(arg: T): T {
  7.     console.log(`Length: ${arg.length}`);
  8.     return arg;
  9. }
  11. loggingIdentity("hello world"); // 正确：字符串有length属性
  12. loggingIdentity([1, 2, 3]); // 正确：数组有length属性
  13. loggingIdentity({ length: 10, value: 3 }); // 正确：对象有length属性
  14. // loggingIdentity(42); // 错误：数字没有length属性
复制代码

2. 在泛型约束中使用类型参数

我们可以声明一个类型参数，且它被另一个类型参数所约束：
  2. function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  3.     return obj[key];
  4. }
  6. interface Person {
  7.     name: string;
  8.     age: number;
  9. }
  11. const person: Person = {
  12.     name: "Alice",
  13.     age: 30
  14. };
  16. let name = getProperty(person, "name"); // 类型为string
  17. let age = getProperty(person, "age"); // 类型为number
  18. // let phone = getProperty(person, "phone"); // 错误：'phone'不是'Person'的键
复制代码

3. 多重泛型约束

一个类型参数可以有多个约束：
  2. interface Serializable {
  3.     serialize(): string;
  4. }
  6. interface Deserializable<T> {
  7.     deserialize(data: string): T;
  8. }
  10. class DataProcessor<T extends Serializable & Deserializable<T>> {
  11.     process(data: T): string {
  12.         return data.serialize();
  13.     }
  14.    
  15.     restore(dataString: string): T {
  16.         const newData = {} as T;
  17.         return newData.deserialize(dataString);
  18.     }
  19. }
  21. class User implements Serializable, Deserializable<User> {
  22.     constructor(public name: string, public age: number) {}
  23.    
  24.     serialize(): string {
  25.         return JSON.stringify({ name: this.name, age: this.age });
  26.     }
  27.    
  28.     deserialize(data: string): User {
  29.         const obj = JSON.parse(data);
  30.         return new User(obj.name, obj.age);
  31.     }
  32. }
  34. const userProcessor = new DataProcessor<User>();
  35. const user = new User("Bob", 25);
  36. const serialized = userProcessor.process(user);
  37. console.log(serialized); // {"name":"Bob","age":25}
  39. const restoredUser = userProcessor.restore(serialized);
  40. console.log(restoredUser.name); // "Bob"
  41. console.log(restoredUser.age); // 25
复制代码

六、泛型工具类型

TypeScript提供了一些内置的泛型工具类型，可以帮助我们进行常见的类型转换。

1. Partial

Partial<T>将类型T的所有属性变为可选：
  2. interface Todo {
  3.     title: string;
  4.     description: string;
  5.     completed: boolean;
  6. }
  8. function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>): Todo {
  9.     return { ...todo, ...fieldsToUpdate };
  10. }
  12. const todo1: Todo = {
  13.     title: "Learn TypeScript",
  14.     description: "Study generics in TypeScript",
  15.     completed: false
  16. };
  18. const todo2 = updateTodo(todo1, {
  19.     description: "Study advanced generics in TypeScript"
  20. });
  22. console.log(todo2);
  23. // {
  24. //   title: "Learn TypeScript",
  25. //   description: "Study advanced generics in TypeScript",
  26. //   completed: false
  27. // }
复制代码

2. Required

Required<T>将类型T的所有属性变为必选：
  2. interface Props {
  3.     a?: number;
  4.     b?: string;
  5. }
  7. const obj: Props = { a: 5 }; // 正确：a和b都是可选的
  9. const obj2: Required<Props> = { a: 5 }; // 错误：b是必选的
  10. const obj3: Required<Props> = { a: 5, b: "hello" }; // 正确
复制代码

3. Readonly

Readonly<T>将类型T的所有属性变为只读：
  2. interface Todo {
  3.     title: string;
  4. }
  6. const todo: Readonly<Todo> = {
  7.     title: "Delete inactive users"
  8. };
  10. todo.title = "Hello"; // 错误：title是只读的
复制代码

4. Record

Record<K, T>创建一个对象类型，其属性键为K类型，属性值为T类型：
  2. interface PageInfo {
  3.     title: string;
  4. }
  6. type Page = "home" | "about" | "contact";
  8. const pages: Record<Page, PageInfo> = {
  9.     home: { title: "Home Page" },
  10.     about: { title: "About Us" },
  11.     contact: { title: "Contact Us" }
  12. };
  14. console.log(pages.home.title); // "Home Page"
复制代码

5. Pick

Pick<T, K>从类型T中选择一组属性K来创建新类型：
  2. interface Todo {
  3.     title: string;
  4.     description: string;
  5.     completed: boolean;
  6. }
  8. type TodoPreview = Pick<Todo, "title" | "completed">;
  10. const todo: TodoPreview = {
  11.     title: "Clean room",
  12.     completed: false
  13. };
  15. console.log(todo.title); // "Clean room"
  16. console.log(todo.completed); // false
  17. // console.log(todo.description); // 错误：description属性不存在
复制代码

6. Omit

Omit<T, K>从类型T中排除一组属性K来创建新类型：
  2. interface Todo {
  3.     title: string;
  4.     description: string;
  5.     completed: boolean;
  6.     createdAt: number;
  7. }
  9. type TodoPreview = Omit<Todo, "description" | "createdAt">;
  11. const todo: TodoPreview = {
  12.     title: "Clean room",
  13.     completed: false
  14. };
  16. console.log(todo.title); // "Clean room"
  17. console.log(todo.completed); // false
  18. // console.log(todo.description); // 错误：description属性不存在
  19. // console.log(todo.createdAt); // 错误：createdAt属性不存在
复制代码

7. Exclude

Exclude<T, U>从类型T中排除可以赋值给U的类型：
  2. type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
  3. type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
  4. type T2 = Exclude<string | number | (() => void), Function>; // string | number
复制代码

8. Extract

Extract<T, U>从类型T中提取可以赋值给U的类型：
  2. type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
  3. type T1 = Extract<string | number | (() => void), Function>; // () => void
复制代码

9. NonNullable

NonNullable<T>从类型T中排除null和undefined：
  2. type T0 = NonNullable<string | number | undefined>; // string | number
  3. type T1 = NonNullable<string[] | null | undefined>; // string[]
复制代码

10. ReturnType

ReturnType<T>获取函数类型T的返回类型：
  2. type T0 = ReturnType<() => string>; // string
  3. type T1 = ReturnType<(s: string) => void>; // void
  4. type T2 = ReturnType<<T>() => T>; // {}
  5. type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
  6. type T4 = ReturnType<any>; // any
  7. type T5 = ReturnType<never>; // any
  8. type T6 = ReturnType<string>; // 错误
  9. type T7 = ReturnType<Function>; // any
复制代码

七、泛型的高级应用

1. 条件类型

条件类型允许我们根据条件选择类型，形式为T extends U ? X : Y：
  2. type TypeName<T> =
  3.     T extends string ? "string" :
  4.     T extends number ? "number" :
  5.     T extends boolean ? "boolean" :
  6.     T extends undefined ? "undefined" :
  7.     T extends Function ? "function" :
  8.     "object";
  10. type T0 = TypeName<string>; // "string"
  11. type T1 = TypeName<"hello">; // "string"
  12. type T2 = TypeName<42>; // "number"
  13. type T3 = TypeName<true>; // "boolean"
  14. type T4 = TypeName<undefined>; // "undefined"
  15. type T5 = TypeName<() => void>; // "function"
  16. type T6 = TypeName<{ a: number }>; // "object"
复制代码

2. 映射类型

映射类型允许我们基于旧类型创建新类型：
  2. type OptionsFlags<T> = {
  3.     [Property in keyof T]: boolean;
  4. };
  6. interface Features {
  7.     darkMode: () => void;
  8.     newUserProfile: () => void;
  9. }
  11. type FeatureOptions = OptionsFlags<Features>;
  12. // 等同于：
  13. // {
  14. //     darkMode: boolean;
  15. //     newUserProfile: boolean;
  16. // }
复制代码

3. 映射修饰符

我们可以使用+或-前缀来添加或移除修饰符：
  2. // 移除只读属性
  3. type CreateMutable<T> = {
  4.     -readonly [P in keyof T]: T[P];
  5. };
  7. interface LockedAccount {
  8.     readonly id: string;
  9.     readonly name: string;
  10. }
  12. type UnlockedAccount = CreateMutable<LockedAccount>;
  13. // 等同于：
  14. // {
  15. //     id: string;
  16. //     name: string;
  17. // }
  19. // 添加只读属性
  20. type Locked<T> = {
  21.     +readonly [P in keyof T]: T[P];
  22. };
  24. type LockedAccount2 = Locked<{ id: string; name: string }>;
  25. // 等同于：
  26. // {
  27. //     readonly id: string;
  28. //     readonly name: string;
  29. // }
  31. // 添加可选属性
  32. type Partial<T> = {
  33.     [P in keyof T]?: T[P];
  34. };
  36. // 移除可选属性
  37. type Required<T> = {
  38.     [P in keyof T]-?: T[P];
  39. };
复制代码

4. 模板字面量类型

TypeScript 4.1引入了模板字面量类型，它们可以通过字符串操作创建新的类型：
  2. type EmailLocaleIDs = "welcome_email" | "email_heading";
  3. type FooterLocaleIDs = "footer_title" | "footer_sendoff";
  5. type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
  6. // 等同于：
  7. // "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"
复制代码

5. 递归类型

TypeScript支持递归类型，允许类型引用自身：
  2. type JsonValue =
  3.     | string
  4.     | number
  5.     | boolean
  6.     | null
  7.     | JsonObject
  8.     | JsonArray;
  10. interface JsonObject {
  11.     [key: string]: JsonValue;
  12. }
  14. interface JsonArray extends Array<JsonValue> {}
  16. const data: JsonValue = {
  17.     name: "John",
  18.     age: 30,
  19.     isStudent: false,
  20.     address: {
  21.         street: "123 Main St",
  22.         city: "New York"
  23.     },
  24.     hobbies: ["reading", "swimming"]
  25. };
复制代码

6. 高阶函数与泛型

泛型在高阶函数中特别有用：
  2. function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  3.     const result: U[] = [];
  4.     for (const item of array) {
  5.         result.push(fn(item));
  6.     }
  7.     return result;
  8. }
  10. const numbers = [1, 2, 3, 4, 5];
  11. const doubled = map(numbers, n => n * 2);
  12. console.log(doubled); // [2, 4, 6, 8, 10]
  14. const strings = ["hello", "world", "typescript"];
  15. const lengths = map(strings, s => s.length);
  16. console.log(lengths); // [5, 5, 10]
复制代码

7. 泛型与装饰器

泛型可以与装饰器结合使用，提供更灵活的元编程能力：
  2. function logClass<T extends { new(...args: any[]): {} }>(constructor: T) {
  3.     return class extends constructor {
  4.         constructor(...args: any[]) {
  5.             super(...args);
  6.             console.log(`Creating instance of ${constructor.name}`);
  7.         }
  8.     };
  9. }
  11. @logClass
  12. class Person {
  13.     constructor(public name: string) {}
  14. }
  16. const person = new Person("Alice"); // 输出: "Creating instance of Person"
  17. console.log(person.name); // "Alice"
复制代码

八、实际项目中的泛型应用

1. API响应处理

在实际项目中，我们经常需要处理各种API响应，泛型可以帮助我们创建类型安全的响应处理逻辑：
  2. interface ApiResponse<T> {
  3.     data: T;
  4.     status: number;
  5.     message: string;
  6.     timestamp: number;
  7. }
  9. interface User {
  10.     id: number;
  11.     name: string;
  12.     email: string;
  13. }
  15. interface Post {
  16.     id: number;
  17.     title: string;
  18.     content: string;
  19.     authorId: number;
  20. }
  22. async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
  23.     const response = await fetch(url);
  24.     const data = await response.json();
  25.     return {
  26.         data,
  27.         status: response.status,
  28.         message: response.statusText,
  29.         timestamp: Date.now()
  30.     };
  31. }
  33. // 获取用户数据
  34. async function getUser(id: number): Promise<User> {
  35.     const response = await fetchApi<User>(`/api/users/${id}`);
  36.     return response.data;
  37. }
  39. // 获取文章数据
  40. async function getPost(id: number): Promise<Post> {
  41.     const response = await fetchApi<Post>(`/api/posts/${id}`);
  42.     return response.data;
  43. }
  45. // 使用示例
  46. getUser(1).then(user => {
  47.     console.log(user.name); // 类型安全，user被识别为User类型
  48. });
  50. getPost(1).then(post => {
  51.     console.log(post.title); // 类型安全，post被识别为Post类型
  52. });
复制代码

2. 状态管理

在状态管理中，泛型可以帮助我们创建可重用的状态管理逻辑：
  2. interface State<T> {
  3.     data: T | null;
  4.     loading: boolean;
  5.     error: Error | null;
  6. }
  8. class Store<T> {
  9.     private state: State<T> = {
  10.         data: null,
  11.         loading: false,
  12.         error: null
  13.     };
  15.     private listeners: Array<(state: State<T>) => void> = [];
  17.     getState(): State<T> {
  18.         return { ...this.state };
  19.     }
  21.     subscribe(listener: (state: State<T>) => void): () => void {
  22.         this.listeners.push(listener);
  23.         return () => {
  24.             this.listeners = this.listeners.filter(l => l !== listener);
  25.         };
  26.     }
  28.     private notify() {
  29.         this.listeners.forEach(listener => listener(this.getState()));
  30.     }
  32.     async load(loader: () => Promise<T>): Promise<void> {
  33.         this.state = {
  34.             data: null,
  35.             loading: true,
  36.             error: null
  37.         };
  38.         this.notify();
  40.         try {
  41.             const data = await loader();
  42.             this.state = {
  43.                 data,
  44.                 loading: false,
  45.                 error: null
  46.             };
  47.         } catch (error) {
  48.             this.state = {
  49.                 data: null,
  50.                 loading: false,
  51.                 error: error instanceof Error ? error : new Error(String(error))
  52.             };
  53.         }
  55.         this.notify();
  56.     }
  57. }
  59. // 使用示例
  60. interface User {
  61.     id: number;
  62.     name: string;
  63. }
  65. const userStore = new Store<User>();
  67. userStore.subscribe(state => {
  68.     if (state.loading) {
  69.         console.log("Loading user data...");
  70.     } else if (state.error) {
  71.         console.error("Error loading user data:", state.error.message);
  72.     } else if (state.data) {
  73.         console.log("User data loaded:", state.data.name);
  74.     }
  75. });
  77. // 模拟API调用
  78. async function fetchUser(): Promise<User> {
  79.     return new Promise(resolve => {
  80.         setTimeout(() => {
  81.             resolve({ id: 1, name: "John Doe" });
  82.         }, 1000);
  83.     });
  84. }
  86. userStore.load(fetchUser);
复制代码

3. 表单处理

在表单处理中，泛型可以帮助我们创建类型安全的表单处理逻辑：
  2. interface FormField<T> {
  3.     value: T;
  4.     error: string | null;
  5.     touched: boolean;
  6.     validate: (value: T) => string | null;
  7. }
  9. interface Form<T> {
  10.     fields: { [K in keyof T]: FormField<T[K]> };
  11.     isValid: boolean;
  12. }
  14. function createForm<T>(initialValues: T, validators: { [K in keyof T]?: (value: T[K]) => string | null }): Form<T> {
  15.     const fields: { [K in keyof T]: FormField<T[K]> } = {} as any;
  16.    
  17.     for (const key in initialValues) {
  18.         const value = initialValues[key];
  19.         const validate = validators[key] || (() => null);
  20.         
  21.         fields[key] = {
  22.             value,
  23.             error: null,
  24.             touched: false,
  25.             validate
  26.         };
  27.     }
  28.    
  29.     return {
  30.         fields,
  31.         isValid: true
  32.     };
  33. }
  35. function updateField<T, K extends keyof T>(form: Form<T>, field: K, value: T[K]): Form<T> {
  36.     const updatedFields = { ...form.fields };
  37.     const fieldDef = updatedFields[field];
  38.    
  39.     const error = fieldDef.validate(value);
  40.    
  41.     updatedFields[field] = {
  42.         ...fieldDef,
  43.         value,
  44.         error,
  45.         touched: true
  46.     };
  47.    
  48.     const isValid = Object.values(updatedFields).every(f => !f.error);
  49.    
  50.     return {
  51.         fields: updatedFields,
  52.         isValid
  53.     };
  54. }
  56. // 使用示例
  57. interface LoginForm {
  58.     email: string;
  59.     password: string;
  60. }
  62. const loginForm = createForm<LoginForm>(
  63.     { email: "", password: "" },
  64.     {
  65.         email: (value) => {
  66.             if (!value) return "Email is required";
  67.             if (!/\S+@\S+\.\S+/.test(value)) return "Email is invalid";
  68.             return null;
  69.         },
  70.         password: (value) => {
  71.             if (!value) return "Password is required";
  72.             if (value.length < 8) return "Password must be at least 8 characters";
  73.             return null;
  74.         }
  75.     }
  76. );
  78. // 更新表单字段
  79. let updatedForm = updateField(loginForm, "email", "test@example.com");
  80. updatedForm = updateField(updatedForm, "password", "password123");
  82. console.log(updatedForm.isValid); // true
  83. console.log(updatedForm.fields.email.error); // null
  84. console.log(updatedForm.fields.password.error); // null
复制代码

4. 组件库开发

在开发React组件库时，泛型可以帮助我们创建灵活且类型安全的组件：
  2. import React from 'react';
  4. interface ListProps<T> {
  5.     items: T[];
  6.     renderItem: (item: T) => React.ReactNode;
  7.     keyExtractor: (item: T) => string | number;
  8.     className?: string;
  9. }
  11. function List<T>({ items, renderItem, keyExtractor, className }: ListProps<T>): React.ReactElement {
  12.     return (
  13.         <ul className={className}>
  14.             {items.map(item => (
  15.                 <li key={keyExtractor(item)}>
  16.                     {renderItem(item)}
  17.                 </li>
  18.             ))}
  19.         </ul>
  20.     );
  21. }
  23. interface User {
  24.     id: number;
  25.     name: string;
  26.     email: string;
  27. }
  29. interface Product {
  30.     id: string;
  31.     name: string;
  32.     price: number;
  33. }
  35. // 使用示例
  36. const UserList: React.FC<{ users: User[] }> = ({ users }) => (
  37.     <List
  38.         items={users}
  39.         renderItem={user => (
  40.             <div>
  41.                 <h3>{user.name}</h3>
  42.                 <p>{user.email}</p>
  43.             </div>
  44.         )}
  45.         keyExtractor={user => user.id}
  46.         className="user-list"
  47.     />
  48. );
  50. const ProductList: React.FC<{ products: Product[] }> = ({ products }) => (
  51.     <List
  52.         items={products}
  53.         renderItem={product => (
  54.             <div>
  55.                 <h3>{product.name}</h3>
  56.                 <p>${product.price.toFixed(2)}</p>
  57.             </div>
  58.         )}
  59.         keyExtractor={product => product.id}
  60.         className="product-list"
  61.     />
  62. );
复制代码

九、泛型编程的最佳实践

1. 使用有意义的类型参数名称

虽然使用单个大写字母（如T、U、K等）作为类型参数名称是常见的做法，但在某些情况下，使用更具描述性的名称可以提高代码的可读性：
  2. // 不够清晰
  3. function get<T>(array: T[], index: number): T | undefined {
  4.     return array[index];
  5. }
  7. // 更清晰
  8. function getElement<Element>(array: Element[], index: number): Element | undefined {
  9.     return array[index];
  10. }
复制代码

2. 限制泛型的范围

尽可能使用泛型约束来限制泛型的范围，这样可以提供更好的类型安全性和代码提示：
  2. // 不够安全
  3. function logLength<T>(arg: T): void {
  4.     // console.log(arg.length); // 错误：T不一定有length属性
  5. }
  7. // 更安全
  8. function logLength<T extends { length: number }>(arg: T): void {
  9.     console.log(arg.length); // 正确：T有length属性
  10. }
复制代码

3. 避免过度使用泛型

虽然泛型很强大，但并不是所有情况都需要使用泛型。过度使用泛型会使代码变得复杂且难以理解：
  2. // 过度使用泛型
  3. interface Pair<T, U> {
  4.     first: T;
  5.     second: U;
  6. }
  8. function createPair<T, U>(first: T, second: U): Pair<T, U> {
  9.     return { first, second };
  10. }
  12. // 更简单且足够
  13. interface StringNumberPair {
  14.     first: string;
  15.     second: number;
  16. }
  18. function createStringNumberPair(first: string, second: number): StringNumberPair {
  19.     return { first, second };
  20. }
复制代码

4. 提供默认类型参数

在适当的情况下，为泛型参数提供默认类型可以提高代码的灵活性：
  2. interface ApiResponse<Data = any> {
  3.     data: Data;
  4.     status: number;
  5.     message: string;
  6. }
  8. // 使用默认类型
  9. const response: ApiResponse = {
  10.     data: { name: "John" },
  11.     status: 200,
  12.     message: "OK"
  13. };
  15. // 指定类型
  16. const userResponse: ApiResponse<User> = {
  17.     data: { id: 1, name: "John", email: "john@example.com" },
  18.     status: 200,
  19.     message: "OK"
  20. };
复制代码

5. 使用泛型来创建可重用的工具函数

泛型非常适合创建可重用的工具函数：
  2. // 通用数组去重函数
  3. function unique<T>(array: T[], keyFn?: (item: T) => any): T[] {
  4.     const seen = new Set();
  5.     return array.filter(item => {
  6.         const key = keyFn ? keyFn(item) : item;
  7.         if (seen.has(key)) {
  8.             return false;
  9.         }
  10.         seen.add(key);
  11.         return true;
  12.     });
  13. }
  15. // 使用示例
  16. const numbers = [1, 2, 3, 2, 1, 4];
  17. const uniqueNumbers = unique(numbers);
  18. console.log(uniqueNumbers); // [1, 2, 3, 4]
  20. const users = [
  21.     { id: 1, name: "John" },
  22.     { id: 2, name: "Jane" },
  23.     { id: 1, name: "John Doe" }
  24. ];
  25. const uniqueUsers = unique(users, user => user.id);
  26. console.log(uniqueUsers);
  27. // [
  28. //     { id: 1, name: "John" },
  29. //     { id: 2, name: "Jane" }
  30. // ]
复制代码

6. 在文档中说明泛型的用途

当创建复杂的泛型类型或函数时，提供清晰的文档说明泛型的用途和约束：
  2. /**
  3. * 过滤数组中的元素，保留满足条件的元素
  4. * @param array 要过滤的数组
  5. * @param predicate 判断元素是否应该保留的函数
  6. * @returns 过滤后的新数组
  7. * @template T 数组元素的类型
  8. */
  9. function filter<T>(array: T[], predicate: (item: T) => boolean): T[] {
  10.     return array.filter(predicate);
  11. }
复制代码

十、总结

TypeScript的泛型是一个强大的特性，它允许我们编写灵活、可重用且类型安全的代码。通过本文的学习，我们了解了泛型的基本概念、语法和用法，以及如何在函数、接口和类中使用泛型。我们还探讨了泛型约束、泛型工具类型以及泛型的高级应用，如条件类型、映射类型和模板字面量类型。

在实际项目中，泛型可以帮助我们处理API响应、状态管理、表单处理和组件开发等各种场景。通过遵循最佳实践，我们可以充分利用泛型的优势，编写出更加健壮、可维护的代码。

掌握TypeScript泛型编程需要时间和实践，但一旦理解了其核心概念和用法，你将能够编写出更加灵活、类型安全的代码，提高开发效率和代码质量。希望本文能够帮助你深入理解TypeScript泛型编程，并在实际项目中应用这些知识。
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

关闭

站长推荐上一条 /1 下一条

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
友链交换
友链交换
友链为随机排序，不代表本论坛观点
Telegram

Telegram

Discord

Discord

Tencent QQ

Tencent QQ

手机版|联系我们|小黑屋|TG频道|RSS |网站地图

Powered by Pixtech

© 2025-2026 Pixtech Team.

>