How come the hover feature in VS Code doesn't display the "null" part of my JSDoc type definition union?

Here is an example of a LinkedList class definition that utilizes JSDoc and jsconfig.json for type checking in VSCode. The issue lies in displaying the type of value and next as union types with undefined, which is not currently happening.

class LinkedListNode {
  /**
   * @param {number | undefined} value
   * @param {LinkedListNode | undefined} next
   */
  constructor(value, next) {

    /** @type {number} */
    this.value = value ?? 0;

    /** @type {LinkedListNode | null} */
    this.next = next ?? null;
  }
}

This problem applies to all unions, but let's focus on one specific line:

/** @type {LinkedListNode | null} */
this.next = next ?? null;

Currently, the hover message on this.next is incorrect:

(property) LinkedListNode.next: LinkedListNode

What we want to see is:

(property) LinkedListNode.next: LinkedListNode | null

I have attempted various solutions, none of which have resolved the issue:

/** @type {LinkedListNode | null} */
/** @type {?LinkedListNode} */
/** @type {(LinkedListNode|null)} */

Answer №1

When it comes to changing behavior in a project, the asker of this question pointed out one way to do so - by modifying the jsconfig.json's compiler options with the strict property.

However, there are a couple of crucial details that were overlooked:

  1. The strict property is not directly related to the desired effect. The actual configuration property that matters is strictNullChecks, which defaults to true when strict is enabled and defaults to false otherwise.

  2. Interestingly, the jsconfig.json file has implicit defaults that can be adjusted within VS Code settings, specifically those beginning with "js/ts.implicitProjectConfig." (this may not be commonly known, but there are hints of this in documentation). One important setting to consider is

    js/ts.implicitProjectConfig.strictNullChecks
    , which is normally set to true.

Considering the problem described in the question, it's essential to verify that the

js/ts.implicitProjectConfig.strictNullChecks
setting in VS Code hasn't been mistakenly switched to false.

Answer №2

It slipped my mind that I had overlooked something crucial.

I realized that in my jsconfig.json, I had failed to include "strict": true, which inadvertently disabled nullish unions in this specific scenario.

After adding it to my jsconfig.json and restarting VSCode, the tooltip now accurately displays the union.

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

How can I conceal login and register router-links in the Vue + Laravel SPA project navbar immediately after a user logs in?

Currently, I am working on my Bachelor's degree project and have encountered a specific issue. While the login, register, and logout functions all seem to be working well, there is an inconsistency with the navigation bar not automatically switching b ...

What is the best way to transfer the value of one directive attribute to another directive in AngularJS?

For instance: <custom-main> <custom-sub1 att-name="test"></custom-sub1> <custom-sub2></custom-sub2> </custom-main> JavaScript Source Code bosAppModule.directive('custom-main',[&apos ...

AngularJS - Smoothly navigate to the top of the page by swiping left or right

I'm currently working on a project in angularJS and ionic that involves a slidebox with three slides, each containing different content. My goal is to scroll back to the top every time I switch between slides. Initially, I thought using on-swipe-left ...

When an email link is clicked in Angular, Internet Explorer is automatically logged out and needs to be refreshed

I'm currently working on a project using an Angular 4 Application. One of the elements in my HTML code is an href link that has a mailto: email address. The issue I'm facing is that when I click on this link while using IE11, either I get autom ...

Understanding Different Symbols in TypeScript

Can you explain the purpose of symbols in TypeScript to me? As someone familiar with Java, it seems a bit unnecessary to use them alongside an interface declaration. What is the reason for setting symbols in TypeScript? For example, consider the followin ...

Tips for displaying the overlay in a jQuery UI modal dialog

The demonstration shows that the overlay is displayed correctly and all elements below it are disabled: <div class="ui-widget-overlay" style="width: 1920px; height: 650px; z-index: 1001;"></div> However, on my webpage, I am still able to inte ...

Determine the length of the string using an angular design

I have an input field and a span set up like this: <input type="password" name="account_password" placeholder="Enter your new password" autocomplete="off" ng-model="res.account.new_password" required="" ng-minlength="res.minlength" class="form-control" ...

Tips for parsing a JSON file within my node.js application?

I am working on a node.js service that involves validating JSON data against a schema defined in jsonSchema. Below is the code snippet for my service: app.post('/*', function (req, res) { var isvalid = require('isvalid'); ...

How can I replace any non-alphanumeric characters in a string with an underscore using JavaScript or TypeScript?

There is a unique string generated from an external data source that I cannot manage. The system above me necessitates the IDs to adhere to this rule: "Field names should start with a letter and can solely consist of letters, numbers, or underscores (&apos ...

How can I verify an element's attribute while employing Event Delegation?

Is there a method to determine if a particular element has been activated using Event Delegation, based on its attribute, class, or ID? <ul> <li><button>Make the first paragraph appear</button></li> <li><butto ...

Manipulating CSS rules using JavaScript/jQuery

My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...

Sending a null value through AJAX to a controller

I've been working on adjusting my save routine to pass a null value to id_cellcarrier in my codeigniter controller. The code snippet below showcases what I've attempted so far, but it doesn't seem to be functioning correctly. I'm omitti ...

Injecting services with an abstract class is a common practice in Angular library modules

In my development workflow, I have established an Angular Component Library that I deploy using NPM (via Nexus) to various similar projects. This library includes a PageComponent, which contains a FooterComponent and a NavbarComponent. Within the NavbarCom ...

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

Is there a shorter method to continuously run a function based on keypress in a specific scenario?

What is the goal of my task? My objective is to keep the movement of the TrumpHead going until another key is pressed to change its direction, similar to the game snake. I am considering creating multiple cases with functions containing cases within each ...

What causes the transformation of "boolean" into "false & true" in the PayloadAction within redux-starter-kit?

In my React project, I am utilizing redux-starter-kit. I am currently working on specifying the type of action payload in the reducer using the createSlice method. I have implemented two reducers: setFetchingMenuItems: ( state: IPagesState, { payload ...

Using JavaScript to compare arrays in order to display only the distinct outcome

Just starting out with JavaScript array matching! I've got two arrays, both with 11 elements each: txtfilename=['txt1','txt6','txt6','txt6','txt7','txt7','txt8','txt9',& ...

Guide to typing a new version of a function without any optional parameters using a mapped tuple

I am attempting to create a modified version of a function that has the same arguments as the original function, but with none being optional. I have tried using a mapped tuple approach with the following logic: type IFArgs = ArgsN<typeof getFunc> t ...

Module-alias cannot be resolved by esm

Currently, I am utilizing the combination of esm package and module-alias. However, it appears that esm is not recognizing module-alias's paths. This is how I am loading my server file: nodemon -r esm ./src/index.js 8081 At the beginning of my inde ...

What is the best way to send multiple input box values to a function set in the controller?

I am attempting to send the values of two input boxes to a single controller function. <div class="container" ng-controller="MainCtrl"> <div class="row"> <div class="col-lg-6"> <input type="text" ...