- • 使用 ... 收集剩余参数为数组
- • 剩余参数必须是最后一个参数
- • 类型可以是数组或元组
- • 替代 arguments 对象，有类型检查
4.3 剩余参数
处理不定数量的参数
🎯 学习目标
- 掌握剩余参数的语法和类型
- 理解剩余参数与 arguments 的区别
- 学会在类型定义中使用剩余参数
- 了解剩余参数的实际应用场景
📝 基本语法
// 剩余参数使用 ... 语法
function sum(...numbers: number[]): number {
return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 6
sum(1, 2, 3, 4, 5); // 15
sum(); // 0
// 结合普通参数
function greet(greeting: string, ...names: string[]): string {
return `${greeting}, ${names.join(' and ')}!`;
}
greet('Hello', 'Alice'); // "Hello, Alice!"
greet('Hi', 'Alice', 'Bob'); // "Hi, Alice and Bob!"
greet('Hey', 'Alice', 'Bob', 'Charlie'); // "Hey, Alice and Bob and Charlie!"
🔧 类型定义
// 函数类型中的剩余参数
type MathOperation = (initial: number, ...operands: number[]) => number;
const add: MathOperation = (initial, ...operands) => {
return operands.reduce((sum, n) => sum + n, initial);
};
// 元组类型作为剩余参数
function printCoord(...coords: [number, number, string]) {
const [x, y, label] = coords;
console.log(`${label}: (${x}, ${y})`);
}
printCoord(10, 20, 'Point A');
💻 实际应用
// 日志函数
function log(level: 'info' | 'warn' | 'error', ...messages: string[]): void {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] [${level.toUpperCase()}]`, ...messages);
}
log('info', 'User logged in', 'userId: 123');
log('error', 'Database error', 'Connection timeout');
// 工具函数：合并对象
function merge<T extends object>(target: T, ...sources: Partial<T>[]): T {
return Object.assign({}, target, ...sources);
}
const defaults = { theme: 'light', lang: 'en' };
const config = merge(defaults, { theme: 'dark' }, { lang: 'zh' });
📝 本节小结
✅