个人主页:不叫猫先生,公众号:前端Clodplay ♂️ 作者简介:前端领域优质作者、阿里云专家博主,共同学习共同进步,一起加油呀! ✨优质专栏:VS Code插件开发极速入门 资料领取:前端进阶资料可以找我免费领取
可选参数
可选参数允许你在函数调用时不传递某些参数。在 TypeScript 中,你可以在参数名后面加上问号 ? 来声明可选参数,形参没传默认就是undefined
//函数
function click(形参?:参数类型):返回值类型{
}
//调用
//不传递实参
//click()
//传递实参
click(实参数值)
function greet(name?: string) {
if (name) {
console.log(`Hello, ${name}!`);
} else {
console.log('Hello, stranger!');
}
}
greet(); // 输出: Hello, stranger!
greet('Alice'); // 输出: Hello, Alice!
默认参数
默认参数允许你在函数定义时为某些参数指定默认值。如果调用函数时没有提供这些参数,将使用默认值。
function greet(name: string = 'stranger') {
console.log(`Hello, ${name}!`);
}
greet(); // 输出: Hello, stranger!
greet('Alice'); // 输出: Hello, Alice!
剩余参数
剩余参数允许你将不定数量的参数收集到一个数组中。剩余参数的类型必须是数组,具体是指明类型的数组。
// 示例 1: 计算一组数字的平均值
function average(...numbers: number[]): number {
let total = 0;
for (const num of numbers) {
total += num;
}
return total / numbers.length;
}
console.log(average(1, 2, 3, 4, 5)); // 输出: 3
// 示例 2: 打印出多个参数
function printValues(separator: string, ...values: any[]): void {
console.log(values.join(separator));
}
printValues(', ', 'apple', 'banana', 'orange'); // 输出: apple, banana, orange
// 示例 3: 剩余参数和普通参数一起使用
function greet(greeting: string, ...names: string[]): void {
console.log(`${greeting}, ${names.join(', ')}!`);
}
greet('Hello', 'Alice', 'Bob', 'Charlie'); // 输出: Hello, Alice, Bob, Charlie!
// 示例 4: 嵌套函数使用剩余参数
function combineArrays(...arrays: any[][]): any[] {
let result: any[] = [];
for (const arr of arrays) {
result = result.concat(arr);
}
return result;
}
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [true, false];
const combined = combineArrays(arr1, arr2, arr3);
console.log(combined); // 输出: [1, 2, 3, 'a', 'b', 'c', true, false]
项目中实际案例
设置快捷路径,比如设置路径src为@,src/assets/data设置为~data
resolve: {
alias: {
'@': resolve('src'),
'~data': resolve('src/assets/data'),
},
},
就需要手写一个resolve函数,进行路径的拼接,如下
const resolve = (...data: string[]) => path.resolve(__dirname, ...data)
参考链接
发表评论