在react中使用泛型的几种情况

在 TypeScript 中，你可以通过以下几种方式在函数参数中使用泛型：

1. 函数声明中的泛型：

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

// 使用
let result = example<string>("Hello");
// 或者让 TypeScript 自动推断类型
let result2 = example(42);

2. 箭头函数中的泛型：

const example = <T>(arg: T): T => {
    return arg;
};

// 使用
let result = example<number>(42);

3. 方法中的泛型：

class ExampleClass {
    method<T>(arg: T): T {
        return arg;
    }
}

// 使用
const instance = new ExampleClass();
let result = instance.method<string>("Hello");

4. 接口中的泛型方法：

interface ExampleInterface {
    method<T>(arg: T): T;
}

class ImplementingClass implements ExampleInterface {
    method<T>(arg: T): T {
        return arg;
    }
}

5. 多个泛型参数：

function pair<T, U>(first: T, second: U): [T, U] {
    return [first, second];
}

// 使用
let result = pair<string, number>("Hello", 42);

6. 泛型约束：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // 现在我们知道arg有一个.length属性
    return arg;
}

// 使用
loggingIdentity("Hello");  // 可以，字符串有length属性
loggingIdentity([1, 2, 3]);  // 可以，数组有length属性
// loggingIdentity(3);  // 错误，数字没有length属性

7. 在React组件中使用泛型：

import React from 'react';

interface Props<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
}

function GenericList<T>({ items, renderItem }: Props<T>) {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

// 使用
<GenericList
    items={[1, 2, 3]}
    renderItem={(item) => <span>{item}</span>}
/>

在使用泛型时，记住以下几点：

• 泛型允许你在定义函数、类或接口时不预先指定具体的类型，而在使用时再指定。
• 你可以有多个泛型参数。
• 可以为泛型参数指定默认类型。
• 可以对泛型参数应用约束，限制它们必须符合某些条件。

通过使用泛型，你可以创建可重用的组件，这些组件可以与多种类型一起工作，同时保持类型安全性。