MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

TypeScript 高级类型：泛型与类型推断的深度解析

2024-11-224.5k 阅读

泛型的基础概念

在 TypeScript 中，泛型是一种强大的工具，它允许我们在定义函数、接口或类的时候不预先指定具体的类型，而是在使用的时候再去确定类型。这种灵活性在编写可复用代码时非常有用，尤其是当我们编写的代码需要处理多种不同类型的数据，但逻辑上又非常相似的情况。

泛型函数

我们先来看一个简单的泛型函数示例。假设我们要编写一个函数，它可以接收任意类型的数组，并返回这个数组的第一个元素。如果不使用泛型，我们可能会这样写：

function getFirstElement(arr: any[]): any {
    return arr[0];
}

这个函数虽然能工作，但它有一个明显的问题，就是返回值的类型是 any。这意味着我们在使用返回值的时候，无法获得类型检查的帮助，可能会引入潜在的错误。使用泛型，我们可以这样改写：

function getFirstElement<T>(arr: T[]): T | undefined {
    return arr.length > 0? arr[0] : undefined;
}

// 使用示例
const numbers = [1, 2, 3];
const firstNumber = getFirstElement(numbers); // firstNumber 的类型为 number | undefined

const strings = ['a', 'b', 'c'];
const firstString = getFirstElement(strings); // firstString 的类型为 string | undefined

在这个例子中，我们定义了一个泛型函数 getFirstElement，<T> 表示这里有一个类型参数 T。这个 T 可以代表任何类型，在函数内部，我们使用 T 来表示数组元素的类型，并且返回值的类型也和数组元素类型一致。当我们调用这个函数时，TypeScript 会根据传入的实际参数类型来推断 T 的具体类型。

泛型接口

除了泛型函数，我们还可以定义泛型接口。泛型接口允许我们在接口中使用类型参数，这样可以使接口更加灵活和通用。例如，我们定义一个表示包装器的接口，它可以包装任意类型的数据：

interface Wrapper<T> {
    value: T;
}

// 使用示例
const numberWrapper: Wrapper<number> = { value: 42 };
const stringWrapper: Wrapper<string> = { value: 'Hello, TypeScript' };

在这个例子中，Wrapper 接口有一个类型参数 T，表示包装的值的类型。当我们创建 numberWrapper 和 stringWrapper 时，分别指定了 T 为 number 和 string，这样就确保了 value 属性的类型正确性。

泛型类

泛型同样适用于类的定义。假设有一个栈的数据结构，它可以存储任意类型的数据，我们可以用泛型类来实现：

class Stack<T> {
    private items: T[] = [];

    push(item: T) {
        this.items.push(item);
    }

    pop(): T | undefined {
        return this.items.pop();
    }
}

// 使用示例
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
const poppedNumber = numberStack.pop(); // poppedNumber 的类型为 number | undefined

const stringStack = new Stack<string>();
stringStack.push('a');
stringStack.push('b');
const poppedString = stringStack.pop(); // poppedString 的类型为 string | undefined

在这个 Stack 类中，<T> 表示栈中存储元素的类型。通过使用泛型，我们可以创建不同类型的栈，而不需要为每种类型都编写一个单独的类。

泛型约束

有时候，我们希望对泛型的类型参数进行一些限制，这就需要用到泛型约束。泛型约束允许我们指定类型参数必须满足的条件。

简单的泛型约束示例

假设我们要编写一个函数，它接收两个值，并返回其中长度较长的那个。我们希望这个函数只适用于具有 length 属性的类型，这时就可以使用泛型约束：

interface HasLength {
    length: number;
}

function getLonger<T extends HasLength>(a: T, b: T): T {
    return a.length > b.length? a : b;
}

// 使用示例
const str1 = 'hello';
const str2 = 'world';
const longerString = getLonger(str1, str2); // longerString 的类型为 string

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const longerArray = getLonger(arr1, arr2); // longerArray 的类型为 number[]

在这个例子中，我们定义了一个接口 HasLength，它要求类型必须有 length 属性。然后在 getLonger 函数的类型参数 <T extends HasLength> 中，使用 extends 关键字来表示 T 必须是 HasLength 类型或者其子类型。这样就确保了函数内部可以安全地访问 length 属性。

多个类型参数的泛型约束

当函数有多个类型参数时，我们也可以对它们之间的关系进行约束。例如，我们编写一个函数，它接收一个对象和一个属性名，返回对象中该属性的值。我们希望属性名必须是对象实际拥有的属性：

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

// 使用示例
const person = { name: 'Alice', age: 30 };
const name = getProperty(person, 'name'); // name 的类型为 string
const age = getProperty(person, 'age'); // age 的类型为 number

在这个 getProperty 函数中，<T> 表示对象的类型，<K extends keyof T> 表示 K 必须是 T 类型对象的键。这样就保证了我们可以安全地从对象中获取指定属性的值，并且返回值的类型也是正确的。

泛型默认类型

在 TypeScript 2.3 及以上版本中，我们可以为泛型类型参数指定默认类型。当调用者没有显式指定类型参数时，就会使用默认类型。

泛型默认类型示例

考虑一个简单的缓存函数，它可以缓存函数的执行结果。如果没有指定缓存的值类型，我们可以默认它为 any：

function memoize<F extends (...args: any[]) => any, R = ReturnType<F>>(fn: F): (...args: Parameters<F>) => R {
    let cache: Record<string, R> = {};
    return function (...args: Parameters<F>) {
        const key = args.toString();
        if (!(key in cache)) {
            cache[key] = fn.apply(this, args);
        }
        return cache[key];
    };
}

// 使用示例
function add(a: number, b: number) {
    return a + b;
}

const memoizedAdd = memoize(add);
const result1 = memoizedAdd(1, 2); // result1 的类型为 number

在这个 memoize 函数中，<F extends (...args: any[]) => any> 表示 F 是一个函数类型，<R = ReturnType<F>> 为 R 指定了默认类型，即 F 函数的返回类型。当我们调用 memoize 时，如果没有显式指定 R 的类型，就会根据 F 函数的返回类型来推断 R。

类型推断

类型推断是 TypeScript 的一项强大功能，它允许编译器在很多情况下自动推断出变量或表达式的类型，而不需要我们显式地指定类型。

基础类型推断

在简单的变量声明中，TypeScript 会根据初始化的值来推断变量的类型。例如：

let num = 42; // num 的类型被推断为 number

let str = 'hello'; // str 的类型被推断为 string

在函数返回值的类型推断中，TypeScript 也能根据函数内部的返回语句来推断返回值类型。比如：

function addNumbers(a: number, b: number) {
    return a + b;
}

// addNumbers 函数的返回值类型被推断为 number

上下文类型推断

上下文类型推断是指 TypeScript 可以根据变量使用的上下文来推断其类型。例如，在事件处理函数中：

document.addEventListener('click', function (event) {
    // event 的类型被推断为 MouseEvent
    console.log(event.clientX);
});

这里 addEventListener 的第二个参数是一个函数，TypeScript 根据 click 事件的类型信息，推断出这个函数的参数 event 是 MouseEvent 类型。

类型推断与泛型

在泛型的场景下，类型推断也发挥着重要作用。当我们调用泛型函数时，TypeScript 会根据传入的实际参数来推断泛型类型参数。比如之前的 getFirstElement 函数：

function getFirstElement<T>(arr: T[]): T | undefined {
    return arr.length > 0? arr[0] : undefined;
}

const numbers = [1, 2, 3];
const firstNumber = getFirstElement(numbers); // T 被推断为 number

这里 TypeScript 根据 numbers 数组的类型，推断出泛型类型参数 T 为 number。

泛型与类型推断的结合应用

在实际开发中，泛型和类型推断常常结合使用，以实现高度灵活且类型安全的代码。

复杂泛型函数中的类型推断

考虑一个函数，它接收一个数组和一个转换函数，对数组中的每个元素应用转换函数，并返回结果数组。这个函数可以用泛型和类型推断来实现：

function mapArray<T, U>(arr: T[], transform: (value: T) => U): U[] {
    return arr.map(transform);
}

// 使用示例
const numbers = [1, 2, 3];
const squaredNumbers = mapArray(numbers, (num) => num * num); // squaredNumbers 的类型为 number[]

const strings = ['1', '2', '3'];
const parsedNumbers = mapArray(strings, (str) => parseInt(str)); // parsedNumbers 的类型为 number[]

在这个 mapArray 函数中，<T> 表示输入数组元素的类型，<U> 表示转换后数组元素的类型。TypeScript 会根据传入的数组和转换函数，准确地推断出 T 和 U 的类型，使得代码既灵活又类型安全。

泛型类与类型推断

在泛型类中，类型推断同样适用。例如，我们扩展之前的 Stack 类，添加一个 isEmpty 方法，并且在构造函数中可以根据传入的初始值推断栈的类型：

class Stack<T> {
    private items: T[] = [];

    constructor(...initialItems: T[]) {
        this.items.push(...initialItems);
    }

    push(item: T) {
        this.items.push(item);
    }

    pop(): T | undefined {
        return this.items.pop();
    }

    isEmpty(): boolean {
        return this.items.length === 0;
    }
}

// 使用示例
const numberStack = new Stack(1, 2, 3); // numberStack 的类型为 Stack<number>
const isNumberStackEmpty = numberStack.isEmpty();

const stringStack = new Stack('a', 'b', 'c'); // stringStack 的类型为 Stack<string>
const isStringStackEmpty = stringStack.isEmpty();

在这个 Stack 类的构造函数中，TypeScript 可以根据传入的初始值推断出 T 的类型，这样就方便地创建了不同类型的栈实例，并且在调用 isEmpty 等方法时，也能保持类型的正确性。

高级类型推断场景

除了基本的类型推断场景，TypeScript 还支持一些更高级的类型推断情况。

条件类型与类型推断

条件类型是 TypeScript 2.8 引入的一种强大的类型操作。它可以根据条件来选择不同的类型。在条件类型中，类型推断也会发挥作用。例如：

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

type Result1 = IsString<string>; // Result1 的类型为 true
type Result2 = IsString<number>; // Result2 的类型为 false

在这个 IsString 类型中，通过 T extends string 来判断 T 是否为 string 类型，如果是则返回 true，否则返回 false。TypeScript 会根据传入的实际类型参数进行准确的类型推断。

映射类型与类型推断

映射类型允许我们基于现有类型创建新类型，通过对现有类型的属性进行映射操作。在映射类型中，类型推断同样重要。例如：

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

type ReadonlyUser = {
    readonly [P in keyof User]: User[P];
};

// ReadonlyUser 的类型为 { readonly name: string; readonly age: number; }

在这个例子中，ReadonlyUser 类型通过 keyof User 获取 User 接口的所有键，然后使用 [P in keyof User] 对每个键进行映射，并且为每个属性添加 readonly 修饰符。TypeScript 会根据 User 接口的属性类型准确地推断出 ReadonlyUser 的属性类型。

泛型与类型推断的常见问题与解决方案

在使用泛型和类型推断的过程中，开发者可能会遇到一些问题，下面我们来分析一些常见问题及解决方案。

类型推断不明确的问题

有时候，TypeScript 可能无法准确推断出类型，导致类型错误或者需要显式指定类型。例如，在复杂的函数调用链中：

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

function compose<F extends (arg: any) => any, G extends (arg: ReturnType<F>) => any>(f: F, g: G): (arg: Parameters<F>[0]) => ReturnType<G> {
    return function (arg) {
        return g(f(arg));
    };
}

// 类型推断不明确，可能需要显式指定类型
const result = compose(identity, identity);

在这个例子中，compose 函数的类型推断可能会出现不明确的情况。为了解决这个问题，我们可以显式指定类型参数：

const result = compose<number, number, number>(identity, identity);

或者，我们可以使用类型断言来帮助类型推断：

const result = compose(identity as (arg: number) => number, identity as (arg: number) => number);

泛型类型丢失的问题

在某些情况下，泛型类型在传递过程中可能会丢失。例如，在函数重载中：

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

let value = overloadedFunction(42); // value 的类型为 any，泛型类型丢失

为了解决这个问题，我们可以使用更精确的类型定义和类型推断。比如：

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

let value = overloadedFunction(42); // value 的类型为 number

通过这样的方式，确保了泛型类型在函数调用过程中的正确性，避免了类型丢失的问题。

实战中的泛型与类型推断优化

在实际项目开发中，合理地运用泛型和类型推断可以提高代码的质量和可维护性。

组件库开发中的应用

在前端组件库开发中，泛型和类型推断可以帮助我们创建高度可复用的组件。例如，一个通用的列表组件可以使用泛型来支持不同类型的数据：

import React from'react';

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

const List = <T>(props: ListProps<T>) => {
    return (
        <ul>
            {props.items.map((item) => (
                <li key={item.toString()}>{props.renderItem(item)}</li>
            ))}
        </ul>
    );
};

// 使用示例
interface User {
    name: string;
    age: number;
}

const users: User[] = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 }
];

const UserList = () => (
    <List<User>
        items={users}
        renderItem={(user) => `${user.name} - ${user.age}`}
    />
);

在这个列表组件中，<T> 泛型表示列表项的数据类型。通过 ListProps<T> 接口和 renderItem 函数，我们可以灵活地处理不同类型的数据，并根据实际传入的数据类型进行正确的类型推断，使得组件在不同场景下都能保持类型安全。

数据请求与处理中的应用

在处理数据请求和响应时，泛型和类型推断也非常有用。例如，使用 axios 库进行 HTTP 请求：

import axios from 'axios';

interface ApiResponse<T> {
    data: T;
    status: number;
    statusText: string;
}

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
    const response = await axios.get(url);
    return {
        data: response.data,
        status: response.status,
        statusText: response.statusText
    };
}

// 使用示例
interface Post {
    title: string;
    body: string;
}

fetchData<Post>('https://jsonplaceholder.typicode.com/posts/1')
   .then((response) => {
        const post: Post = response.data;
        console.log(post.title);
    });

在这个例子中，ApiResponse<T> 接口使用泛型 T 表示响应数据的类型。fetchData 函数通过泛型 T 来指定请求返回数据的类型，TypeScript 会根据传入的实际类型参数（如 Post）进行类型推断，确保在处理响应数据时的类型安全性。

通过以上对泛型与类型推断的深度解析，相信你对 TypeScript 的这两个强大特性有了更深入的理解。在实际开发中，灵活运用它们可以使我们的代码更加健壮、可维护且易于扩展。无论是开发小型项目还是大型企业级应用，泛型与类型推断都是 TypeScript 开发者不可或缺的工具。