TypeScript 是一种由 Microsoft 开发的 JavaScript 超集。它添加了静态类型注释和其他语言功能，使代码更加健壮，易于维护和调试。在 TypeScript 中，类的属性可以是可选的，并且可以设置默认值。
在本文中，我们将深入探讨 TypeScript 可选属性和默认值的概念，以及它们如何帮助我们编写更好的代码。
可选属性
在 TypeScript 中，我们可以使用问号 ? 来定义可选属性。例如，我们定义了一个 Person 类，它有一个必需的 name 属性和一个可选的 age 属性：
----- ------ - ------------------ ----- ------- ------ ----- ------- -- -
在创建 Person 实例时，我们可以传递 age 或不传递。例如：
----- ---- - --- -------------- ---- ----- ---- - --- ---------------
如果我们在创建 lucy 时不传递 age，它将默认为 undefined。
在实际开发中，可选属性很常用。毕竟并非所有属性都是必须的。例如，用户的地址可以是可选的。这使得属性更加灵活，并且可读性更好。
默认值
在 TypeScript 中，我们可以为属性设置默认值。例如，我们定义了一个 Person 类，它有一个必需的 name 属性和一个默认为 20 的 age 属性：
----- ------ - ------------------ ----- ------- ------ --- - --- -- -
在创建 Person 实例时，如果我们未传递 age，它将默认为 20。例如：
----- ---- - --- -------------- ---- ----- ---- - --- ---------------
在这两种情况下，john 的 age 为 30，而 lucy 的 age 为 20。
设置默认值是一种很好的方式来确保属性始终具有某个值，即使没有显式地设置值。在编写代码时，我们应该尽可能地设置默认值，以避免潜在的错误和不必要的麻烦。
示例代码
下面是一个完整的示例代码，演示了 TypeScript 中可选属性和默认值的用法：
----- ------ - ------------------ ----- ------- ------ --- - --- -- - --------- ---- - --- ------- ----- ------- ----- ------- --------- ------- - -------- ------------ --- ----- ---- ------- -- ------ ------ - ----- ------ - --- ------------ ----- ----------------- ------ -------- ------- ------------- ------ ------- - ----- --------- ---- - - --- -- ----- ------- ---- -- -- ----- --------- ---- - - --- -- ----- ------- -------- ---- ---- ---- -- --------------------- -- ---- -- ----- --- --------- --------------------- -- ---- -- ----- --- --- ---- ---
在上面的代码中，我们定义了一个 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