如何在TypeScript中优雅地使用默认参数=

在函数定义中使用默认参数

在TypeScript的函数定义里，默认参数是一个非常实用的特性。它允许我们在函数声明时为参数指定默认值。当调用函数时如果没有为该参数传入值，那么就会使用这个默认值。例如，我们定义一个简单的函数来计算两个数的和，其中第二个参数设置默认值为0：

function addNumbers(a: number, b: number = 0): number {
    return a + b;
}
// 调用函数，只传入一个参数，b将使用默认值0
let result1 = addNumbers(5); 
// 调用函数，传入两个参数
let result2 = addNumbers(3, 7);

在上述代码中，addNumbers函数接受两个number类型的参数a和b，b的默认值为0。当我们调用addNumbers(5)时，由于没有为b传入值，所以b就会使用默认值0，最终返回5。而调用addNumbers(3, 7)时，b的值被指定为7，返回10。

默认参数的类型必须与函数定义的参数类型匹配。如果我们尝试为参数指定一个不匹配的默认值，TypeScript编译器会报错。例如：

// 错误示例，字符串类型与number类型不匹配
function incorrectAddNumbers(a: number, b: number = '5'): number { 
    return a + b;
}

这里编译器会提示Type '"5"' is not assignable to type 'number'，明确指出了类型不匹配的问题。

默认参数的位置

在TypeScript中，默认参数可以放在函数参数列表的任何位置，但通常建议将它们放在参数列表的末尾。这是因为在调用函数时，参数是按照顺序匹配的。如果默认参数不在末尾，调用函数时可能会引起混淆。例如：

function greet(name: string = 'Guest', message: string): void {
    console.log(`${message}, ${name}!`);
}
// 调用函数，按照参数顺序，这里容易混淆
greet('Hello', 'John');

上述代码中，本意可能是name为John，message为Hello，但由于默认参数name不在末尾，按照顺序name被赋值为Hello，message被赋值为John，这与预期不符。正确的做法是将默认参数放在末尾：

function correctGreet(message: string, name: string = 'Guest'): void {
    console.log(`${message}, ${name}!`);
}
correctGreet('Hello', 'John'); 
correctGreet('Hello');

这样调用时就清晰明了，correctGreet('Hello', 'John')输出Hello, John!，correctGreet('Hello')输出Hello, Guest!。

默认参数与可选参数的区别

可选参数和默认参数在某些方面有相似之处，但也有明显的区别。可选参数使用?来标识，它表示该参数可以不传，但如果不传，在函数内部使用该参数时需要进行额外的检查。而默认参数在函数调用时如果不传，会自动使用定义的默认值。例如：

// 可选参数示例
function printOptionalMessage(message?: string) {
    if (message) {
        console.log(message);
    }
}
printOptionalMessage(); 
printOptionalMessage('Hello'); 

// 默认参数示例
function printDefaultMessage(message: string = 'Default Message') {
    console.log(message);
}
printDefaultMessage(); 
printDefaultMessage('Hello');

在printOptionalMessage函数中，由于message是可选参数，在函数内部需要检查message是否存在。而printDefaultMessage函数中，message有默认值，无论是否传入参数，都可以直接使用message，不需要额外的检查。

在类的方法中使用默认参数

类的方法同样可以使用默认参数。这在很多场景下非常有用，比如在初始化类的一些属性或者执行特定操作时。例如，我们定义一个Rectangle类，有一个计算面积的方法，其中一个边长可以有默认值：

class Rectangle {
    constructor(private width: number, private height: number = 1) { }
    calculateArea(): number {
        return this.width * this.height;
    }
}
let rect1 = new Rectangle(5); 
let rect2 = new Rectangle(3, 4);

在上述Rectangle类中，height参数有默认值1。当创建Rectangle实例时，如果只传入一个参数，height就会使用默认值1。rect1的面积为5（因为width为5，height为默认值1），rect2的面积为12（width为3，height为4）。

默认参数与重载

在TypeScript中，函数重载允许我们为同一个函数定义多个不同的签名。默认参数在重载的场景下需要特别注意。例如，我们定义一个logMessage函数，它可以接受不同类型的参数并进行日志记录：

function logMessage(message: string): void;
function logMessage(message: number): void;
function logMessage(message: any, prefix: string = '[Info] '): void {
    if (typeof message ==='string') {
        console.log(prefix + message);
    } else if (typeof message === 'number') {
        console.log(prefix + 'The number is:'+ message);
    }
}
logMessage('Hello'); 
logMessage(10); 
logMessage('Custom', '[Debug] ');

这里定义了两个重载签名，然后是实际的函数实现。在实现中，prefix参数有默认值[Info] 。当调用logMessage('Hello')和logMessage(10)时，会使用默认的prefix值。而调用logMessage('Custom', '[Debug] ')时，prefix的值被指定为[Debug] 。需要注意的是，默认参数只能在函数的实现中定义，不能在重载签名中定义。如果在重载签名中定义默认参数，TypeScript编译器会报错。

解构赋值与默认参数结合使用

解构赋值是TypeScript中非常强大的特性，它可以方便地从数组或对象中提取值。当解构赋值与默认参数结合使用时，能进一步提高代码的灵活性和简洁性。

对象解构与默认参数

从对象中解构值并设置默认参数是很常见的需求。例如，我们有一个函数接受一个包含name和age属性的对象，并且age有默认值：

function printPerson({ name, age = 18 }: { name: string; age?: number }): void {
    console.log(`${name} is ${age} years old.`);
}
printPerson({ name: 'Alice' }); 
printPerson({ name: 'Bob', age: 25 });

在上述代码中，printPerson函数通过对象解构从传入的对象中获取name和age。如果传入的对象中没有age属性，那么age会使用默认值18。

数组解构与默认参数

数组解构同样可以与默认参数结合。比如我们有一个函数接受一个包含两个元素的数组，第二个元素有默认值：

function processArray([a, b = 'default value']: [string, string?]): void {
    console.log(`a: ${a}, b: ${b}`);
}
processArray(['value1']); 
processArray(['value1', 'value2']);

这里processArray函数通过数组解构获取a和b。当数组只有一个元素时，b会使用默认值default value。

作用域与默认参数

在函数中，默认参数的作用域遵循JavaScript和TypeScript的作用域规则。默认参数表达式在函数调用时才会被求值，并且其作用域是函数的作用域。例如：

let x = 10;
function multiplyByX(y: number, multiplier: number = x): number {
    return y * multiplier;
}
let result = multiplyByX(5); 
x = 20;
let anotherResult = multiplyByX(5);

在上述代码中，multiplier的默认值是x，在调用multiplyByX(5)时，multiplier的值为10，所以result为50。当x的值后来被改为20时，再次调用multiplyByX(5)，multiplier的值仍然是10，因为默认参数表达式在函数调用时就已经求值了。

避免的常见错误

在使用TypeScript默认参数时，有几个常见错误需要避免。

错误的类型匹配

如前文提到的，默认参数的类型必须与函数参数类型匹配。这不仅适用于基本类型，对于复杂类型如对象、数组等同样适用。例如：

// 错误示例，对象类型不匹配
function updateObject(obj: { key: string }, newKey: string, newValue: string, defaultObj: { key: number } = { key: 123 }): { key: string } {
    obj[newKey] = newValue;
    return obj;
}

这里defaultObj的类型与obj的类型不匹配，编译器会报错。

意外的参数覆盖

当默认参数与函数内部定义的变量同名时，可能会导致意外的参数覆盖。例如：

function exampleFunction(param: string = 'default') {
    let param = 'new value';
    console.log(param);
}
exampleFunction();

在上述代码中，函数内部重新定义了param变量，导致默认参数param被覆盖，输出new value。这可能不是预期的行为，应该避免这种变量名的重复定义。

在重载签名中定义默认参数

正如前面提到的，默认参数只能在函数的实现中定义，不能在重载签名中定义。例如：

// 错误示例，在重载签名中定义默认参数
function incorrectOverloadFunction(message: string, prefix: string = '[Error] '): void;
function incorrectOverloadFunction(message: string): void {
    console.log('[Error]'+ message);
}

编译器会提示A parameter initializer is only allowed in a function implementation.，明确指出不能在重载签名中定义默认参数。

在实际项目中的应用场景

配置项设置

在实际项目中，很多函数可能需要一些配置项。通过默认参数可以为这些配置项设置合理的默认值，使函数在大多数情况下不需要用户传入过多的参数。例如，一个发送HTTP请求的函数：

interface RequestOptions {
    method: string;
    headers: { [key: string]: string };
    timeout: number;
}
function sendRequest(url: string, options: RequestOptions = {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    timeout: 5000
}): void {
    // 实际的请求逻辑
    console.log(`Sending ${options.method} request to ${url} with headers: ${JSON.stringify(options.headers)} and timeout: ${options.timeout}`);
}
sendRequest('https://example.com/api'); 
sendRequest('https://example.com/another-api', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });

在sendRequest函数中，options参数有默认值，包含常用的请求方法、请求头和超时时间。用户在调用时如果不需要修改这些默认值，可以直接传入URL。如果有特殊需求，如修改请求方法或请求头，就可以传入自定义的options对象。

组件库开发

在前端组件库开发中，默认参数也经常用于组件的属性设置。例如，一个按钮组件：

interface ButtonProps {
    label: string;
    type: 'button' | 'submit' | 'reset';
    disabled: boolean;
}
function Button({ label, type = 'button', disabled = false }: ButtonProps): JSX.Element {
    return <button type={type} disabled={disabled}>{label}</button>;
}
// 使用按钮组件，使用默认的type和disabled值
<Button label="Click me" /> 
// 使用按钮组件，自定义type和disabled值
<Button label="Submit" type="submit" disabled={true} />

这里Button组件接受ButtonProps类型的参数，type和disabled都有默认值。这样在使用组件时，如果不需要特殊设置这两个属性，就可以省略不写，使代码更加简洁。

数据处理函数

在数据处理函数中，默认参数可以简化数据处理的操作。比如一个格式化日期的函数：

function formatDate(date: Date, format: string = 'yyyy - MM - dd'): string {
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    return format.replace('yyyy', year.toString()).replace('MM', month).replace('dd', day);
}
let now = new Date();
let defaultFormat = formatDate(now); 
let customFormat = formatDate(now, 'MM/dd/yyyy');

在formatDate函数中，format参数有默认值yyyy - MM - dd。如果用户不需要特殊的日期格式，直接调用函数就可以得到默认格式的日期字符串。如果有自定义格式的需求，就传入自定义的format字符串。

总结与最佳实践

通过以上对TypeScript中默认参数的详细探讨，我们了解到默认参数在函数定义、类方法、解构赋值等多种场景下的应用，以及与重载、作用域相关的要点和常见错误。

在实际使用中，为了优雅地使用默认参数，我们应该遵循以下最佳实践：

将默认参数放在参数列表末尾：这样可以避免调用函数时参数顺序引起的混淆。
确保类型匹配：默认参数的类型要与函数参数定义的类型严格匹配，避免类型错误。
避免在重载签名中定义默认参数：遵循TypeScript的规则，只在函数实现中定义默认参数。
合理利用解构赋值与默认参数结合：在处理对象或数组参数时，这种结合方式可以使代码更加简洁和灵活。
在实际项目中根据场景合理设置默认参数：如在配置项设置、组件库开发、数据处理等场景中，为参数设置合理的默认值，提高代码的易用性和可维护性。

总之，熟练掌握并优雅地使用TypeScript的默认参数，可以使我们的代码更加简洁、灵活和健壮，提升开发效率和代码质量。