TypeScript 如何做剩余参数类型

假设你经常给朋友点奶茶，比如“要3杯珍珠奶茶、1杯杨枝甘露、2杯冰美式”，这些“3杯珍珠奶茶”之类的，其实对应TypeScript里的“剩余参数”——就是把一堆零散的参数打包成数组，不用一个个列出来，那TypeScript里怎么给这堆打包的参数定类型呢？

先搞懂：什么是剩余参数？

先举个生活化的例子：你要做一个“攒零花钱买玩具”的函数，需要把每天攒的钱加起来。如果不用剩余参数，你得写死参数数量，比如function sum(a, b, c)，但万一哪天多攒了1块、少攒了2块，就得改代码，太麻烦。这时候就用剩余参数，把所有攒的钱打包成数组，就像把桌上的硬币都装进一个小盒子里，不管多少都能装。

在代码里，剩余参数用...表示，比如function sum(...money) {}，这里的...money就是把所有传进来的“攒钱数”都放进money数组里，相当于那个装硬币的盒子。

剩余参数的类型该怎么写？

接下来重点：这个装参数的数组，得告诉TypeScript“里面只能放什么类型的东西”——就像装硬币的盒子，你得说“只能放1块、5块的钢镚，不能放纸币或玩具”，不然TypeScript会报错。

TypeScript里给剩余参数定类型，是在...后面加数组类型。比如刚才的攒钱例子，所有攒的钱都是数字，那类型就是number[]，完整代码就是：

`typescript

function sum(...money: number[]) {

return money.reduce((total, curr) => total + curr, 0);

}

`

这里money的类型是number[]，意思是“这个数组里只能放数字”。你试试传sum(10, 20, 5)没问题，传sum(10, "20", 5)就会报错——因为"20"是字符串，不符合“只能放数字”的要求，相当于你往装硬币的盒子里放了张纸币，TypeScript直接拦下来。

进阶：如果剩余参数是混合类型怎么办？

有时候你需要放不同类型的参数，比如做一个“整理书包”的函数，要装课本（字符串，比如“语文书”）、文具（比如{ type: "铅笔", color: "红色" }）、笔记本（数字，比如“3本”）。这时候得用“联合类型”告诉TypeScript“数组里可以是这几种类型的任意一种”，就像书包里可以放课本、文具、笔记本。

代码例子：

`typescript

// 定义文具的类型

type Stationery = { type: string; color: string };

// 剩余参数的类型是联合类型：字符串、Stationery、数字

function packBag(...items: (string | Stationery | number)[]) {

console.log("整理好的书包里有：", items);

}

`

这样调用就没问题：packBag("语文书", { type: "铅笔", color: "红色" }, 3)，但如果传了个布尔值true，TypeScript就会报错，因为布尔值不在允许的类型里。

要注意的小细节

• 剩余参数只能有一个，而且必须放在最后——就像书包里的东西，你得先放课本，最后放要打包的零散小物件，不能反过来。
• 剩余参数的类型是数组，不能直接写number——比如function sum(...money: number)是错的，就像你说“盒子只能放1块钢镚”，但盒子要装多个，得说“盒子里的每一个都是1块钢镚”，也就是number[]。

用TypeScript给剩余参数定类型，其实就是给那个打包参数的“盒子”定规则：里面只能放你允许的内容，这样代码不会乱，运行时也不容易出问题，就像你给朋友点奶茶，提前说清楚“只能选茶底的选项”，不会拿到奇怪的饮品。