TypeScript 是一种由 Microsoft 开发的 JavaScript 超集。它添加了静态类型注释和其他语言功能，使代码更加健壮，易于维护和调试。在 TypeScript 中，类的属性可以是可选的，并且可以设置默认值。
在本文中，我们将深入探讨 TypeScript 可选属性和默认值的概念，以及它们如何帮助我们编写更好的代码。
可选属性
在 TypeScript 中，我们可以使用问号 ? 来定义可选属性。例如，我们定义了一个 Person 类，它有一个必需的 name 属性和一个可选的 age 属性：
class Person {
constructor(public name: string, public age?: number) {}
}在创建 Person 实例时，我们可以传递 age 或不传递。例如：
const john = new Person('John', 30);
const lucy = new Person('Lucy');如果我们在创建 lucy 时不传递 age，它将默认为 undefined。
在实际开发中，可选属性很常用。毕竟并非所有属性都是必须的。例如，用户的地址可以是可选的。这使得属性更加灵活，并且可读性更好。
默认值
在 TypeScript 中，我们可以为属性设置默认值。例如，我们定义了一个 Person 类，它有一个必需的 name 属性和一个默认为 20 的 age 属性：
class Person {
constructor(public name: string, public age = 20) {}
}在创建 Person 实例时，如果我们未传递 age，它将默认为 20。例如：
const john = new Person('John', 30);
const lucy = new Person('Lucy');在这两种情况下，john 的 age 为 30，而 lucy 的 age 为 20。
设置默认值是一种很好的方式来确保属性始终具有某个值，即使没有显式地设置值。在编写代码时，我们应该尽可能地设置默认值，以避免潜在的错误和不必要的麻烦。
示例代码
下面是一个完整的示例代码，演示了 TypeScript 中可选属性和默认值的用法：
// www.javascriptcn.com code example
class Person {
constructor(public name: string, public age = 20) {}
}
interface User {
id: number;
name: string;
age?: number;
address?: string;
}
function createUser({ id, name, age, address }: User): Person {
const person = new Person(name, age);
console.log(`User ${id}: ${name}, ${age}, ${address}`);
return person;
}
const userJohn: User = { id: 1, name: 'John', age: 30 };
const userLucy: User = { id: 2, name: 'Lucy', address: '123 Main St.' };
createUser(userJohn); // User 1: John, 30, undefined
createUser(userLucy); // User 2: Lucy, 20, 123 Main St.在上面的代码中，我们定义了一个 User 接口，它有四个属性：id、name、age 和 address，其中 age 和 address 是可选属性。我们还定义了一个 createUser 函数，它接受一个 User 对象作为参数，并返回一个 Person 实例。
在创建 Person 实例时，我们使用 name 和 age 属性，如果未传递 age，则默认为 20。在 createUser 函数中，如果 address 存在，则打印它；否则，打印 undefined。
最后，我们创建了两个 User 对象，并使用 createUser 函数创建了两个 Person 实例。在输出中，我们可以看到 age 的默认值如何发挥作用，并且如何处理可选属性。
总结
在 TypeScript 中，可选属性和默认值是非常实用的功能。它们使代码更加灵活、健壮和易于维护。在编写代码时，我们应该尽可能地使用这些特性，并遵守最佳实践，以确保代码的正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afae6348841e9894bcb0c5