Question 284813 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – provide type better annotation in JS when argument has default

I’m working in a legacy code base with JS files, not TS. However I’m adding tsc to validate types.

one way that TS inferring types for arguments is based on default value. So a function like

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

withProp is presumed to always be a number, so trying to call parseInt(withProp) would not be happy.

I know I can use JSDocs to correct types, but in this case I’m dealing with an anonymous function deep inside a getter tree for Vuex. Is there another way to provide types for these args?

Tags:

2

Answers


  1. 0

    withProp = 5 in your code reflects the default value of arg, but it doesn’t mean to be always a number type of arg.

    If you pass any string or object as an argument, its type might be changed according to the incoming argument.

    The best way checking your type is to create an utility function which detects the type of your argument. ( you can use If … else if.. else )
    And then you can invoke this function inside of getter for validating the incoming argument.

    Login or Signup to reply.
  2. 0

    Certainly! Let’s format the code correctly. Here are some ways to handle type inference for function arguments with default values in JavaScript:

    1. Using Default Parameters (ES6/ES2015):

      • In ES6, you can set default parameters directly in the function signature. The syntax looks like this: 
        const doSomething = (withProp = 5) => {
  // ...
};
      • TypeScript will infer that withProp is a number based on the default value.

    2. JSDoc Type Annotations:

      • Even for anonymous functions, you can add JSDoc type annotations to the parameters. For example: 
        /**
* @param {number} withProp - Description of the parameter.
*/
const doSomething = (withProp = 5) => {
  // ...
};

    3. Explicitly Cast Default Value:

      • If you want to ensure that withProp is always a number, explicitly cast the default value: 
        const doSomething = (withProp = 5 as number) => {
  // ...
};

    4. Type Assertion Inside the Function:

      • If you need to perform operations like parseInt(withProp) within the function, use type assertions: 
        const doSomething = (withProp = 5) => {
  const parsedValue = parseInt(withProp as string, 10);
  // ...
};

    5. Function Overloads:

      • If you want different types based on the number of arguments, use function overloads: 
        function doSomething(withProp: number): void;
function doSomething(): void;
function doSomething(withProp?: number) {
  // Implementation
}
      • This allows handling cases where withProp is provided or not.

    Remember to choose the approach that best fits your specific use case and maintainability requirements. 😊

    Source: Conversation with Bing, 2023/11/13
    (1) Set a default parameter value for a JavaScript function. Set a default parameter value for a JavaScript function.
    (2) How to Set Default Parameter Value for a JavaScript Function. https://www.tutorialrepublic.com/faq/how-to-set-default-parameter-value-for-a-javascript-function.php.
    (3) How to set default function arguments with vanilla JS. https://gomakethings.com/how-to-set-default-function-arguments-with-vanilla-js/.
    (4) JS: functions arguments default values – Stack Overflow. JS: functions arguments default values.
    (5) How To Set Default Parameter Values for JavaScript Functions – W3Schools. https://www.w3schools.com/howto/howto_js_default_parameters.asp.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search