当前位置：首页 > news >正文

TypeScript 泛型＜ T ＞从入门到精通

news 来源：原创 2025/5/20 23:13:44

TypeScript 泛型 < T > 从入门到精通

在这里插入图片描述

一、泛型初探：为什么需要泛型？

1.1 告别 Any 类型陷阱

// 问题场景：使用 any 失去类型保护
function identity(arg: any): any {
    return arg;
}

const num = identity(123);    // num 类型为 any
const str = identity("hello"); // str 类型为 any
num.toUpperCase(); // 运行时才会报错！

1.2 泛型解决方案

// 泛型保持类型关联性
function identity<T>(arg: T): T {
    return arg;
}

const num = identity(123);    // num 自动推断为 number
const str = identity("hello"); // str 自动推断为 string
num.toUpperCase(); // 编译时立即报错！

二、泛型基础语法全解析

2.1 函数中的泛型

// 基础形式
function reverse<T>(items: T[]): T[] {
    return items.reverse();
}

const numbers = reverse([1, 2, 3]); // number[]
const strings = reverse(["a", "b"]); // string[]

2.2 接口中的泛型

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

const pair1: KeyValuePair<number, string> = { key: 1, value: "one" };
const pair2: KeyValuePair<string, boolean> = { key: "isValid", value: true };

2.3 类中的泛型

class Box<T> {
    private content: T;

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

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

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

const numberBox = new Box<number>(42);
const stringBox = new Box<string>("Hello");

三、泛型约束：给自由套上缰绳

3.1 基础约束

interface Lengthwise {
    length: number;
}

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

logLength("hello"); // 正常，字符串有 length 属性
logLength({ length: 5 }); // 正常
logLength(123); // 错误：数字没有 length 属性

3.2 多类型约束

function mergeObjects<T extends object, U extends object>(a: T, b: U): T & U {
    return { ...a, ...b };
}

const merged = mergeObjects({ name: "Alice" }, { age: 30 });
// merged 类型为 { name: string } & { age: number }

四、高级泛型技巧

4.1 泛型默认值

interface Pagination<T = number> {
    current: T;
    pageSize: T;
}

const defaultPagination: Pagination = { current: 1, pageSize: 10 };
const customPagination: Pagination<string> = { current: "first", pageSize: "large" };

4.2 条件类型

type Nullable<T> = T | null;

type StringOrNumber<T extends boolean> = T extends true ? string : number;

let var1: StringOrNumber<true> = "hello"; // 必须为 string
let var2: StringOrNumber<false> = 123;    // 必须为 number

4.3 映射类型

type ReadonlyAll<T> = {
    readonly [P in keyof T]: T[P];
};

type OptionalKeys<T> = {
    [P in keyof T]?: T[P];
};

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

type ReadonlyUser = ReadonlyAll<User>;
/*
等效于：
{
    readonly id: number;
    readonly name: string;
}
*/

五、泛型在实战中的高级应用

5.1 API 响应类型处理

interface ApiResponse<T> {
    code: number;
    message: string;
    data: T;
    timestamp: Date;
}

async function fetchUser(): Promise<ApiResponse<User>> {
    const response = await fetch('/api/user');
    return response.json();
}

六、泛型性能优化指南

6.1 类型实例化深度控制

// 避免过度嵌套
type DeepNested<T> = {
    data: T;
    next?: DeepNested<T>; // 谨慎使用递归类型
}

// 推荐扁平化结构
interface PaginatedResult<T> {
    current: number;
    total: number;
    items: T[];
}

6.2 类型缓存策略

// 使用类型别名缓存复杂类型
type ComplexType = {
    // ...复杂类型定义
};

function processData<T extends ComplexType>(data: T) {
    // ...
}

七、常见问题解决方案

7.1 类型推断失败处理

// 显式类型参数
const numbers = reverse<number>([1, 2, 3]); 

// 类型断言
const mixed = reverse(["a", 1] as (string | number)[]);

7.2 泛型函数重载

function parseInput<T extends string | number>(input: T): T extends string ? Date : number {
    // 实现逻辑
}

// 使用重载更清晰
function parseInput(input: string): Date;
function parseInput(input: number): number;
function parseInput(input: any): any {
    if (typeof input === "string") return new Date(input);
    return input;
}