Is it possible for JsDoc to help me distinguish between milliseconds and seconds when I inadvertently confuse them?

Question

Is it possible for JsDoc to help me distinguish between milliseconds and seconds when I inadvertently confuse them?

Exploring TypeScript and JsDoc has been on my to-do list. Occasionally, I find myself mixing numeric values that aren't quite compatible. Let's consider a hypothetical situation where I mix milliseconds and seconds. In the script below, I've attempted to utilize JsDoc for guidance. While editing in Visual Studio Code, I expected to receive warnings or errors but nothing appeared.

// @ts-check

/** @typedef {number} TSseconds */
/** @typedef {number} TSmilliSeconds */

/** @type {TSmilliSeconds} */
let ms = 1;

/** @type {TSseconds} */
let sec = 2;

ms = sec;

/**
 * 
 * @param {TSseconds} secVal 
 * @returns {TSmilliSeconds}
 */
function sec2ms(secVal) {
    console.log("sec2ms", secVal);
    return 1000 * secVal;
}

/** @type {TSmilliSeconds} */
let ms2;
ms2 = sec2ms(ms);

/** @type {TSseconds} */
let sec2;
sec2 = sec2ms(ms);

It seems like I may have misunderstood something. How can I enhance the support from JsDoc here? (Code completion is functional.)

I currently have Typescript installed (npm install -g typescript) along with the latest stable version of NodeJs.

javascript typescript visual-studio-code jsdoc

Answer 1

Answer №1

One way to enhance clarity when working with Typescript is by creating aliases for the number type to provide more descriptive names for function arguments. For instance:

type Seconds = number type MilliSeconds = number

function myTimer(arg0:Seconds, arg1:MilliSeconds){}

This approach helps to clearly define and differentiate between the values being passed into a function.

To further ensure correctness, you can implement a type helper that validates the input type as milliseconds like this:

type IsMilliSeconds<T> = T extends number
  ? `${T}` extends `${infer U}000`
    ? T
    : never
  : never;
  
function myTimerInMilliSeconds<T>(arg:IsMilliSeconds<T>){
  return arg
}

Here is a sample link showcasing how this can be implemented in Typescript code.

Using this method, if a function requires time in milliseconds but is given seconds instead, it would flag an error during myTimerInMilliSeconds(1).

Answer 2

One way to enhance clarity when working with Typescript is by creating aliases for the number type to provide more descriptive names for function arguments. For instance:

type Seconds = number type MilliSeconds = number

function myTimer(arg0:Seconds, arg1:MilliSeconds){}

This approach helps to clearly define and differentiate between the values being passed into a function.

To further ensure correctness, you can implement a type helper that validates the input type as milliseconds like this:

type IsMilliSeconds<T> = T extends number
  ? `${T}` extends `${infer U}000`
    ? T
    : never
  : never;
  
function myTimerInMilliSeconds<T>(arg:IsMilliSeconds<T>){
  return arg
}

Here is a sample link showcasing how this can be implemented in Typescript code.

Using this method, if a function requires time in milliseconds but is given seconds instead, it would flag an error during myTimerInMilliSeconds(1).

Is it possible for JsDoc to help me distinguish between milliseconds and seconds when I inadvertently confuse them?

Answer №1

Similar questions

Passing the value of a radio button to a component in React: a comprehensive guide

Combining and linking 3 RxJS Observables in TypeScript and Angular 4 without nesting to achieve dependencies in the result

Blocking of Reading Across Origins (BORAO)

Navigate through each file or image within a directory using Angular

Issue: Anticipated the primary reducer to be a function, but was presented with: 'undefined' in Vanilla JS with Redux

When the object contains multiple arrays, filter out the id and remove it when clicked

Is there a way to change the labels of checkboxes within a table that is created dynamically?

Issue with the functionality of a checkbox input placed inside a label

The current version of Aurelia in Karma does not support the use of Reflect.getOwnMetadata as a function

Tips on streamlining the deployment process for a basic Vue WebApp without the need for a server (e.g. setting up a straightforward build chain with Vue

Together, we have a shared Yarn JS directory for both the client and server components,

Utilize JavaScript on the browser to send a post request to the Google API

What is the best way to show the user profile on a Forum?

Ways to store extra user information in meteor.js beyond just the basic details, like their home address

jQuery validation: Form failing to pass validation

Error in vis.js network: hierarchical layout caused by node quantity

What is the best way to obtain the output of the MULTIPLO.SUPERIOR function using JavaScript?

Data from Firebase persists even after removal

Angular 2 - Graphic Representation Tool for Visualizing Workflows and Processes - Resource Center

Fuzziness occurrence in distinct vue element