泛型函数 - 元素码农

发布时间: 2025-03-31 09:42

↑

# 泛型函数

泛型函数是TypeScript中的一个重要特性,它允许我们创建可以处理多种类型的函数。本文将详细介绍泛型函数的概念和应用。

## 什么是泛型函数?

泛型函数是一种可以接受类型参数的函数,这使得函数可以处理多种类型的数据,同时保持类型安全性。

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

// 使用方式
let output1 = identity<string>("hello");  // 类型是 string
let output2 = identity(42);               // 类型是 number
```

## 泛型函数声明

### 函数声明

```typescript
function map<T, U>(array: T[], func: (item: T) => U): U[] {
    return array.map(func);
}

// 使用示例
const numbers = [1, 2, 3, 4];
const strings = map(numbers, n => n.toString()); // string[]
```

### 箭头函数

```typescript
const filter = <T>(array: T[], predicate: (item: T) => boolean): T[] => {
    return array.filter(predicate);
};

// 使用示例
const filtered = filter([1, 2, 3, 4], n => n > 2); // [3, 4]
```

## 泛型约束

我们可以限制泛型参数必须满足某些条件：

```typescript
interface Lengthwise {
    length: number;
}

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

// 正确
logLength("hello");     // 字符串有length属性
logLength([1, 2, 3]);   // 数组有length属性

// 错误
// logLength(3);        // 数字没有length属性
```

## 多个类型参数

泛型函数可以有多个类型参数：

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

const p1 = pair("hello", 42);        // [string, number]
const p2 = pair<string, number>("world", 123); // 显式指定类型
```

## 泛型函数接口

我们可以使用接口来定义泛型函数的类型：

```typescript
interface Transform<T, U> {
    (value: T): U;
}

let toString: Transform<number, string> = n => n.toString();
let toNumber: Transform<string, number> = s => parseFloat(s);
```

## 实际应用场景

### 1. 数据转换

```typescript
function convert<T, U>(value: T, transformer: (value: T) => U): U {
    return transformer(value);
}

// 使用示例
const numberToString = convert(42, n => n.toString());
const stringToArray = convert("hello", s => s.split(""));
```

### 2. 异步操作

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

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

// 使用示例
const user = await fetchData<User>("/api/user/1");
console.log(user.name); // TypeScript知道user是User类型
```

### 3. 状态管理

```typescript
class State<T> {
    private value: T;

constructor(initial: T) {
        this.value = initial;
    }

get(): T {
        return this.value;
    }

set(newValue: T): void {
        this.value = newValue;
    }

transform(transformer: (value: T) => T): void {
        this.value = transformer(this.value);
    }
}

// 使用示例
const numberState = new State<number>(0);
numberState.set(42);
numberState.transform(n => n * 2);
```

## 最佳实践

1. **类型推断**：让TypeScript自动推断类型,除非需要明确指定：

```typescript
// 好的做法
const numbers = map([1, 2, 3], n => n * 2);

// 不必要的类型注解
const numbers = map<number, number>([1, 2, 3], n => n * 2);
```

2. **泛型约束**：使用约束来限制类型参数：

```typescript
function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
    return { ...obj1, ...obj2 };
}
```

3. **默认类型参数**：为泛型参数提供默认类型：

```typescript
function createState<T = string>() {
    let value: T;
    return {
        get: () => value,
        set: (newValue: T) => { value = newValue; }
    };
}
```

## 常见错误处理

1. **类型约束错误**：

```typescript
function processValue<T extends number>(value: T) {
    return value.toFixed(2);
}

// 错误
// processValue("hello"); // 类型"string"不满足约束"number"
```

2. **泛型参数推断**：

```typescript
function compose<A, B, C>(
    f: (a: A) => B,
    g: (b: B) => C
): (a: A) => C {
    return a => g(f(a));
}

// 错误
// compose(x => x.length, x => x * 2); // 类型推断错误

// 正确
compose(
    (x: string) => x.length,
    (x: number) => x * 2
);
```

## 总结

泛型函数是TypeScript中一个强大的特性,它允许我们：

- 创建可重用的类型安全函数
- 处理多种数据类型
- 保持代码的灵活性和类型安全

合理使用泛型函数可以帮助我们编写更加灵活和可维护的代码。通过泛型约束、多个类型参数和默认类型参数等特性,我们可以创建更加强大和类型安全的函数。在实际开发中,应该根据具体需求选择合适的泛型函数模式。