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

TypeScript 极简指南：那个尖括号＜T＞到底是什么？

news 2026/3/26 18:27:54

在接触 Vue 3 + TypeScript 项目时，你一定见过这种写法：

interface PageResult { list: T[]; total: number; }

或者是：

const result: PageResult<User[]> = ...

很多初学者看到这个尖括号<T>就头大：“这又是什么新语法？”

别被它吓跑了。今天我们抛开晦涩的术语，用最通俗的生活案例，带你彻底搞懂 TypeScript 中的泛型。

一、什么是泛型？

简单来说，泛型就是一个“占位符”。

你可以把它想象成我们在填空题里留下的下划线_，或者是编程里的变量x。它代表一种“暂时不确定的类型”。

普通变量：const a = 1，a的值是可以变的。
泛型变量：<T>，T代表的类型是可以变的。

二、为什么要用它？（痛点分析）

假设你是一个包装盒工厂的老板，你需要用代码描述你的产品。

1. 如果不用泛型（死板的写法）

你需要为每一种产品都写一个定义，非常累：

// 玩具盒 interface ToyBox { content: Toy; }  // 鞋子盒 interface ShoeBox { content: Shoe; }  // 书籍盒 interface BookBox { content: Book; }

缺点：代码重复，逻辑一样，只是里面装的东西不一样。

2. 如果用泛型（灵活的写法）

你只需要写一个“万能盒子”的定义：

// 定义一个万能盒，里面装什么暂时不管，先用 T 占位 interface Box { content: T; } 当你需要具体使用时，再告诉它装什么： // 这是一个玩具盒，T 变成了 Toy const toyBox: Box<Toy> = { content: myToy };  // 这是一个鞋子盒，T 变成了 Shoe const shoeBox: Box<Shoe> = { content: myShoe };

优点：一套代码，复用无限次。

三、它是怎么工作的？

回到文章开头的例子：

interface PageResult { list: T[]; total: number; }

这里的<T>就像是一个“广播”。

定义时：T只是一个符号，代表“某种类型”。
使用时：当你写PageResult<User>，你相当于按下了开关：
- 接口里所有的T，瞬间全部变成了User。
- list的类型变成了User[]。
- 如果接口里还有其他地方用了T（比如currentItem: T），那它也会变成User。

这保证了整个对象内部数据类型的一致性。

四、什么时候需要写尖括号`<...>`？

这是最容易混淆的地方，记住这两个原则：

1. 定义时：不需要写具体类型

你在定义接口或函数时，只需要声明“这里有个坑”，不需要填坑。

// ✅ 正确：定义一个泛型接口 interface Data { value: T }  // ❌ 错误：定义时不能指定具体类型 interface Data { value: string }

2. 使用时：必须填坑

当你把这个接口当做类型来用的时候，必须告诉它T到底是什么。

// ✅ 正确：使用时指定 T 为 number const numData: Data<number> = { value: 100 }  // ✅ 正确：使用时指定 T 为 string const strData: Data<string> = { value: "hello" }  // ❌ 错误：使用时不指定具体类型（某些严格模式下会报错） const data: Data = { value: 100 }