【TypeScript中的泛型：灵活且强大的类型工具】_typescript泛型的优势是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_74887700/article/details/147098705

在现代前端和后端开发中，TypeScript以其强大的静态类型系统成为开发者的首选语言。而泛型（Generics）作为TypeScript的核心特性之一，为开发者提供了灵活性和类型安全的完美结合。本文将深入探讨TypeScript中泛型的使用方法，并通过对比两个流行框架（React 和 NestJS）中泛型的应用场景，帮助开发者更好地理解其特点并做出技术选型。

一、为什么泛型如此重要？

泛型是TypeScript中一种强大的抽象工具，它允许我们在定义函数、接口或类时使用占位符类型的参数。通过泛型，我们可以在不牺牲类型安全的前提下编写高度复用的代码。

泛型的优势：

类型安全：确保代码在编译时就能捕获类型错误。
代码复用：避免重复代码，提高开发效率。
灵活性：支持多种数据类型，适应不同场景需求。

二、泛型的基础用法

1. 泛型函数

泛型函数允许我们定义一个可以处理任意类型的函数。以下是一个简单的例子：

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

const num = identity<number>(42); // 类型为 number
const str = identity<string>("Hello, TypeScript!"); // 类型为 string

console.log(num, str);

在这个例子中，T 是一个类型变量，表示函数可以接受任意类型的参数并返回相同类型的值。

2. 泛型接口

通过泛型接口，我们可以定义一组通用的结构化类型规则：

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

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

console.log(pair1, pair2);

3. 泛型类

泛型类适用于需要操作多种数据类型的场景，例如集合类：

class Box<T> {
    private contents: T;

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

    getContents(): T {
        return this.contents;
    }
}

const box1 = new Box<number>(100);
const box2 = new Box<string>("TypeScript");

console.log(box1.getContents(), box2.getContents());

三、高级泛型技巧

1. 泛型约束

有时我们需要限制泛型的类型范围，可以通过 extends 关键字实现：

function getLength<T extends { length: number }>(item: T): number {
    return item.length;
}

console.log(getLength("Hello")); // 输出 5
console.log(getLength([1, 2, 3])); // 输出 3
// console.log(getLength(42)); // 编译错误，数字没有 length 属性

2. 默认泛型类型

可以为泛型指定默认类型，简化调用：

function createArray<T = string>(length: number, value: T): T[] {
    return Array(length).fill(value);
}

const strings = createArray(3, "default"); // 类型为 string[]
const numbers = createArray<number>(3, 42); // 类型为 number[]

console.log(strings, numbers);

3. 条件类型与映射类型

条件类型允许根据条件推断类型，映射类型则用于批量操作对象属性：

type Nullable<T> = {
    [P in keyof T]: T[P] | null;
};

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

type NullableUser = Nullable<User>;

const user: NullableUser = {
    name: null,
    age: null,
};

console.log(user);

四、React 与 NestJS 中的泛型应用对比

1. React 中的泛型

在React中，泛型常用于组件的Props和State类型定义，以及Hooks的封装：

（1）泛型组件

import React from "react";

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

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

const App = () => {
    const numbers = [1, 2, 3];
    return (
        <List items={numbers} renderItem={(num) => <span>{num}</span>} />
    );
};

（2）泛型Hooks

import { useState } from "react";

function useArray<T>(initial: T[]): { array: T[]; add: (item: T) => void } {
    const [array, setArray] = useState(initial);

    const add = (item: T) => {
        setArray([...array, item]);
    };

    return { array, add };
}

2. NestJS 中的泛型

NestJS 是一个基于TypeScript的后端框架，泛型在其依赖注入和DTO验证中广泛应用：

（1）泛型服务

import { Injectable } from "@nestjs/common";

@Injectable()
export class DataService<T> {
    private data: T[] = [];

    addItem(item: T): void {
        this.data.push(item);
    }

    getItems(): T[] {
        return this.data;
    }
}

（2）泛型控制器

import { Controller, Get, Post, Body } from "@nestjs/common";
import { DataService } from "./data.service";

@Controller("data")
export class DataController<T> {
    constructor(private readonly dataService: DataService<T>) {}

    @Post()
    addItem(@Body() item: T): void {
        this.dataService.addItem(item);
    }

    @Get()
    getItems(): T[] {
        return this.dataService.getItems();
    }
}

3. 对比总结

特性	React	NestJS
主要用途	前端组件与状态管理	后端服务与API设计
泛型应用场景	组件Props/State、Hooks封装	服务层、DTO验证
学习曲线	较低	较高
类型推导能力	强	更强