Exploring the use of static properties in JSDoc Classes

Is there a way for me to set up this correctly? https://i.sstatic.net/dn75F.png

I am trying to document the id property using the static classes _Test.list, but I can't seem to find the right method with intellisense in vscode. So any number not coming from the _Test.list dictionary should throw an error. https://i.sstatic.net/Ml2HP.png

Can anyone help me format this properly with jsdoc, please? I apologize if this is a beginner question, as I'm just starting out with jsdoc.

class _Test {
    static list = { a:1,b:2,c:3 };
    constructor() {
        /**
        * @typedef {Object} DATA
        * @property {_Test.list} DATA.id - id from list _Test.list
        * @property {_Test.list} DATA.id2 - id from list _Test.list
        * 
        */
        /**@type {DATA} */
        this.list = {
            id: _Test.list.a, // should work fine
            id2: 14, // should display an error
        }
    }
};

I want to continue like this because I need to maintain reference features in vscode. https://i.sstatic.net/ZiD67.png

javascripttypescriptvisual-studio-codeintellisensejsdoc

Answer №1

In contrast to Typescript, JSDoc does not include the as const concept. However, you can explicitly define a literal type like this:

/** @type {{ a: 1, b: 2, c: 3 }} */
static options = { a: 1, b: 2, c: 3 }

An alternative approach is to specify your permitted values and utilize them in an index signature:

/** @typedef {1 | 2 | 3} AllowedValues */
/** @typedef {{ [key: string]: AllowedValues }} Data */

/** @type {Data} */
static info = { a: 1, b: 2, c: 3 }

This way, you can reference Data throughout your code.

class _Example {
    /** @type {Data} */
    static info = { a: 1, b: 2, c: 3 };
    constructor() {
        /** @type {Data} */
        this.data = {
            id: _Example.info.a, // should be valid
            id2: 14, // should trigger an error
        }
    }
};

Answer №2

Exciting news! Intellisense now supports mixing JSDoc with TypeScript, allowing us to utilize @type {keyof staticList} for even more powerful development.

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

Utilize Jquery to calculate the total sum of values associated with a particular key in a JSON object based on input

I am facing an issue with my script where I am trying to sum up the clientPrice keys in a JSON object assigned to a form text element. Here is what I have: <input id="clientList" type="hidden" value="[{"clientID":"1","clientType":"0","clientPrice":"450 ...

javascriptjqueryjson

Guide to deploying a Node.js application

After setting up npm locally and installing Bower, Grunt, Polymer, and Yeoman, I find myself a little confused about what Node.js actually is. In the past, I would set up an Apache server, install phpMyAdmin, and start working on my project using PHP. Howe ...

javascriptnode.js

What is the syntax for inserting a text (value) into a text input field in HTML using PHP?

I'm having trouble getting the input field to populate with "Hello" when the button is clicked. I've checked for a solution, but can't seem to find one. Any help would be appreciated. Thank you. <!DOCTYPE html> <html> <head&g ...

javascriptphpinput

Tips for extracting values from a PHP array using JavaScript

Assuming we have a PHP array named $decoded: $decoded = array( 'method' => 'getFile', 'number' => '12345' ); The data from this array will be passed to a JavaScript function called get(params). funct ...

javascriptphparrays

Loading screen for specific content section

I currently have a CSS preloader implemented on my WordPress site, but I am facing an issue where the preloader hides the entire page instead of just a part of the content that I want to hide. Specifically, I would like to hide only the main content sectio ...

javascriptjquerycsswordpresspreloader

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

Every time I try to click on the div, I encounter an error message stating 'Uncaught ReferenceError: sel is not defined at HTMLDivElement.onclick' I am currently developing with Angular 8 and this error keeps popping up. I have read through simil ...

javascripthtmlangulartypescriptangular8

Tips for managing back and forth navigation in react native webview component using custom components on iOS

I'm currently faced with a task that involves creating a webview component with custom back and forward buttons in React Native for IOS. My current application includes a web-view component which only displays a basic browser without any built-in con ...

javascriptiosreactjsreact-native

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

javascripthtml

Creating a comprehensive object within a single interface using Typescript

Here is an example of an Object in TypeScript: export class test{ recordname: string; comments: [{ comment: string }] } To define it using one interface instead of multiple interfaces, you can try something like this: export int ...

typescript

The property length is undefined and cannot be read

I'm currently utilizing a dexi.io robot for the purpose of automating data extraction from permit databases. This particular robot has the capability to process custom JavaScript in order to dissect the incoming JSON object. While this code does func ...

javascriptjsonrestparsing

What causes the variable "change" to display unexpected results?

Why isn't the function working as expected? I need the change to be 0. I believe there must be a more efficient way to solve this issue, but what's bothering me is that the "change" variable is giving strange values...need help! function checkCa ...

javascript

The value of the checkbox model in AngularJS is not defined

I'm encountering an issue where I am trying to send the value of a checkbox from my model to the server. Since the checkbox has not been interacted with on the form, Angular does not assign it a value and returns undefined when I request the value. B ...

javascriptangularjscheckbox

Unable to call Ionic component function using ref in Vue3

I'm attempting to utilize the closeSlidingItems method of the IonList element in order to automatically close the sliding item after clicking a button that appears from behind once the item is slid to the right. My approach involved referencing IonLi ...

javascriptvue.jsionic-framework

Should I include JSX or JS when exporting ReactJS components as node modules to npm?

I've been busy developing React.js components and sharing them as modules on npm. My approach involves utilizing a gulp task to convert all jsx components into js, leveraging gulp-react: var react = require('gulp-react'); gulp.task(' ...

javascriptnode.jsnpmgulpreactjs

Retrieving specific rows from an array in AngularJS based on certain conditions

I am dealing with an array that has the following structure: var hospitals=[{"distric_id":"1","type":"c","details":[{"name":"hello","address":"hello","number":"686678"}]}, {"distric_id":"1","type":"g","details":[{"name":"hello","address":"hello","numbe ...

javascripthtmlarraysangularjs

Is there a way to identify changes in screen size in Angular when hiding an element?

During the development of a contact form, I encountered a challenge. After successfully submitting the form, I hide it, but then the footer pops up because the form is hidden: <div class="form-wrapper mat-elevation-z1" [hidden]="successfullySent"> ...

angulartypescript

Rule Set Selector with Multiple Combo Box Options

In order to simplify the process, I have created a set of rules for a combo boy as follows: A | B 1 | 1 1 | 2 2 | 2 2 | 3 Columns A and B represent the values that can be selected in a combo box. For example, if the first combo box is set to value 1, then ...

angulartypescriptrule-engine

Results from the query cannot be altered

Currently working with mongoose, I encountered an issue while trying to modify the results of my find query. Users.find().exec((err, result) => { if(result){ result.map((usr) => { usr.isFetchedOnce = true }); console.log("u ...

javascriptmongodbmongoose

javascript unable to delete cookie

After conducting extensive research across various articles and links on deleting cookies using JavaScript, I have encountered an issue where the JavaScript code does not seem to be functioning as expected. The code I utilized for setting cookie values usi ...

javascriptcookiessession-cookies