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

TypeScript 泛型详解：定义、使用、特点优势、泛型约束与泛型数据类型

news 2026/5/11 5:42:08

在 TypeScript 开发中，泛型是实现类型复用、类型安全、解耦代码的核心特性，能够告别any类型带来的类型丢失问题，让组件、函数、数据类型具备适配多类型且保留类型校验的能力。本文按照规范代码缩进、命名、空格、格式书写风格，全面讲解 TS 泛型的定义、基础使用、特点优势、extends泛型约束、keyof关键字以及带泛型的常用数据类型。

一、泛型基本定义

泛型通俗理解就是类型的参数化，把类型当作参数传递，在定义函数、接口、类时不预先指定具体类型，而是在使用时再传入实际类型。

语法格式：通过尖括号<T>声明泛型参数，T是泛型占位符（可自定义为 U、V、K 等），遵循代码命名规范：语义化英文命名，不使用拼音，常量全大写、函数大写下划线分隔。

二、泛型基础使用

1. 泛型函数

遵循缩进 4 空格、大括号换行独占、运算符前后加空格、if / 函数语句规范书写：

// 通用返回函数，T 为泛型占位符 function Get_Result<T>(value: T): T { return value; } // 调用时指定具体类型 let strRes = Get_Result<string>("泛型测试"); let numRes = Get_Result<number>(100);

2. 泛型接口

interface Response_Data<T> { code: number; message: string; data: T; } // 接口使用泛型，指定 data 为数组类型 const res: Response_Data<number[]> = { code: 200, message: "请求成功", data: [1, 2, 3] };

3. 泛型类

class Base_Array<T> { private list: T[] = []; Add_Item(item: T): void { this.list.push(item); } Get_List(): T[] { return this.list; } }

三、泛型特点与优势

类型复用：一份代码可适配多种数据类型，无需为不同类型重复编写冗余函数和接口。
类型安全：编译期做类型校验，杜绝any类型导致的隐式类型转换错误，IDE 可智能提示属性和方法。
保留类型推导：使用泛型后，返回值、参数可自动推导类型，无需手动重复声明。
代码高内聚低耦合：抽象通用逻辑，将业务逻辑与具体数据类型解耦，提升可维护性。

四、extends 泛型约束

默认泛型T可以接收任意类型，若需要限制泛型的类型范围，就用extends做泛型约束，限定泛型必须满足指定结构或继承指定类型。

1. 基础约束（约束必须包含指定属性）

// 约束 T 必须包含 id 属性 interface Has_Id { id: number; } function Print_Id<T extends Has_Id>(obj: T): void { console.log(obj.id); }

2. 多泛型约束

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

五、了解 keyof 关键字

keyof是 TS 内置关键字，作用是获取对象类型的所有键名，联合成字面量类型，常和泛型搭配使用，实现对象属性的类型安全访问。

const CONST_USER = { name: "张三", age: 20, gender: "男" }; // keyof 提取对象所有键类型 type User_Key = keyof typeof CONST_USER; // 泛型 + keyof 约束，只能传入对象合法键名 function Get_Prop<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; }

优势：只能传入对象已存在的键，编译时报错，避免字符串硬编码导致的属性不存在问题。

六、带有泛型的常用数据类型

TS 内置大量自带泛型的工具类型和基础数据类型，日常开发高频使用：

1. 数组泛型

let arr: Array<string> = ["TS", "泛型"];

2. Promise 泛型

限定异步请求返回值类型：

function Get_Data(): Promise<number> { return new Promise((resolve) => { resolve(200); }); }

3. 内置泛型工具类型

Partial、Required、Readonly、Record都是自带泛型的工具类型：

// Record<K, T> 定义键类型 K、值类型 T 的对象 type User_Map = Record<string, number>; // Partial 把所有属性变为可选 type Partial_User = Partial<{ name: string; age: number }>;