Turn off the warning message that says 'Type of property circularly references itself in mapped type' or find a solution to bypass it

Is there a way to disable this specific error throughout my entire project, or is there a workaround available?

The error message states: "Type of property 'UID' circularly references itself in mapped type 'Partial'.ts(2615)"

https://i.sstatic.net/tzIYH.png

The issue seems to be with JavaScript and Visual Studio Code. When I define the data type as /** @param {A} [data] */, I encounter errors when creating a new instance with new A({}) where I need to fully fill the partial object to avoid a linter error!

https://i.sstatic.net/bL7Q2.png

If I specify the data type as a partial object

/** @param {Partial<A>} [data] */
, then the new A({}) works fine, but I receive linter errors related to the constructor!

https://i.sstatic.net/jtuQ2.png

Alternatively, if I use

/** @param {A|Partial<A>} [data] */
, the errors disappear but all properties become undefined (any) and lose their types!!! Visual Studio Code IntelliSense appears to be confused in this scenario!

https://i.sstatic.net/uSeu3.png


Here's a sample code snippet. How can I specify that Data is a partial object, but with default values if nothing is provided?

Test case: /** @param {A} [data]*/ -

/** @param {Partial<A>} [data] */
-
/** @param { A | Partial<A>} [data] */ 

export class A {
    /** @param {Partial<A>} [data] */ // How can I indicate that it's partial but also has default values? 
    constructor(data) {
        /** uid global of the data */
        this.UID = data.UID || 'noUID';
        this.prop = data.prop || {};
    }
    get VIEW() {
        return this.constructor.name;
    }
}

const a = new A ({UID:'g42t'})

Any help or suggestions would be greatly appreciated.

I'm looking for an efficient solution that improves workflow and minimizes repetition.

I have also opened an issue here. Is it possibly a bug? https://github.com/microsoft/vscode/issues/108062

Answer №1

Issue successfully resolved, intellisense is functioning properly with this particular structure. Thank you to everyone for your input.

It may not be the most visually appealing, but it is functional and accessible to all parent extends constructors.

export class A {

    /**@readonly - Unique Identifier ...description */
    UID = UTILITY.create_UID();
    /**@readonly - Unique Identifier 2 ...description */
    UID2 = '';
    /** @param {Partial<Omit<A, 'UID'>>} [data] */
    constructor(data,{UID2}=data) {
        this.UID2 = UID2 || 'perform default action...';
    }
}

const a = new A ({UID2:'sada'}); // intellisence will not suggest UID here :)

Answer №2

It's interesting that Typescript wasn't tagged in this post as well. :)

Creating a partial class without specifying concrete types can lead to issues with type inference in Typescript. In this case, Typescript will try to infer the types but may fail due to the lack of concrete type definitions. This can result in unexpected behavior, such as having a readonly VIEW() method instead of the intended readonly View() method. It's important to provide explicit type definitions for the data you expect to prevent these inference issues.

One solution is to define the types for the expected data, like so:

export class A {
    /** @param {{UID?:string, prop?:object}} [data] */ 
    constructor(data) {
        /** global UID of the data */
        this.UID = data.UID || 'noUID';
        this.prop = data.prop || {};
    }
    get VIEW() {
        return this.constructor.name;
    }
}

const a = new A ({UID:'g42t'})

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

Why is the value in my React Redux state not updating as expected?

I recently started learning react js as a beginner. To practice, I created a crud app and integrated firebase for authentication. However, I'm facing an issue where I'm not able to retrieve the updated value. Index.jsx At line 11, I'm stru ...

Solving the issue of loading Ember Initializers during the transition to TypeScript

While following the ember quick start tutorial, I attempted to switch from Javascript to Typescript. Converting the .js files to .ts files resulted in an error with the ember-load-initializers import. The application is unable to run until this issue is re ...

Choosing KineticJS path based on its identification number

I've been working on creating an interactive map using some prebuilt templates. Each country in the map highlights when the mouse hovers over it. My question is, how can I make another country, like Brazil, highlight when any country is hovered over? ...

Working with Vue.js to call component methods when the page loads

My payment implementation utilizes vue-js and stripe. I found that the only way to incorporate Stripe with vue-js was through the use of script.onload. Now, I am trying to access some of my methods within the onload function. Specifically, I want to call ...

image source that changes dynamically with a placeholder image

Currently, I am facing a certain issue. Unfortunately, I cannot provide a plunkr example as the image is sourced from a protected site and there are no open URLs available that constantly serve changing images. Additionally, I am unable to use a local anim ...

Displaying Props Information in a Modal Window using React

Currently venturing into the realm of React JS, where I am in the process of developing a sample eCommerce application for real-time use. However, I have hit a roadblock. In my Products List, there is a Buy button for each product. When clicking on this b ...

Error encountered while attempting to define a method in a class component in React.js

Can you tell me if these two code snippets are equivalent? async onSearchSubmit(term) { const response = await axios.get('https://api.somewebsite.com/search/photos', { params: {query: term}, headers:{ ...

Why is the text not displaying in ReactJS when using Enzyme?

Can you please assist me in understanding why my test case is not running in React when using enzyme? I have installed enzyme js and followed this tutorial at Below is the code I am using: import React from 'react'; import Hello from './ ...

The Node.js application is up and running on the Node server, but unfortunately, no output is

Greetings, I am a beginner in nodejs. var io = require('socket.io').listen(server); users = []; connections = []; server.listen(process.env.PORT || 3000); console.log('server running....on Pro'); app.get ('/', function(re ...

Next.js Configuration Files Explained

Currently, my application is functioning well with the use of Next.js and Next.js API tool for handling requests. The backend is managed through sanity.io which is working smoothly. In my sanity configuration setup, I have a dedicated file named 'san ...

Validating forms using ajax, php, and mysql for seamless user input processing

I'm currently in the process of creating a login form that includes an instant email address verification feature against my database. Despite my efforts and attempts to make this functionality work, I have faced challenges in getting it to function ...

Having trouble with table sorting in Jquery?

I am a beginner in the realm of Jquery and web programming. Recently, I attempted to implement the tablesorter jquery plugin for one of my projects but encountered issues with making it work properly. In search of a solution, I turned to Stack Overflow. C ...

The uploaded files are not supported due to a media type error (415)

Although I found a similar query, it didn't provide a solution to the error I am encountering. Below is the PUT action in my API's Controller, which functions correctly in Swagger: [HttpPut("{id}/upload")] public async Task<IActionResult> ...

A guide to displaying a DIV element upon clicking a button in ReactJs

While developing a form, I encountered the need to render the same div in the "Active Membership" section whenever the "Add More" button is pressed. Since users can have multiple active memberships, each time the button is clicked, the input section shou ...

I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down? <form action="" me ...

Approach to dividing PHP output into multiple outputs (AJAX, PHP) (nested AJAX requests, AJAX inside AJAX loop?)

Seeking advice on how to efficiently handle PHP output in small chunks for AJAX responseText. The project involves a webpage using AJAX to input a last name, which is then processed by a PHP program. The PHP code randomly selects three people with differen ...

The functionality of anchor links created through ajax is not operating correctly

Issue: I am encountering a problem where I have a table filled via Ajax, containing local anchors. When an anchor is clicked, it should make a section visible and automatically scroll to it. This functionality works when manually filling the table, but not ...

Error: Attempting to assign a value to the non-existent property 'user' <br>    at [file path] on sqlite3

I encounter an unspecified error when I try to establish a session for the user after validating their credentials during login. I'm utilizing express-session to create the session, but it's not directly imported into the file as instructed by my ...

When rendering, DirectionsRenderer replaces the Marker

I'm currently working on implementing a real-time tracking system for customers to track their deliveries. I have succeeded in setting up markers for the destination and pickup locations, as well as a route path towards them. However, I encountered an ...

SonarQube flagging a suggestion to "eliminate this unnecessary assignment to a local variable"

Why am I encountering an error with SonarQube? How can I resolve it since the rule page does not offer a specific solution? The suggestion is to eliminate the unnecessary assignment to the local variable "validateAddressRequest". validateAddress() { ...