TypeScript中的可选参数与默认参数详解

可选参数

在 TypeScript 中，函数的参数并不总是必须传递的。有时我们希望某些参数是可选的，只有在必要时才提供。这就是可选参数发挥作用的地方。

可选参数的语法

可选参数通过在参数名后面加上问号（?）来表示。例如：

function greet(name: string, message?: string) {
    if (message) {
        console.log(`Hello, ${name}! ${message}`);
    } else {
        console.log(`Hello, ${name}!`);
    }
}

greet('Alice');
greet('Bob', 'How are you?');

在上述代码中，message 参数是可选的。我们可以只传递 name 参数来调用 greet 函数，也可以同时传递 name 和 message 参数。

可选参数的类型检查

TypeScript 会对可选参数进行严格的类型检查。如果一个参数被声明为可选的，那么在使用该参数时，必须先检查它是否已被提供。例如：

function printLength(value: string | number, suffix?: string) {
    let length: number;
    if (typeof value === 'string') {
        length = value.length;
    } else {
        length = value.toString().length;
    }
    if (suffix) {
        console.log(`${length} ${suffix}`);
    } else {
        console.log(length);
    }
}

printLength('hello');
printLength(123, 'chars');

这里，suffix 是可选参数。在使用 suffix 之前，我们先通过 if (suffix) 检查它是否存在，以避免潜在的运行时错误。如果没有这个检查，TypeScript 会给出编译错误，提示我们可能在 suffix 为 undefined 时使用它。

可选参数与函数重载

在处理函数重载时，可选参数也需要特别注意。函数重载允许我们为同一个函数定义多个不同的参数列表。例如：

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}

console.log(add(1, 2));
console.log(add('a', 'b'));

如果在重载函数中使用可选参数，要确保所有重载定义和实现都保持一致。例如：

function calculate(a: number, b: number, operation?: string): number;
function calculate(a: string, b: string, operation?: string): string;
function calculate(a: any, b: any, operation?: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        if (operation === '+') {
            return a + b;
        } else if (operation === '-') {
            return a - b;
        } else {
            return a + b;
        }
    } else if (typeof a ==='string' && typeof b ==='string') {
        if (operation === 'concat') {
            return a + b;
        } else {
            return a + b;
        }
    }
    return a + b;
}

console.log(calculate(1, 2, '+'));
console.log(calculate('a', 'b', 'concat'));

在这个例子中，operation 是可选参数。所有的重载定义和实际实现都考虑了 operation 可能不存在的情况，以确保类型安全。

可选参数在接口和类型别名中的应用

在接口和类型别名中，也可以定义包含可选属性的类型，这与函数的可选参数概念类似。例如：

interface User {
    name: string;
    age?: number;
}

function displayUser(user: User) {
    let message = `Name: ${user.name}`;
    if (user.age) {
        message += `, Age: ${user.age}`;
    }
    console.log(message);
}

let alice: User = { name: 'Alice' };
let bob: User = { name: 'Bob', age: 30 };

displayUser(alice);
displayUser(bob);

这里，User 接口中的 age 属性是可选的。在 displayUser 函数中，我们根据 user.age 是否存在来决定是否在输出中包含年龄信息。

默认参数

默认参数是 TypeScript 中另一个强大的功能，它允许我们为函数参数指定默认值。当调用函数时，如果没有提供该参数的值，将使用默认值。

默认参数的语法

在函数定义中，通过在参数名后使用赋值运算符（=）来指定默认值。例如：

function greet(name: string, message = 'How are you?') {
    console.log(`Hello, ${name}! ${message}`);
}

greet('Alice');
greet('Bob', 'Good day!');

在上述代码中，message 参数有一个默认值 'How are you?'。如果调用 greet 函数时没有提供 message 参数的值，将使用这个默认值。

默认参数的类型推断

TypeScript 会根据默认值的类型来推断参数的类型。例如：

function multiply(a: number, b = 2) {
    return a * b;
}

console.log(multiply(5));
console.log(multiply(3, 4));

这里，由于 b 的默认值是 2（类型为 number），TypeScript 推断 b 的类型为 number。即使在函数定义中没有显式指定 b 的类型，TypeScript 也能正确进行类型检查。

默认参数与剩余参数

当函数同时包含默认参数和剩余参数时，需要注意它们的位置关系。剩余参数必须放在默认参数之后。例如：

function sumNumbers(...numbers: number[], start = 0) {
    return numbers.reduce((acc, num) => acc + num, start);
}

console.log(sumNumbers(1, 2, 3));
console.log(sumNumbers(4, 5, 6, 7, 8, 9, 10, 100));

在这个例子中，start 是默认参数，...numbers 是剩余参数。我们可以在调用 sumNumbers 函数时提供不同数量的数字，并且可以选择是否指定 start 的值。

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

在类的方法中，同样可以使用默认参数。例如：

class Calculator {
    add(a: number, b = 0) {
        return a + b;
    }
}

let calculator = new Calculator();
console.log(calculator.add(5));
console.log(calculator.add(3, 4));

这里，Calculator 类的 add 方法有一个默认参数 b。通过这种方式，我们可以灵活地调用 add 方法，根据需要提供或不提供 b 的值。

默认参数与函数重载

在函数重载的情况下使用默认参数时，需要注意确保所有的重载定义和实现都与默认参数的行为一致。例如：

function processData(data: string, format?: string): string;
function processData(data: number, format?: string): number;
function processData(data: any, format = 'default'): any {
    if (typeof data ==='string') {
        if (format === 'uppercase') {
            return data.toUpperCase();
        } else {
            return data;
        }
    } else if (typeof data === 'number') {
        if (format === 'double') {
            return data * 2;
        } else {
            return data;
        }
    }
    return data;
}

console.log(processData('hello'));
console.log(processData(5, 'double'));

在这个例子中，format 是默认参数。所有的重载定义都考虑了 format 参数的存在和默认值，以确保函数在不同参数类型下的行为一致。

可选参数与默认参数的比较

语法差异

可选参数通过在参数名后加问号（?）来表示，而默认参数是在参数名后使用赋值运算符（=）并指定一个默认值。例如：

// 可选参数
function optionalFunc(a: string, b?: string) {}

// 默认参数
function defaultFunc(a: string, b = 'default value') {}

这种语法上的差异直观地体现了两者的不同用途。可选参数强调参数可以不传递，而默认参数强调在未传递参数时使用默认值。

调用方式差异

在调用函数时，对于可选参数，我们可以选择传递或不传递该参数。对于默认参数，如果不传递参数，将使用默认值，但也可以传递参数来覆盖默认值。例如：

function optionalGreet(name: string, message?: string) {
    if (message) {
        console.log(`Hello, ${name}! ${message}`);
    } else {
        console.log(`Hello, ${name}!`);
    }
}

function defaultGreet(name: string, message = 'How are you?') {
    console.log(`Hello, ${name}! ${message}`);
}

optionalGreet('Alice');
optionalGreet('Bob', 'Goodbye!');

defaultGreet('Charlie');
defaultGreet('David', 'Have a nice day!');

可以看到，可选参数在调用时更具灵活性，而默认参数则提供了一种简洁的方式来处理常见的默认情况。

类型检查和使用差异

对于可选参数，在使用之前必须检查它是否存在，以避免运行时错误。而默认参数在使用时不需要额外的存在性检查，因为它一定有值（要么是传递的值，要么是默认值）。例如：

function printOptionalLength(value: string, suffix?: string) {
    if (suffix) {
        console.log(`${value.length} ${suffix}`);
    } else {
        console.log(value.length);
    }
}

function printDefaultLength(value: string, suffix = 'chars') {
    console.log(`${value.length} ${suffix}`);
}

在 printOptionalLength 函数中，我们需要检查 suffix 是否存在，而在 printDefaultLength 函数中，suffix 总是有值的，所以可以直接使用。

对函数重载的影响差异

在函数重载中，可选参数和默认参数的处理方式有所不同。对于可选参数，所有重载定义都要考虑参数是否可选的情况。对于默认参数，重载定义需要与默认值的使用方式保持一致。例如：

// 可选参数的函数重载
function operate(a: number, b: number, op?: string): number;
function operate(a: string, b: string, op?: string): string;
function operate(a: any, b: any, op?: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        if (op === '+') {
            return a + b;
        } else {
            return a - b;
        }
    } else if (typeof a ==='string' && typeof b ==='string') {
        if (op === 'concat') {
            return a + b;
        } else {
            return a - b;
        }
    }
    return a - b;
}

// 默认参数的函数重载
function process(a: number, format = 'default'): number;
function process(a: string, format = 'default'): string;
function process(a: any, format = 'default'): any {
    if (typeof a === 'number') {
        if (format === 'double') {
            return a * 2;
        } else {
            return a;
        }
    } else if (typeof a ==='string') {
        if (format === 'uppercase') {
            return a.toUpperCase();
        } else {
            return a;
        }
    }
    return a;
}

在 operate 函数中，op 是可选参数，所有重载定义都要考虑它可能不存在的情况。而在 process 函数中，format 是默认参数，重载定义要与默认值的使用相匹配。

适用场景差异

可选参数适用于某些参数在大多数情况下不需要传递，但偶尔可能需要提供额外信息的场景。例如，一个日志记录函数，通常只记录主要信息，但有时可能需要添加一些额外的上下文信息。

function log(message: string, context?: string) {
    if (context) {
        console.log(`${context}: ${message}`);
    } else {
        console.log(message);
    }
}

log('Operation completed');
log('Error occurred', 'Network issue');

默认参数则适用于参数有一个合理的默认值，并且在大多数情况下使用这个默认值的场景。例如，一个设置页面背景颜色的函数，默认颜色可能是白色。

function setBackgroundColor(color = 'white') {
    document.body.style.backgroundColor = color;
}

setBackgroundColor();
setBackgroundColor('blue');

通过理解可选参数和默认参数的差异，我们可以在不同的编程场景中选择最合适的方式来定义函数参数，提高代码的可读性、可维护性和灵活性。

可选参数和默认参数在实际项目中的应用案例

前端表单验证

在前端开发中，表单验证是一个常见的任务。假设我们有一个验证用户名的函数，用户名长度可能有一个默认的最小长度要求，但也允许在特殊情况下指定不同的最小长度。

function validateUsername(username: string, minLength = 3) {
    if (username.length < minLength) {
        return `Username must be at least ${minLength} characters long.`;
    }
    return null;
}

let error1 = validateUsername('abc');
let error2 = validateUsername('ab', 5);

这里，minLength 使用默认参数，在大多数情况下，用户名最小长度为 3。但在某些场景下，如更严格的安全要求时，可以传递一个更大的 minLength 值。

同时，我们可能还有一个验证邮箱的函数，其中邮箱的格式可能有多种，我们可以使用可选参数来处理这种情况。

function validateEmail(email: string, format?: 'basic' | 'extended') {
    let basicRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    let extendedRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (format === 'basic') {
        if (!basicRegex.test(email)) {
            return 'Email format is not valid (basic).';
        }
    } else if (format === 'extended') {
        if (!extendedRegex.test(email)) {
            return 'Email format is not valid (extended).';
        }
    } else {
        if (!basicRegex.test(email)) {
            return 'Email format is not valid (default).';
        }
    }
    return null;
}

let emailError1 = validateEmail('test@example.com');
let emailError2 = validateEmail('test.example.com', 'basic');

在这个例子中，format 是可选参数，根据是否传递以及传递的值来决定使用哪种邮箱格式验证规则。

数据请求

在进行数据请求时，我们经常需要设置一些请求参数。例如，从服务器获取用户列表，可能需要指定每页返回的数量以及偏移量。

async function fetchUsers(pageSize = 10, offset = 0) {
    let response = await fetch(`/api/users?pageSize=${pageSize}&offset=${offset}`);
    return response.json();
}

let users1 = await fetchUsers();
let users2 = await fetchUsers(20, 10);

这里，pageSize 和 offset 都使用默认参数，大多数情况下使用默认的每页 10 条数据，从偏移量 0 开始。但在需要更多数据或者指定特定偏移量时，可以传递相应的值。

另外，在请求时可能还需要添加一些额外的请求头，这些请求头不是每次都需要设置，所以可以使用可选参数。

async function fetchData(url: string, headers?: { [key: string]: string }) {
    let options: RequestInit = {};
    if (headers) {
        options.headers = headers;
    }
    let response = await fetch(url, options);
    return response.json();
}

let data1 = await fetchData('/api/data');
let data2 = await fetchData('/api/data', { 'Authorization': 'Bearer token' });

在这个例子中，headers 是可选参数，只有在需要特定请求头时才传递。

组件开发

在前端组件开发中，比如开发一个按钮组件，按钮可能有不同的样式，我们可以通过默认参数来设置默认样式，同时也允许用户通过可选参数来覆盖默认样式。

interface ButtonProps {
    text: string;
    type?: 'primary' |'secondary' | 'danger';
}

function Button({ text, type = 'primary' }: ButtonProps) {
    let className = `button ${type}`;
    return `<button class="${className}">${text}</button>`;
}

let primaryButton = Button({ text: 'Click me' });
let secondaryButton = Button({ text: 'Another click', type:'secondary' });

这里，type 参数使用默认参数设置为 primary，表示按钮默认是主样式。但用户可以通过传递 type 值来改变按钮样式。

再比如开发一个弹窗组件，弹窗可能有不同的尺寸，我们可以使用可选参数来指定尺寸。

interface ModalProps {
    title: string;
    content: string;
    size?: 'small' | 'medium' | 'large';
}

function Modal({ title, content, size ='medium' }: ModalProps) {
    let sizeClass = size ==='small'? 'modal-small' : size === 'large'? 'modal-large' :'modal-medium';
    return `
        <div class="modal ${sizeClass}">
            <h2>${title}</h2>
            <p>${content}</p>
        </div>
    `;
}

let smallModal = Modal({ title: 'Small Modal', content: 'This is a small modal.', size:'small' });
let defaultModal = Modal({ title: 'Default Modal', content: 'This is a default sized modal.' });

在这个弹窗组件中，size 是可选参数，默认尺寸为 medium，用户可以根据需要选择不同的尺寸。

通过这些实际项目中的应用案例，可以看到可选参数和默认参数在提高代码灵活性和可维护性方面发挥了重要作用，使得我们能够更好地应对各种不同的业务需求。

可选参数和默认参数可能带来的问题及解决方法

可选参数可能导致的运行时错误

由于可选参数在调用函数时可能不传递，这就要求在函数内部使用可选参数之前必须进行存在性检查。如果忘记检查，就可能导致运行时错误。例如：

function displayFullName(firstName: string, lastName?: string) {
    // 忘记检查lastName是否存在
    let fullName = `${firstName} ${lastName}`;
    console.log(fullName);
}

displayFullName('John');

在上述代码中，当 lastName 未传递时，会导致 fullName 中包含 undefined，这显然不是我们想要的结果。

解决方法：在使用可选参数之前，始终进行存在性检查。可以使用 if 语句或者可选链操作符（?.）来进行检查。例如：

function displayFullName(firstName: string, lastName?: string) {
    let fullName = `${firstName} ${lastName?.}`;
    console.log(fullName);
}

displayFullName('John');
displayFullName('Jane', 'Doe');

使用可选链操作符 ?.，当 lastName 为 undefined 时，不会尝试访问其属性，从而避免运行时错误。

默认参数可能导致的类型推断问题

虽然 TypeScript 通常能根据默认值正确推断参数类型，但在某些复杂情况下，可能会出现类型推断不准确的问题。例如：

function processValue(value = 'default', callback: (val: string) => void) {
    callback(value);
}

// 期望这里可以正确推断value为string类型
processValue(123, (v) => console.log(v.length));

在这个例子中，由于 processValue 函数中 value 的默认值是字符串类型，我们期望它能正确推断 value 的类型。但当我们传递一个数字 123 时，编译不会报错，因为 TypeScript 没有严格检查传递的值与默认值类型是否一致。

解决方法：显式指定参数类型，即使有默认值。这样可以避免潜在的类型错误。例如：

function processValue(value: string = 'default', callback: (val: string) => void) {
    callback(value);
}

// 现在传递非字符串类型会报错
processValue(123, (v) => console.log(v.length));

通过显式指定 value 的类型为 string，当传递不符合类型的值时，TypeScript 会给出编译错误，从而保证类型安全。

可选参数和默认参数在函数重载中的混淆

在函数重载中，同时使用可选参数和默认参数时，很容易出现重载定义与实际实现不一致的情况，导致代码逻辑混乱。例如：

function performAction(data: string, action?: 'uppercase' | 'lowercase'): string;
function performAction(data: number, action: 'double' | 'half'): number;
function performAction(data: any, action = 'default'): any {
    if (typeof data ==='string') {
        if (action === 'uppercase') {
            return data.toUpperCase();
        } else if (action === 'lowercase') {
            return data.toLowerCase();
        }
    } else if (typeof data === 'number') {
        if (action === 'double') {
            return data * 2;
        } else if (action === 'half') {
            return data / 2;
        }
    }
    return data;
}

let result1 = performAction('hello', 'uppercase');
let result2 = performAction(5, 'double');
let result3 = performAction('world'); // 这里使用默认参数，可能与重载定义不一致

在这个例子中，action 参数在不同的重载定义中有不同的可选性和类型。当使用默认参数时，可能会出现与重载定义不一致的情况，导致代码行为难以理解。

解决方法：在函数重载中，仔细设计重载定义，确保所有重载定义与默认参数的使用方式保持一致。同时，给重载函数添加注释，说明每个重载的用途和参数的含义，以提高代码的可读性和可维护性。例如：

/**
 * 对输入数据执行不同操作
 * @param data 输入数据，可以是字符串或数字
 * @param action 操作类型，对于字符串可以是'uppercase'或'lowercase'，对于数字可以是'double'或'half'，默认值为'default'
 * @returns 执行操作后的结果
 */
function performAction(data: string, action?: 'uppercase' | 'lowercase'): string;
function performAction(data: number, action: 'double' | 'half'): number;
function performAction(data: any, action = 'default'): any {
    if (typeof data ==='string') {
        if (action === 'uppercase') {
            return data.toUpperCase();
        } else if (action === 'lowercase') {
            return data.toLowerCase();
        }
    } else if (typeof data === 'number') {
        if (action === 'double') {
            return data * 2;
        } else if (action === 'half') {
            return data / 2;
        }
    }
    return data;
}

通过添加注释，可以让其他开发者更容易理解函数的重载逻辑和参数的使用方式，减少混淆。

可选参数和默认参数对代码可维护性的影响

过多地使用可选参数和默认参数可能会使函数的行为变得复杂，增加代码的维护难度。因为阅读代码的人需要同时考虑参数的可选性、默认值以及它们对函数逻辑的影响。例如：

function complexFunction(a: number, b?: number, c = 'default', d: boolean = false) {
    if (b) {
        // 复杂逻辑，依赖于b是否存在
    }
    if (d) {
        // 不同的逻辑，依赖于d的默认值
    }
    return a;
}

在这个函数中，多个可选参数和默认参数交织在一起，使得函数逻辑变得复杂，难以理解和维护。

解决方法：尽量保持函数的单一职责原则，避免在一个函数中使用过多的可选参数和默认参数。如果确实需要多个参数，可以考虑将相关参数封装成对象，通过对象属性来传递参数，这样可以提高代码的可读性和可维护性。例如：

interface ComplexFunctionOptions {
    b?: number;
    c: string;
    d: boolean;
}

function complexFunction(a: number, options: ComplexFunctionOptions) {
    if (options.b) {
        // 复杂逻辑，依赖于b是否存在
    }
    if (options.d) {
        // 不同的逻辑，依赖于d的默认值
    }
    return a;
}

let options: ComplexFunctionOptions = { c: 'default', d: false };
let result = complexFunction(10, options);

通过将参数封装成对象，代码结构更加清晰，每个参数的用途和默认值都一目了然，便于维护和扩展。

总结

可选参数和默认参数是 TypeScript 中非常实用的功能，它们为函数参数的定义提供了极大的灵活性。通过合理使用这两种参数类型，我们可以编写出更具适应性和可读性的代码。

可选参数适用于那些在大多数情况下不需要传递，但在特定场景下可能需要额外信息的参数。在使用可选参数时，务必进行存在性检查，以防止运行时错误。这一特性在处理一些非必需的配置项或附加信息时非常有用，比如在日志记录函数中添加上下文信息，或者在数据请求时传递可选的请求头。

默认参数则为函数参数提供了一个默认值，使得在调用函数时如果没有传递该参数，会使用这个默认值。默认参数简化了函数调用，减少了重复代码，尤其适用于那些具有常见默认值的参数。例如，在设置页面背景颜色的函数中，默认颜色设为白色。同时，TypeScript 会根据默认值的类型进行参数类型推断，提高了代码的类型安全性。

然而，在使用可选参数和默认参数时，也需要注意一些潜在的问题。比如可选参数可能导致运行时错误，默认参数可能引起类型推断问题，在函数重载中两者的使用可能造成混淆，过多使用还可能影响代码的可维护性。针对这些问题，我们可以通过显式类型声明、存在性检查、合理设计重载以及封装参数对象等方法来解决。

在实际项目开发中，无论是前端表单验证、数据请求还是组件开发，可选参数和默认参数都有着广泛的应用。通过深入理解它们的特性、差异以及可能出现的问题，我们能够更加熟练地运用这两个功能，提升代码质量，构建更健壮、灵活和可维护的应用程序。无论是初学者还是有经验的开发者，都应该充分掌握可选参数和默认参数的使用技巧，以更好地发挥 TypeScript 的强大功能。