TypeScript 中如何优雅地处理可选参数

阅读时长 4 分钟读完

在开发过程中,我们经常会遇到一种情况:函数需要传入的参数有些是必选的,而有些是可选的。对于可选参数,一般有两种处理方式:一种是在函数内部判断参数是否为 undefined,如果是则赋默认值;另一种是在函数签名中使用 TypeScript 中提供的可选参数语法。

本文将解释这两种方式的区别,并介绍如何在 TypeScript 中优雅地处理可选参数。

判断方式

考虑以下函数:

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

这个函数接受两个参数 x 和可选参数 y,用于计算 xy 的加法。如果没有传递 y,则默认为 0。

这是一种常见的处理方式,叫做“判定方式”。在函数内部,我们判断可选参数是否为 undefined,然后根据需要给定一个默认值。如上面的例子中,我们判断了 y 是否为 undefined,如果是的话,就将其赋值为 0。

判定方式虽然简单,但当可选参数比较多的时候,就会非常冗长。因此,我们可以考虑使用 TypeScript 中的可选参数语法。

可选参数语法

在 TypeScript 中,可以使用 ? 来标记可选参数,如下所示:

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

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

这个例子中,我们直接在函数签名中使用了可选参数语法,将 y 标记为可选参数。这样,我们就不用在函数内部判断 y 是否为 undefined 了。

对比两种方式的代码,我们可以发现,不使用可选参数语法的写法更加冗长,不便于阅读。

使用可选参数语法才是编写 TypeScript 代码应该使用的方式。

指定默认值

在 TypeScript 中,可以使用 = 来指定可选参数的默认值。如下所示:

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

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

这个例子中,我们在函数签名中使用了可选参数语法,并指定了默认值为 0。这样,如果没传递 y,则默认为 0

在类型定义中使用可选属性

当使用 TypeScript 定义一个对象时,可以使用 ? 来标记对象中的可选属性。例如:

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

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

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

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

在上面的例子中,我们定义了一个 Person 接口,并在接口中使用了可选属性语法来定义可选的年龄属性。在函数 describePerson 中,我们直接使用了 person.age,而不需要判定 person.age 是否为 undefined

总结

本文详细介绍了在 TypeScript 中如何优雅地处理可选参数,并通过示例代码演示了判定方式和可选参数语法两种处理方式的区别。

对于可选参数,我们应该优先使用可选参数语法,并在参数中使用默认值。在类型定义中,我们应该使用可选属性语法来标记可选属性。

在实践中,我们应该尽量避免使用判定方式来处理可选参数,因为这样会让代码变得非常冗长。使用可选参数语法是一种更为优雅的方式。

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

纠错
反馈