What strategies can I employ to help JSDoc/TypeScript recognize JavaScript imports?

After adding // @ts-check to my JavaScript file for JSDoc usage, I encountered errors in VS Code related to functions included with a script tag:

<script src="imported-file.js"></script>

To suppress these errors, I resorted to using numerous // @ts-ignore comments. However, this approach made JSDoc/TypeScript more of a hindrance than a help.

This led me to ponder the compatibility of ES6 includes/imports that JSDoc/TypeScript can handle within VS Code. Can it support module imports like the example below?

<script type="module" src="imported-file.js"></script>

Is it capable of dealing with dynamic imports as well?

const myImportedModule = await import("imported-file.js");

Are there any comprehensive resources or documentation available on this topic?

UPDATE: The errors occur when trying to use imported functions declared in "imported-file.js". These functions exist in the global scope (as per JavaScript) just as Jared Smith pointed out. Notably, no JSDoc errors are detected in the "imported-file.js" itself.

javascripttypescriptvisual-studio-codejsdoc

Answer №1

It seems like you might need to utilize the import keyword when declaring the type in your JSDocs. Here's an example:

// external-file.js

/**
 * @param {string} input
 * @return {string}
 */
export const transform = input => input.toUpperCase()

Then, in the file where it will be used:

// internal-file.js
/**
 * @type {import('./external-file.js').transform}
 */
const result = transform

If this doesn't address your issue, please provide more information about your specific configuration.

Answer №2

Appreciate your hard work. I discovered a simple solution that worked best for me when dealing with functions from "imported-file.js". If, for example, I have a function named myFun in that file, I could just redefine it like this:

// @ts-ignore
const TSmyFun = myFun;

After this, I could easily do a search and replace throughout the codebase. This helped me avoid cluttering my code with multiple instances of // @ts-ignore every time I called myFun.

To incorporate JSDoc and type checking, a new function like TSmyFun can be written.

Pro tip: Adding comments to ts-ignore statements can be very helpful:

// @ts-ignore my comment`

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

What is the reason behind Angular generating files with 'es5' and 'es2015' extensions instead of 'es6' (or no extension)?

Recently, I installed the Angular CLI (@angular/cli 9.0.1). My goal was to create a new Angular Element, package it, and then integrate it into another application. Following several blog tutorials, I found that they all mentioned the final step of creati ...

javascriptangulartypescriptangular-elements

Automatically trigger the expansion of all panels within Vuetify using code

I'm attempting to use Vuetify 2.3.5 to programmatically control the opening and closing of expansion panels. <v-expansion-panels accordion> <v-expansion-panel v-for="(item,i) in faqs" :key="i"> <div class ...

javascriptvue.jsvuetify.js

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

I am searching for a solution to merge multiple Observables into a flattened tuple containing scalar values. This functionality is similar to .combineLatest(), but with the added feature that it should emit a new value tuple even if one of the source obser ...

javascripttypescriptrxjsrxjs5angular2-observables

The reason why Type zzz cannot be assigned to type (zzz & NgIterable<xxx>) | undefined | null

Why am I receiving the message in Angular 9 that says: Type Items is not assignable to type (Items & NgIterable) | undefined | null? Despite the fact that the model is correct and there are no errors in the data, I still encounter this TypeScript warn ...

angulartypescriptngfor

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

javascriptangulartypescript

Issue: Invalid element type - Error message displayed when attempting to show the Edit button

I am currently learning about React and trying to implement an edit button next to the rows for editing data in the database. However, I keep encountering this specific error message: Error: Element type is invalid: expected a string (for built-in compone ...

javascriptreactjsreact-reduxmaterial-uireact-bootstrap

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

Sticky header in React data grid

Is there a way to implement a sticky header for a data grid in react? I have tried various methods but haven't been able to figure it out. Any suggestions would be appreciated. You can find my code sandbox example here. #react code export const Styl ...

javascriptreactjstypescript

Enhancing Material UI KeyboardDatePicker with personalized CSS design

Material UI KeyboardDatePicker is the component I'm currently using. https://i.sstatic.net/It50L.png In order to remove the black line visible in the datepicker (as shown in the screenshot), what steps should I take? Displayed below is the code ...

javascriptcssreactjsmaterial-ui

Having difficulties showing selectors content in Cheerio

Seeking assistance with extracting a table from a website, specifically trying to retrieve all the columns first. When I make the request and load the html into cheerio, I am facing an issue where the selector content does not display anything on the conso ...

javascriptnode.jsweb-scrapingrequestcheerio

A guide on passing an ngFor object variable to a function

I am trying to display subcategories for each category in my *ngFor list. The subcategory data is retrieved from Firebase using the category_id, but I am struggling to pass the category_id from the HTML to the function for every member of the category. ho ...

angulartypescriptionic-framework

Looping through nested arrays in an array of objects with Angular's ng-repeat

I'm struggling to access an array within an array of objects in my AngularJS project. Here's the HTML: <li ng-repeat="ai in main.a2"> <div np-repeat="bi in ai.b"> <span ng-bind="bi"></span>b2 </div> </l ...

javascriptangularjsjsonangularjs-ng-repeat

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

An error occurred while trying to assign a value to a property that is undefined in Angular: attempting to set the

I am working with two interfaces export interface ClosureItem{ id:string; name:string; visibility?:boolean; } export interface ClosureAllItems{ [K:string]:ClosureItem; Financials:ClosureItem; Risk:ClosureItem; Iss ...

angulartypescript

Troubles with configuring the Express server in relation to the public directory

After creating two separate bundles for my server and client, I encountered an issue where the client bundle is not being downloaded by the browser when accessing the root route. To address this, I instructed Express to treat the public/ folder as a freel ...

javascriptreactjsexpress

Various tasks to be executed on a shared element

Struggling with implementing actions on a grid component without using a router in Next.js. Here is the current code snippet: const handleActions = (btnPress, row) => { if (btnPress === "Add") {/* implementation */} else if (btnPr ...

javascriptarraysnext.jscomponents

Customize the focus function for an individual element

I am working on a custom component that needs to seamlessly integrate with the native blur and focus functions. My goal is to override these functions in order to achieve the specific functionality I need. Currently, I have managed to override the prototy ...

javascriptjquery

Looking to display an element right away, like a loading spinner, in Vue? If nextTick isn't doing the trick, here's what you can try

Imagine having a Vue component stored in a .vue file with a data member called isLoading: false. The template includes: <div v-show="isLoading" id="hey" ref="hey">Loading...</div> <button @click="loadIt()">Load it</button> Along w ...

javascriptvue.js

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

I have a unique service dedicated to managing app configurations class Configuration { get setting() { return dataStore.fetchSetting(); } set setting(value) { dataStore.saveSetting(value); } } This configuration is linked to components t ...

javascriptangulartypescriptrxjs

What could be causing the issue with React Router not functioning properly in Material UI?

I'm currently working on creating a tab and adding routing inside the first tab. However, I am facing an issue where the desired page does not display after clicking on the link. Strangely, upon refreshing the page, the corresponding page appears as e ...

javascriptreactjsroutesmaterial-ui