详细分析TypeScript 中的可选参数与属性：用问号 ? 提升代码灵活性

1. 基本知识

TypeScript 中，问号 ? 常用于表示函数参数、对象属性等是可选的

可选参数在实际开发中非常有用，可以提高代码的灵活性和可读性
指的是在调用函数或创建对象时，可以选择性地提供这些参数或属性。如果未提供，可选参数将被视为 undefined

基本的语法如下：在函数参数名后添加问号 ?，即可将其声明为可选参数

function functionName(param1: type, param2?: type) {// 函数体
}

注意：

• 可选参数必须放在必需参数的后面
• 未提供可选参数时，其值为 undefined

2. Demo

为更好的对比，先讲述没有？的

2.1 差异

此处主要讲解可选参数 和 默认参数的差异

可选参数：未提供时为 undefined，需要手动在函数体内处理未定义的情况
默认参数：未提供时使用预设的默认值，在参数声明时直接指定默认值

function greetOptional(name: string, greeting?: string): string {return `${greeting || "Hello"}, ${name}!`;
}function greetDefault(name: string, greeting: string = "Hello"): string {return `${greeting}, ${name}!`;
}console.log(greetOptional("Alice")); // 输出: Hello, Alice!
console.log(greetDefault("Bob")); // 输出: Hello, Bob!

2.2 可选参数

示例 1：简单的可选参数
greeting 参数是可选的；当未提供 greeting 时，默认使用 “Hello” 作为问候语

function greet(name: string, greeting?: string): string {if (greeting) {return `${greeting}, ${name}!`;} else {return `Hello, ${name}!`;}
}console.log(greet("Alice")); // 输出: Hello, Alice!
console.log(greet("Bob", "Good morning")); // 输出: Good morning, Bob!

示例 2：多个可选参数
这里的 lastName 和 middleName 都是可选参数，可以根据需要提供

function buildName(firstName: string, lastName?: string, middleName?: string): string {let fullName = firstName;if (middleName) {fullName += ` ${middleName}`;}if (lastName) {fullName += ` ${lastName}`;}return fullName;
}console.log(buildName("John")); // 输出: John
console.log(buildName("John", "Doe")); // 输出: John Doe
console.log(buildName("John", "Doe", "William")); // 输出: John William Doe

3. 接口和类型

接口中的可选属性
接口 Person 定义了三个属性，其中 age 和 address 是可选的
创建对象时，可以选择性地提供这些可选属性

interface Person {name: string;age?: number;address?: string;
}

interface Person {name: string;age?: number;address?: string;
}const person1: Person = {name: "Alice"
};const person2: Person = {name: "Bob",age: 25
};const person3: Person = {name: "Charlie",age: 30,address: "123 Main St"
};console.log(person1); // 输出: { name: "Alice" }
console.log(person2); // 输出: { name: "Bob", age: 25 }
console.log(person3); // 输出: { name: "Charlie", age: 30, address: "123 Main St" }

类型别名中的可选属性
类型别名 Product 中，price 和 description 是可选属性

type Product = {name: string;price?: number;description?: string;
};

type Product = {name: string;price?: number;description?: string;
};const product1: Product = {name: "Laptop"
};const product2: Product = {name: "Phone",price: 699
};const product3: Product = {name: "Tablet",price: 499,description: "A high-end tablet."
};console.log(product1); // 输出: { name: "Laptop" }
console.log(product2); // 输出: { name: "Phone", price: 699 }
console.log(product3); // 输出: { name: "Tablet", price: 499, description: "A high-end tablet." }

4. 类和方法

1. 类的可选属性
类 Vehicle 中，year 属性是可选的。
在构造函数和方法中，需要检查 year 是否存在

class Vehicle {make: string;model: string;year?: number;constructor(make: string, model: string, year?: number) {this.make = make;this.model = model;if (year) {this.year = year;}}getInfo(): string {if (this.year) {return `${this.make} ${this.model}, ${this.year}`;}return `${this.make} ${this.model}`;}
}const vehicle1 = new Vehicle("Toyota", "Corolla");
const vehicle2 = new Vehicle("Honda", "Civic", 2020);console.log(vehicle1.getInfo()); // 输出: Toyota Corolla
console.log(vehicle2.getInfo()); // 输出: Honda Civic, 2020

2. 类方法的可选参数
add 方法的第三个参数 c 是可选的
根据是否提供 c，方法返回不同的计算结果

class Calculator {add(a: number, b: number, c?: number): number {if (c !== undefined) {return a + b + c;}return a + b;}
}const calc = new Calculator();console.log(calc.add(1, 2)); // 输出: 3
console.log(calc.add(1, 2, 3)); // 输出: 6