TypeScript系列04-泛型编程

本文探讨TypeScript泛型编程，内容涵盖：

1. 泛型基础：包括泛型函数、接口、类和约束，这些是构建可重用和类型安全代码的基础。
2. 内置工具类型：掌握了TypeScript提供的强大工具类型，如Partial、Required、Pick等，这些工具类型可以帮助我们进行常见的类型操作。
3. 条件类型与推断：学习了如何使用条件类型和infer关键字进行类型运算和推断。
4. 实战应用：分析了Redux Toolkit中泛型的应用，展示了泛型在实际项目中的强大功能。

1. 泛型基础概念

泛型是TypeScript中最强大的特性之一，它允许我们创建可重用的组件，这些组件可以与多种类型一起工作，而不仅限于单一类型。泛型为代码提供了类型安全的同时保持了灵活性。

1.1 泛型函数与泛型接口

泛型函数使用类型参数来创建可以处理多种数据类型的函数，同时保持类型安全。

以下是一个简单的泛型函数示例：

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

// 使用方式
const output1: string = identity<string>("hello");
const output2: number = identity<number>(42);
const output3: boolean = identity(true); // 类型参数推断为 boolean

泛型接口使我们能够定义可适用于多种类型的接口结构：

interface GenericBox<T> {
   
   
    value: T;
    getValue(): T;
}

// 实现泛型接口
class StringBox implements GenericBox<string> {
   
   
    value: string;
    
    constructor(value: string) {
   
   
        this.value = value;
    }
    
    getValue(): string {
   
   
        return this.value;
    }
}

class NumberBox implements GenericBox<number> {
   
   
    value: number;
    
    constructor(value: number) {
   
   
        this.value = value;
    }
    
    getValue(): number {
   
   
        return this.value;
    }
}

1.2 泛型类与泛型约束

泛型类允许我们创建可以处理多种数据类型的类定义：

class DataContainer<T> {
   
   
    private data: T[];
    
    constructor() {
   
   
        this.data = [];
    }
    
    add(item: T): void {
   
   
        this.data.push(item);
    }
    
    getItems(): T[] {
   
   
        return this.data;
    }
}

// 使用泛型类
const stringContainer = new DataContainer<string>();
stringContainer.add("Hello");
stringContainer.add("World");
const strings = stringContainer.getItems(); // 类型为 string[]

const numberContainer = new DataContainer<number>();
numberContainer.add(10);
numberContainer.add(20);
const numbers = numberContainer.getItems(); // 类型为 number[]

泛型约束使我们可以限制类型参数必须具有特定属性或结构，提高类型安全性：

interface Lengthwise {
   
   
    length: number;
}

// 泛型约束：T 必须符合 Lengthwise 接口
function getLength<T extends Lengthwise>(arg: T): number {
   
   
    return arg.length; // 安全，因为我们保证 T 有 length 属性
}

getLength("Hello"); // 字符串有 length 属性，可以正常工作
getLength([1, 2, 3]); // 数组有 length 属性，可以正常工作
// getLength(123); // 错误！数字没有 length 属性

1.3 默认类型参数

TypeScript 允许为泛型类型参数提供默认值，类似于函数参数的默认值：

interface ApiResponse<T = any> {
   
   
    data: T;
    status: