Utilize a TypeScript interface in jsDoc comments

By utilizing VSCode, it is nearly achievable to leverage the advantages of Typescript in plain .js files through jsDoc notation and a tsconfig.json configuration:

{
  "compileOnSave": false,
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "checkJs": true,
    "target": "es6",
    "resolveJsonModule": true,
    "moduleResolution": "node",

  },
  "include": ["index.js", "./src"]
}
/**
 * @return {Promise<string>}
 */
const foo = Promise.resolve('hi');
module.exports = foo;

Now, is it viable to access an interface specified in a d.ts file within the node_modules directory? Specifically, I'm trying to return a -let's say- "my_dependency.Storage" object but facing difficulty referencing it using regular javascript:

/**
 * @param {Storage} storage
 */
const goo = storage => ...

This function will recognize that I am referring to the Web Storage API from lib.dom.d.ts

  • The equivalent typescript statement would be:
import {Storage} from "my_dependency"
///<reference path="node_modules/my_dependency/lib/index.d.ts" />
  • I am hoping for something like (pseudo-code)
/**
 * @param {my_module.Storage} storage
 */

Answer №1

When referring to a type from a library, follow this method as suggested by @Akxe:

/**
 * @param {import("my_dependency").Storage} storage
 */
const goo = storage => ...

To avoid repeating the same statement multiple times, I created an ambient alias in the following manner:

types.d.ts

declare namespace MyProject {
  type St = import("my_dependency").Storage; // creating an alias for my_dependency.Storage in plain js code
}

index.js

/// <reference path="types.d.ts"/>
...

src/foo.js

/**
 * @param {MyProject.St} storage
 */
const goo = storage => ...

==EDIT==

For further insights on this topic, check out this post on dev.to

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the combination of a JavaScript frontend and NodeJS backend function effectively together in this scenario?

I have a Domain-A that serves as a static site on Netlify, offering shopping cart functionalities. On the other hand, I have Domain-B hosting a backend server running a Node.JS payment system and utilizing Auth Services through passport.js. Due to its na ...

Mapping URLs on the client side

Currently, I am working with express and thinking about how to improve my hard-coded URLs. I have noticed that there are several projects out there that provide urlFor functionality on the server-side. Does anyone have recommendations for implementing th ...

What is the best way to change routes within my React application?

I am currently facing a challenge with the Routes in my work's web application. The existing method of accessing routes involves manually typing in the extended path in the browser, which is not ideal. I want to enhance this by adding new routes that ...

Discover the basics of incorporating libraries using npm

As a beginner in JavaScript, I am looking to incorporate moment.js or another library into my project. However, I am unsure of how to properly set up my project so that I can import from the library. Here is how I have structured my HTML: <!DOCTYPE html ...

The Material-ui Datagrid may experience instability and require frequent refreshing

Here is the code snippet I'm using to retrieve data from an API and bind it to the Material UI DataGrid. The version being utilized is "@mui/x-data-grid": "^7.18.0". There seems to be a flickering issue with the highlighted section at the end, and it ...

Definition for intersecting types

I am trying to define a function that can take two objects of different types but with the same keys: function myFunc(left, right, keys) { // simplified: for (const key of keys) { console.log(key, left[key] === right[key]) } return { left, rig ...

How can I intercept/manage the back button of the browser in React-router?

Utilizing Material-ui's Tabs, which are controlled, I am implementing them for (React-router) Links in the following manner: <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/> <Tab value={1} label="users ...

Loading Ajax dropdown with a preselected value in the dropdown menu

There are two pages, each containing a form. Page 1 - Form A) Includes a dropdown menu (with values populated from the database) and a continue button. <select name="form[formA][]" id="dropdown1"> <option value="1">Option 01</opti ...

can a computed property be delayed in its calculation?

Within the code snippet below, we can see that in the compPropsIsBtnDigitizePolygonDisabled function, it initially checks if the digitizePolygonInteractions variable is initialized. If it is not initialized, an error will be triggered. During execution, w ...

In version 9.3.8 of Konva, when mirroring an image along the X axis and then connecting it to a transformer, the rotation anchor is positioned at the bottom instead

I have been working with Konva for several weeks now and encountering a specific issue. When attempting to mirror an image, setting scaleX works correctly, mirroring it on the vertical axis. However, I am facing another issue (possibly a bug or misunderst ...

What is the best way to optimize reactive values using the Vue composition API?

Imagine I have a block of code like this... const computedStyle = computed(() => normalizeStyle([undefined, styleProp, undefined]) ); const computedClass = computed(() => normalizeClass([ "button", classProp, { "b ...

I am encountering issues with my THREE.js RawShaderMaterial

I haven't encountered any issues when loading shaders created by others into THREE.js, but I've hit a roadblock when trying to create and run my own shader. The shader works perfectly on the platform where I designed it (), but it doesn't fu ...

Guide on combining two arrays of similar objects and performing operations on a specific field within them

I am faced with a scenario where I have two arrays of objects with identical structures. Array 1 consists of elements like: [ { id: "1", name: "XX", displayName: "XX", co ...

Is there a way for my HTML file to connect with my CSS and JavaScript files stored in an Amazon S3 Bucket?

My current project involves hosting an HTML file as a website on AWS S3 in order to circumvent the CORS Policy. However, when I uploaded all my files into a new bucket, the HTML file was able to open but without accessing the accompanying CSS and JavaScrip ...

Is there a way to access the precise location information of a mobile phone remotely?

Currently, I am working on an Android project that requires obtaining the location details of a remote mobile phone. Here's the scenario: The manager is stationed in the office while the salesperson is out and about in a city selling products. How ca ...

Updating dynamic parameter in a NextJS 13 application router: A complete guide

In my route user/[userId]/forms, I have a layout.tsx that includes a Select/Dropdown menu. The dropdown menu has options with values representing different form IDs. When the user selects an item from the dropdown, I want to navigate to user/[userId]/form ...

Why does Asp.net Webform load twice every time I click on the form link?

In my asp.net webform project, I am encountering an issue where the page is running twice when clicked. The problem arises when calling two functions (Fill DropDowns) on the Page_Load Event. During debugging, it was observed that the control enters the Pa ...

Ways to engage with a fixed html page generated by an Express router?

Let me start by mentioning that I am relatively new to working with NodeJs. Currently, I am dealing with a situation where I need to render a static HTML web page (which includes JavaScript code) as a response to a post request. Below is the relevant snipp ...

Interface displaying auto-detected car types

I have a setup that looks like this: interface ValueAccessor<T> { property: keyof T; getPropertyValue: (value: any) => value; } I am trying to figure out how to define the correct type and replace the any when I want to provide a custom ...

Gradual appearance animation upon webpage load

I am attempting to create a fading effect on my homepage that is consistent every time it loads. Unfortunately, the current script I have only seems to work sporadically. The code I am currently using sets the fade effect on the html element since applyi ...