当参数具有默认值时，在 JS 中提供更好的类型注释

Question

我正在使用 JS 文件而不是 TS 的遗留代码库中工作。不过，我添加 tsc 来验证类型。

TS 推断参数类型的一种方法是基于默认值。所以像

这样的函数

function doSomething(withProp = 5) {
  ...
}

withProp

被假定为 始终 是一个号码，因此尝试拨打

parseInt(withProp)

不会让人高兴。

我知道我可以使用 JSDocs 来更正类型，但在本例中，我正在处理 Vuex getter 树深处的匿名函数。是否有另一种方法来为这些参数提供类型？

Answer 1

代码中的

withProp = 5

反映了

default

的

arg

值，但这并不意味着始终是

type

的数字

arg

。

如果您传递任何

string

或

object

作为参数，其类型可能会根据传入参数而更改。

检查类型的最佳方法是创建一个实用函数来检测参数的类型。 （您可以使用 If ... else if .. else ） 然后你可以在 getter 内部调用这个函数来验证传入的参数。

Answer 2

当然！让我们正确格式化代码。以下是在 JavaScript 中处理具有默认值的函数参数的类型推断的一些方法：

1. 使用默认参数（ES6/ES2015）:

   • 在ES6中，可以直接在函数签名中设置默认参数。语法如下：

     const doSomething = (withProp = 5) => {
       // ...
     };
     

   • TypeScript 将根据默认值推断

     withProp

     是一个数字。

2. JSDoc 类型注释:

   • 即使是匿名函数，也可以在参数中添加 JSDoc 类型注释。例如：

     /**
     * @param {number} withProp - Description of the parameter.
     */
     const doSomething = (withProp = 5) => {
       // ...
     };
     

3. 显式转换默认值:

   • 如果要确保

     withProp

     始终是数字，请显式转换默认值：

     const doSomething = (withProp = 5 as number) => {
       // ...
     };
     

4. 在函数内键入断言：

   • 如果需要在函数内执行类似

     parseInt(withProp)

     的操作，请使用类型断言：

     const doSomething = (withProp = 5) => {
       const parsedValue = parseInt(withProp as string, 10);
       // ...
     };
     

5. 函数重载:

   • 如果您想要根据参数数量使用不同的类型，请使用函数重载：

     function doSomething(withProp: number): void;
     function doSomething(): void;
     function doSomething(withProp?: number) {
       // Implementation
     }
     

   • 这允许处理提供或不提供

     withProp

     的情况。

请记住选择最适合您的特定用例和可维护性要求的方法。 😊

来源：必应对话，2023/11/13 (1)为JavaScript函数设置默认参数值。 为 JavaScript 函数设置默认参数值。 (2) 如何设置 JavaScript 函数的默认参数值。 https://www.tutorialrepublic.com/faq/how-to-set-default-parameter-value-for-a-javascript-function.php。 (3) 如何使用 vanilla JS 设置默认函数参数。 https://gomakethings.com/how-to-set-default-function-arguments-with-vanilla-js/。 (4) JS：函数参数默认值 - 堆栈内存溢出JS：函数参数默认值。 (5) 如何设置 JavaScript 函数的默认参数值 - W3Schools。 https://www.w3schools.com/howto/howto_js_default_parameters.asp。