Could it be a bug in the TypeScript compiler that enables the invocation of a non-existent getter function?

I find it incredibly perplexing that this code is able to compile without any errors at all:

class Foobar {
    #data = 0
    set data(val: number) { this.#data = val }
    // (There is no getter for "data")
}
let foobar = new Foobar()
// Set the value of data using the setter, works fine
foobar.data = 123
// Attempt to retrieve the value of data using the getter, shouldn't work according to my understanding
console.log(foobar.data) // Outputs "undefined"
  1. Could this be a flaw in the TypeScript compiler? I couldn't find any information about this issue, so maybe I overlooked something.
  2. Is there a tool like ESLint or tsc that can detect and prevent this kind of incorrect code?

Answer №1

A similar issue can be found in the TypeScript Github repository, although it is not identical to the one mentioned.

It is important to note that this behavior is consistent with ES6 class standards. To ensure proper coding practices, there is a linter rule available that checks for mismatched setter and getter methods. While there may not be a specific rule for detecting non-existent getters being called, one workaround is to define a getter that throws an error. This approach will help catch errors during runtime and prompt failed unit tests.

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

Error: Module './App' not found in webpack module

I am encountering the error Uncaught Error: Module not found: Can't resolve ./App' and ./store in client/src. in the console of my local environment when I execute npm start from the client directory. The console is showing 2 errors: ERROR in ...

Guide to utilizing the pdfjs worker in a React and TypeScript environment

I'm currently integrating pdfjs into a React and TypeScript project. import React from "react"; import * as pdfjs from "pdfjs-dist" export default function EditPdf() { React.useEffect(()=>{ const doc = pdfjs.getDocume ...

What is the reason behind the warning "Function components cannot be given refs" when using a custom input component?

When attempting to customize the input component using MUI's InputUnstyled component (or any other unstyled component like SwitchUnstyled, SelectUnstyled, etc.), a warning is triggered Warning: Function components cannot be given refs. Attempts to acc ...

Using TypeScript to deserialize various types from a shared object

I am currently dealing with a JSON array containing serialized objects, each of which has a type field. My challenge lies in deserializing them properly due to TypeScript not cooperating as expected: Check out the TypeScript playground for reference. type ...

Is there a different way to retrieve the tag name of an element besides using

Currently, I am dealing with an outdated version (Chromium 25) of chromium. My goal is to utilize the tagName method in order to retrieve the name of the specific HTML tag being used. While I am aware that Element.tagName functions for versions 43 and ab ...

The selector in Angular ngrx 8 is failing to retrieve a value

I have experience with Angular but I am new to ngrx. I am attempting to retrieve values from my server and display them on the screen. I can see that the values are coming back from the server, and then the effect is triggered by the action: https://i.ss ...

What is the best way to set up the parser and plugins using ESLint's updated flat configuration?

How can ESLint be configured using the new "flat config" system (specifically with the eslint.config.js file) to work seamlessly with both @typescript-eslint/eslint-plugin and /parser? I have been struggling to make ESLint's new configuration system ...

* The div will only show if the conditional value is less than

If I input a numerical value, then have it multiplied by 2 to display the result. For example, if I enter 1000, the output would be 2000. How can I make a div visible only when the result is less than 122? <input type="number" [(ngModel)]="valueIniti ...

There appears to be no overload that aligns with this call using styled components (index.d.ts(2187, 9))

Trying to create an Input component using styled components that accepts props but encountering an error when using the onChange prop - No overload matches this call. It seems like there might be an issue with my types, but even after extensive research, I ...

Trigger a dispatched action within an NGRX selector

I want to ensure that the data in the store is both loaded and matches the router parameters. Since the router serves as the "source of truth," I plan on sending an action to fetch the data if it hasn't been loaded yet. Is it acceptable to perform the ...

What is the process for retrieving a single element from a JSON array within an object and displaying this information on the X-axis using Ionic 6 and Chart.js?

While following a tutorial on utilizing ChartJS in Ionic 6, I encountered a JSON response that looks like this: [ { "id": "1", "name": "Fruit", "last_updated": "2022- ...

What is the best way to instantiate an object of type <T>?

I'm encountering an issue: class Collection<T extends IModel> extends Event implements ICollection<T> { constructor(array: any[] = []) { super() this._init(array) } private _init(array: any[]) { array.forEach( ...

Ways to modify the CSS of an active class within a child component when clicking on another shared component in angular

In my HTML template, I am encountering an issue with two common components. When I click on the app-header link, its active class is applied. However, when I proceed to click on the side navbar's link, its active class also gets applied. I want to en ...

Tips for closing a Modal Dialog in Vue3 using a different component, such as PimeVue

I'm currently working on implementing a Dialog component and integrating it into another component. I have managed to open the Dialog when a button is clicked, but I am facing difficulty in figuring out how to close it. Below are the details of the co ...

Combine multiple objects to create a new object that represents the intersection of all properties

Imagine you have these three objects: const obj = { name: 'bob', }; const obj2 = { foo: 'bar', }; const obj3 = { fizz: 'buzz', }; A simple merge function has been written to combine these three objects into one: ...

Typescript: Using axios to retrieve POST response beyond function boundaries

I've been working on a Typescript function that is supposed to generate and return a token value. Everything seems to be functioning properly, but I'm encountering an issue where the token value is only being logged to the console instead of bein ...

Data is being fetched successfully but is not being saved or updated in ASP.NET Core 3.1

My issue is reminiscent of a similar inquiry on this post. Despite implementing the suggested solutions, my problem persists as I opted for a slightly different approach in terms of storing data in the database. Employee Model Class public class Empl ...

Tips for typing a JavaScript object in one line in TypeScript, with a variable name for the root property

I have this Javascript object: var termsAndConditions = { pt: ["url1", "url2"], en: ["url3", "url4"] } I am looking to elegantly convert it into Typescript in just one line. Here is what I came up with: const termsAndConditions: {[countryKey: Ar ...

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

What is the significance of having nodejs installed in order to run typescript?

What is the reason behind needing Node.js installed before installing TypeScript if we transpile typescript into JavaScript using tsc and run our code in the browser, not locally? ...