What methods can I use to accurately describe a type in WebStorm using only JSDoc?

After implementing the code snippet provided, I am encountering an issue where the annotator is indicating that BrowserSelector is not defined in the second typedef:

/**
 * @typedef {{name: String, minVer: Number, maxVer: Number}} BrowserSelector
 */

/**
 * @typedef {{type:String, browser: BrowserSelector, attribute: Object}} Selector
 */

It seems like there may be a mismatch between the type and the name. Is there a way to properly associate them without altering the actual code, only through jsdoc comments?

javascriptwebstormjsdoc

Answer №1

When working with 'struct' like types, I prefer to use a specific comment style:

/**
 * @name BrowserSelector
 * @property {String} name
 * @property {Number} minVer
 * @property {Number} maxVer
 */

/** @type {BrowserSelector|*} */
var mySelector = {}; // The use of '*' in @type prevents warnings
mySelector.name = 'foo'; // No warning is triggered as expected
mySelector.id = 'bar'; // A warning is generated for this line

Answer №2

As of Webstorm 7 (and possibly earlier), there is no longer a need for multiple comments to describe properties.

/**
 * @name BrowserSelector
 * @type {{
 *     name: String,
 *     minVer: Number,
 *     maxVer: Number
 * }}
 */

Answer №3

While analyzing the source code of AngularJS, I made an interesting observation - they also annotated elements without directly attached code. Intrigued by this approach, I decided to apply it to your situation and managed to generate the following structure (even enabling code completion and type checking in WebStorm):

/**
 * @name ElementManager
 */
/**
 * @name ElementManager#id
 * @type {number}
 */
/**
 * @name ElementManager#description
 * @type {string}
 */
/**
 * @name ElementManager#status
 * @type {boolean}
 */

/**
 * @name Manager
 */
/**
 * @name Manager#category
 * @type {string}
 */
/**
 * @name Manager#element
 * @type {ElementManager}
 */
/**
 * @name Manager#details
 * @type {Object}
 */

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

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

javascripthtmlangularfilter

Deactivate the underscore and include the fiscal year in AngularJS

I am currently faced with a scenario where the back end is returning the value as follows: 123222_D1.123 However, I need to display the date from the database (12-Jun-2020) as 2020-D1.123 in a drop-down menu. Currently, I am displaying the above value i ...

javascriptangulartypescriptangular8

Utilize JavaScript to Set Event Handlers in HTML DOM

Currently, I am diving into the world of JavaScript and came across an example that has left me puzzled. It seems that calling functions can work in different ways, for instance: <button onclick="displayDate()">Try it</button> And also like t ...

javascripthtmldom

Issue with React Native TextInput failing to update state within a functional component when onChange event is triggered

When using a TextInput in a React Native functional component, I am facing an issue where the state for "name" is not updating properly when onChange occurs. To debug this issue, I have added a console log in useEffect to monitor the new state value. Howe ...

javascriptreactjsreact-nativereact-hooks

Connecting HTML element using onscroll or onchange does not function

Is there a way to change the width of a div .progress container when the height of div #myContact reaches 100% on scroll? I've attempted to link the HTML element with onscroll and onchange, but nothing seems to work. <div onscroll="scrollProgress ...

javascripthtmlcss

Is it possible to create a development build using Npm with React and Typescript?

I have successfully set up a TypeScript React app by using the command below: npx create-react-app my-app --template typescript However, running "npm start" generates development javascript files and launches a development server which is not id ...

javascriptreactjstypescriptnpm

Issue with ng-hide logic malfunctioning

I am currently developing an Ionic application and encountering some issues with the ng-hide directive. My goal is to display or hide a button based on whether the user has completed registration. The button in question: <button class="button button-c ...

javascriptangularjsionic-frameworkng-hide

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

This Java desktop GUI utilizes a Java-based web services communication layer along with an HTML library to provide powerful charting and interactivity. I am looking to integrate an HTML5 view within the Java GUI. Can someone assist me in managing JavaScri ...

javajavascripthtmlswinguser-interface

Automatically update certain attributes of an object with Spring MVC's auto-refresh feature

Currently, I have a table in JSP where I am populating all object attributes using Spring MVC. The backend is providing a list of DTO's which are then being added to the ModelView. In the JSP, we iterate through this DTO list and display it in the tab ...

javascriptjavaajaxjspspring-mvc

Troubleshooting in WebStorm: Uncovering the Root Cause Within an npm Package (node:36378) [DEP0005] - Warning: Deprecation Warning

Over the past 6 months, I've been encountering an error that seems to have surfaced after an update to node.js. (node:36378) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), ...

javascriptnode.jsloggingbufferwebstorm

Creating HTML inputs dynamically using jQuery in an ASP.NET application

I have written this JavaScript code to dynamically generate and add HTML elements within my asp.net webform: var i = 0; function addFields() { i++; var quantity = '<td class="auto-style2"><input type="text" size="3" name= ...

javascriptjqueryhtmlasp.net

What is the best way to enable navigation through a table's rows using the up and down arrow keys, and dynamically add the :hover effect to those rows through code?

In my project, I have implemented an input field of type text that is utilized to conduct asynchronous searches on table rows using jQuery. An .on function is connected to the search input, and upon pressing a key down, a function named hoverDown() is exec ...

javascriptjqueryhtmlevent-handling

Ensuring the authenticity of pubsubhubbub content signatures using Node.js and Express

Recently, I started working with Express and I'm currently in the process of setting up a middleware to handle a specific X-Hub-Signature based on the guidelines provided here: My goal is to create a middleware that can manage this task before the re ...

javascriptnode.jsexpresscryptographywebsub

The HTML5 thumbs-up feature will not be visible when not logged in

I have searched high and low on the web and even visited #facebook, but with no luck. I have experimented with the FBXML code as well, and it seems that if you are not logged into Facebook, the Like button will not appear on the page. The strange thing is ...

javascripthtmlfacebook-likefacebook-javascript-sdkfacebook-likebox

File resolution issue with TypeScript

While I am aware that using TypeScript outFile is generally advised against, I currently have no choice but to utilize it until a more suitable solution like AMD can be implemented. It seems like there may be a "module splitting issue" in my project. In t ...

javascriptvisual-studiotypescripttsc

Exploring end-to-end testing with NestJS and Guards

I'm trying to test an endpoint called /users using nestjs, but I encountered some errors. I'm unsure how to fix the issues and make the test pass with a guard. First Issue Nest is unable to resolve dependencies of the UserModel (?). Please en ...

javascriptnode.jstypescriptjestjsnestjs

What are some ways to utilize v-on="$listeners" besides just for @click events?

My Button.vue component has a specific structure. I am utilizing v-on="$listeners" to transfer all listeners to the <a> element. <template> <a v-bind="$attrs" v-on="$listeners" class= ...

javascriptvue.jsvuejs2

Sharing data from ViewModel to JavaScript

Currently, in the process of creating an MVC 5 web application, I am faced with the challenge of passing a value from my ViewModel to a function in my JavaScript code. The objective is to hide a Label/Div element when the user selects the option "No" and ...

javascriptc#jquerymodel-view-controller

Utilizing JavaScript to add classes to a parent element

When a user clicks on a link, I want to add a class to the <li> tag that wraps around it. Here is an example: <ul> <li><a href="#">Just an Example</a></li> </ul> How can I target the <li> element enclosing ...

javascriptjqueryhtml

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

In my Angular 12 project, I have integrated Tailwind CSS. The structure of the package.json is as below: { "name": "some-angular-app", "version": "0.0.0", "scripts": { "ng": "ng&quo ...

javascripthtmlcssangulartailwind-css