TypeScript 中的可选属性和可选参数详解

阅读时长 9 分钟读完

在 TypeScript 中,我们经常需要定义一些对象或者函数,而这些定义中有些属性或者参数是可选的。那么,如何在 TypeScript 中定义可选属性和可选参数呢?本文将详细介绍 TypeScript 中可选属性和可选参数的语法、特性和使用方法,以及一些注意事项和实例代码。

什么是可选属性和可选参数?

在 TypeScript 中,可选属性和可选参数是指在定义对象或函数时,有些属性或参数可以不必填写或传递。比如,定义一个人的信息对象,其中可能包含姓名、年龄、性别等属性,但是有些属性并不是必须的,比如家庭住址、手机号码等。这些非必须的属性就可以定义为可选属性。类似的,函数有些参数不一定需要传递,比如回调函数、默认值等,这些参数就可以定义为可选参数。

可选属性和可选参数的定义方式和普通属性和参数一样,只需要在属性名或参数名后面加上问号(?)即可。例如:

-- -------------------- ---- -------
--------- ------ -
  ----- -------
  ----- -------
  -------- --- - ----
  --------- -------
  ------- -------
-

-------- ----------------------- -------- ---- -
  ---------------------------------
  ---------------------------- -- --------
  ------------------------------- -- --------
  -------------------------------- -- --------
  ------------------------------ -- --------
-

在上面的例子中,我们定义了一个名为 Person 的接口,其中有些属性是可选的,比如 agegenderaddressphone。另外,我们定义了一个函数 printPersonInfo,它接受一个参数 person,这个参数是一个 Person 对象。在函数内部,我们通过 console.log 打印出这个人的信息,如果某些属性没有填写,则默认输出为“未知”。

可选属性和可选参数的特性

可选属性和可选参数有一些特性,需要我们注意一下。

可选属性和可选参数可以省略

如果一个对象或函数的所有属性或参数都是可选的,那么这个对象或函数就可以不传任何参数或属性。

比如,在上面的例子中,我们可以不传任何属性:

同样,在调用函数 printPersonInfo 的时候,我们可以不传任何参数:

这种情况下,所有属性都会默认为 undefined。

可选属性和可选参数可以赋值为 undefined

如果一个属性或参数是可选的,但是我们想显式地赋值为 undefined,那么也是可以的。比如:

在上面的例子中,虽然 age 属性是可选的,但是我们显式地将它赋值为 undefined。

类似的,在函数调用时,我们也可以传递 undefined 来代表可选参数没有值。比如:

可选属性和可选参数不能使用默认值

与普通属性和参数不同的是,可选属性和可选参数不能定义默认值。比如,在定义一个普通函数时,我们可以定义一个参数的默认值:

在上面的例子中,我们定义了一个名为 printHelloWorld 的函数,它接受一个参数 name,默认值为 'World'

但是,如果尝试在定义可选参数时定义默认值,就会得到编译错误:

同样的,可选属性也不能定义默认值。

可选属性和可选参数的顺序很重要

在定义一个带有多个属性或参数的对象或函数时,可选属性和可选参数的顺序很重要。如果可选属性或可选参数在第一个位置,那么它们可以直接省略不写,但是如果它们在后面的位置,那么前面的属性或参数必须要填写。

比如,下面这个定义了两个属性的对象,如果将可选属性 b 放到第一个位置:

那么,这个属性就是可选的了,可以这样写:

但是,如果将可选属性 b 放到第二个位置:

那么,如果想要省略 b 属性,就必须将 a 属性填写:

同样的,如果是一个带有多个参数的函数,可选参数的顺序也很重要。如果可选参数在第一个位置,那么它可以直接省略不传,但是如果它在后面的位置,那么前面的参数就必须传递。

比如,下面的函数定义:

如果想要省略 b 参数,可以这样调用:

但是,如果将 b 参数放在第二个位置:

那么,如果想要省略 a 参数,就必须显式地传递 _nullundefined 来占位:

可选属性和可选参数的类型必须包含 undefined

如果一个属性或参数是可选的,那么它的类型必须包含 undefined。比如,在上面的例子中,我们定义了一个可选属性 age,它的类型必须是 number | undefined

同样的,函数中的可选参数也必须包含 undefined。比如:

这里的 b 参数的类型也必须是 string | undefined

可选属性和可选参数的使用方法

了解了可选属性和可选参数的特性之后,下面我们来看看它们的使用方法和一些实例场景。

可选属性的使用方法

在实际开发中,可选属性可以用于定义一些不是必须的属性,比如上面例子中的 addressphone。通常情况下,这些属性需要在后续的开发或使用中再填写或传递。

在 TypeScript 中,可以使用可选属性来定义由多个属性组成的对象或接口。这些属性的类型和必须属性一样,区别在于属性名后面有个问号。(注意:这里的必须属性是指没有加问号的属性,而不是非常必须要有的属性。)例如:

在上面的例子中,我们定义了一个 User 接口,它包含了 nameage 两个必需属性,和 addressphone 两个可选属性。这样定义的好处是,在声明一个 User 类型的变量时,可以同时包含必需属性和可选属性,并且忽略掉一些不想填写的属性。例如:

-- -------------------- ---- -------
----- ------ ---- - -
  ----- -----
  ---- ---
--
----- ------ ---- - -
  ----- -----
  ---- ---
  -------- ------------
  ------ -----------
--
----- ------ ---- - -
  ----- -----
  ---- ---
  -------- ------------
--

在上面的例子中,我们声明了三个 User 类型的变量,分别是 user1user2user3user1 只填写了必须的属性 nameage,忽略了可选的 addressphone 属性;user2 则填写了所有属性;而 user3 则忽略了 phone 属性。

可选参数的使用方法

在实际开发中,可选参数可以用于定义一些未知或不确定的参数,比如回调函数或默认值。通常情况下,这些参数需要在调用函数时才能确定是否传递。

在 TypeScript 中,可以使用可选参数来定义一个函数。这些参数的类型和必须参数一样,区别在于参数名后面有个问号。例如:

在上面的例子中,我们定义了一个名为 printMessage 的函数,它接受两个参数,messagecallback。其中,message 参数为必须参数,而 callback 参数为可选参数。如果调用这个函数时不传递 callback 参数,则函数将不会执行回调函数。

例如:

在上面的例子中,我们调用了两次 printMessage 函数,第一次只传递了必须参数 message,不传递可选参数 callback;第二次则同时填写了必须参数和可选参数,在第二个参数中填写了一个回调函数。

总结

本文介绍了 TypeScript 中的可选属性和可选参数的语法、特性和使用方法,并且提供了一些示例代码。总的来说,可选属性和可选参数可以使我们的代码更加灵活和方便,但是在使用时需要注意一些特性和注意事项。希望本文对大家有所帮助,加深对 TypeScript 的理解。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6482cb9a48841e98942273b2

纠错
反馈