在 TypeScript 中，我们经常需要定义一些对象或者函数，而这些定义中有些属性或者参数是可选的。那么，如何在 TypeScript 中定义可选属性和可选参数呢？本文将详细介绍 TypeScript 中可选属性和可选参数的语法、特性和使用方法，以及一些注意事项和实例代码。
什么是可选属性和可选参数？
在 TypeScript 中，可选属性和可选参数是指在定义对象或函数时，有些属性或参数可以不必填写或传递。比如，定义一个人的信息对象，其中可能包含姓名、年龄、性别等属性，但是有些属性并不是必须的，比如家庭住址、手机号码等。这些非必须的属性就可以定义为可选属性。类似的，函数有些参数不一定需要传递，比如回调函数、默认值等，这些参数就可以定义为可选参数。
可选属性和可选参数的定义方式和普通属性和参数一样，只需要在属性名或参数名后面加上问号（?）即可。例如：
--------- ------ - ----- ------- ----- ------- -------- --- - ---- --------- ------- ------- ------- - -------- ----------------------- -------- ---- - --------------------------------- ---------------------------- -- -------- ------------------------------- -- -------- -------------------------------- -- -------- ------------------------------ -- -------- -
在上面的例子中，我们定义了一个名为 Person 的接口，其中有些属性是可选的，比如 age、gender、address 和 phone。另外，我们定义了一个函数 printPersonInfo，它接受一个参数 person，这个参数是一个 Person 对象。在函数内部，我们通过 console.log 打印出这个人的信息，如果某些属性没有填写，则默认输出为“未知”。
可选属性和可选参数的特性
可选属性和可选参数有一些特性，需要我们注意一下。
可选属性和可选参数可以省略
如果一个对象或函数的所有属性或参数都是可选的，那么这个对象或函数就可以不传任何参数或属性。
比如，在上面的例子中，我们可以不传任何属性：
----- ------- ------ - ---
同样，在调用函数 printPersonInfo 的时候，我们可以不传任何参数：
--------------------
这种情况下，所有属性都会默认为 undefined。
可选属性和可选参数可以赋值为 undefined
如果一个属性或参数是可选的，但是我们想显式地赋值为 undefined，那么也是可以的。比如：
----- ------- ------ - - ----- ----- ---- ---------- --
在上面的例子中，虽然 age 属性是可选的，但是我们显式地将它赋值为 undefined。
类似的，在函数调用时，我们也可以传递 undefined 来代表可选参数没有值。比如：
----------------- ----- ----- ---- ---------- ------- ---- -------- ---------- ------ ---------- ---
可选属性和可选参数不能使用默认值
与普通属性和参数不同的是，可选属性和可选参数不能定义默认值。比如，在定义一个普通函数时，我们可以定义一个参数的默认值：
-------- --------------------- ------ - --------- ---- - ------------------- ----------- -
在上面的例子中，我们定义了一个名为 printHelloWorld 的函数，它接受一个参数 name，默认值为 'World'。
但是，如果尝试在定义可选参数时定义默认值，就会得到编译错误：
-------- ----------------------- ------ - ---- ---- - -- --------------- -
同样的，可选属性也不能定义默认值。
可选属性和可选参数的顺序很重要
在定义一个带有多个属性或参数的对象或函数时，可选属性和可选参数的顺序很重要。如果可选属性或可选参数在第一个位置，那么它们可以直接省略不写，但是如果它们在后面的位置，那么前面的属性或参数必须要填写。
比如，下面这个定义了两个属性的对象，如果将可选属性 b 放到第一个位置：
--------- -- - --- ------- -- ------- -
那么，这个属性就是可选的了，可以这样写：
----- ---- -- - - -- ----- --
但是，如果将可选属性 b 放到第二个位置：
--------- -- - -- ------- --- ------- -
那么，如果想要省略 b 属性，就必须将 a 属性填写：
----- ---- -- - - -- ----- -- -- -----------------
同样的，如果是一个带有多个参数的函数，可选参数的顺序也很重要。如果可选参数在第一个位置，那么它可以直接省略不传，但是如果它在后面的位置，那么前面的参数就必须传递。
比如，下面的函数定义：
-------- ----- ------- --- -------- ---- - -- --- -
如果想要省略 b 参数，可以这样调用：
---------
但是，如果将 b 参数放在第二个位置：
-------- ------ ------- -- -------- ---- - -- --- -
那么，如果想要省略 a 参数，就必须显式地传递 _ 或 null 或 undefined 来占位：
------------- ------ -------- ------ ------- ------
可选属性和可选参数的类型必须包含 undefined
如果一个属性或参数是可选的，那么它的类型必须包含 undefined。比如，在上面的例子中，我们定义了一个可选属性 age，它的类型必须是 number | undefined：
--------- ------ - ----- ------- ----- ------- -- --- -
同样的，函数中的可选参数也必须包含 undefined。比如：
-------- ----- ------- --- -------- ---- - -- --- -
这里的 b 参数的类型也必须是 string | undefined。
可选属性和可选参数的使用方法
了解了可选属性和可选参数的特性之后，下面我们来看看它们的使用方法和一些实例场景。
可选属性的使用方法
在实际开发中，可选属性可以用于定义一些不是必须的属性，比如上面例子中的 address 和 phone。通常情况下，这些属性需要在后续的开发或使用中再填写或传递。
在 TypeScript 中，可以使用可选属性来定义由多个属性组成的对象或接口。这些属性的类型和必须属性一样，区别在于属性名后面有个问号。（注意：这里的必须属性是指没有加问号的属性，而不是非常必须要有的属性。）例如：
--------- ---- - ----- ------- ---- ------- --------- ------- ------- ------- -
在上面的例子中，我们定义了一个 User 接口，它包含了 name 和 age 两个必需属性，和 address和 phone 两个可选属性。这样定义的好处是，在声明一个 User 类型的变量时，可以同时包含必需属性和可选属性，并且忽略掉一些不想填写的属性。例如：
----- ------ ---- - - ----- ----- ---- --- -- ----- ------ ---- - - ----- ----- ---- --- -------- ------------ ------ ----------- -- ----- ------ ---- - - ----- ----- ---- --- -------- ------------ --
在上面的例子中，我们声明了三个 User 类型的变量，分别是 user1、user2 和 user3。user1 只填写了必须的属性 name 和 age，忽略了可选的 address 和 phone 属性；user2 则填写了所有属性；而 user3 则忽略了 phone 属性。
可选参数的使用方法
在实际开发中，可选参数可以用于定义一些未知或不确定的参数，比如回调函数或默认值。通常情况下，这些参数需要在调用函数时才能确定是否传递。
在 TypeScript 中，可以使用可选参数来定义一个函数。这些参数的类型和必须参数一样，区别在于参数名后面有个问号。例如：
-------- --------------------- ------- ---------- -- -- ------ ---- -
---------------------
-- ---------- -
-----------
-
-在上面的例子中，我们定义了一个名为 printMessage 的函数，它接受两个参数，message 和 callback。其中，message 参数为必须参数，而 callback 参数为可选参数。如果调用这个函数时不传递 callback 参数，则函数将不会执行回调函数。
例如：
-------------------- -------------- -------------------- ----------- -- -- - ----------------- -- - -------- ----------- ---
在上面的例子中，我们调用了两次 printMessage 函数，第一次只传递了必须参数 message，不传递可选参数 callback；第二次则同时填写了必须参数和可选参数，在第二个参数中填写了一个回调函数。
总结
本文介绍了 TypeScript 中的可选属性和可选参数的语法、特性和使用方法，并且提供了一些示例代码。总的来说，可选属性和可选参数可以使我们的代码更加灵活和方便，但是在使用时需要注意一些特性和注意事项。希望本文对大家有所帮助，加深对 TypeScript 的理解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6482cb9a48841e98942273b2