Are getter and setter pairs permitted to override properties in the base class of JavaScript/TypeScript?

Recently, there has been an update in TypeScript that triggers a compilation error when attempting to override a property in the base class with a getter/setter pair. This issue arises from property access augmentation:

class BaseClass {
    prop        : string        = 'base_class'
}

class SubClass extends BaseClass {
    _prop       : string        = 'sub_class'

    /*
       ERROR: 'prop' is defined as a property in class 'BaseClass', but is overridden here in 'SubClass' as an accessor.
    */
    get prop () : string {
        return this._prop
    }
    set prop (value : string) {
        this._prop = value
    }
}
// try running this snippet with `useDefineForClassFields : true` and `useDefineForClassFields : false`
console.log((new SubClass).prop)

This error stems from the fact that class fields in modern JavaScript now have [[DEFINE]] semantic. As a result, the example above may not behave as expected if the compiler option useDefineForClassFields is set to true. More information can be found here.

The Evolution of Property Access Augmentation

It is worth noting that historically, the DEFINE semantic for class properties was not widely used. Most JavaScript and TypeScript code currently operates under the assumption of SET semantic for class fields.

The property access augmentation pattern, which involves overriding properties in a base class using getter/setter accessors, is considered valid under the SET semantic. This pattern, often seen in JavaScript code, allows for triggering custom actions on property read/write operations.

Previously, TypeScript and JavaScript primarily relied on SET semantic for class fields. The introduction of the DEFINE semantic led to the new compiler configuration useDefineForClassFields, which governs the behavior of class fields and is disabled by default due to its potential impact on existing codebases.

Pondering Points:

  1. Do you believe that the property access augmentation pattern should remain supported by TypeScript under SET semantic (useDefineForClassFields=false, the default setting)?
  2. Have you implemented this pattern in your JavaScript/TypeScript projects? If so, kindly share examples of its usage.

Further reading: Proposal suggesting restriction of the compilation error to DEFINE semantic only

Answer №1

There are instances where I include an override in the extended class

constructor(protected override httpClient: HttpClient) {

        super(httpClient);
        
    }

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 RazorPay callback encountered an Uncaught TypeError indicating that the function is not recognized

In my TypeScript class, I have a defined handler as follows: "handler": function (response) { this.sendUserStatus(); }, Unfortunately, when I attempt to call this.sendUserStatus();, I encounter the following error: Uncaught Typ ...

Guide to invoking the NPM request multiple times within the mocha before hook

Can anyone advise on the correct way to call request multiple times (2 times) in mocha before hook? I am currently facing an issue where I get an error saying 'done() called too many times'. describe('...', function(){ before(functio ...

Transforming class attributes in Typescript

I am facing a situation where I need to alter the type of a variable that stores an object based on certain conditions. Here is the variable in question: class MyClass { public referrers: SelectItemGroup[]; } The issue arises when I only need to add a ...

What is causing the click event handler to only function on the initial page?

Within my code for the "fnInitComplete" : function(oSettings, json), I am utilizing a selector like $('[id^=f_]').each(function (). The data for Datatables is retrieved server-side and "bProcessing":true I am aware that my selectors are only ef ...

Is it possible to create a horizontal navigation bar with buttons that scrolls when media queries are activated? I am looking for a solution using HTML,CSS, JavaScript, and Bootstrap

Struggling to create a horizontally scrollable navigation with buttons for media queries in Bootstrap 5.2, using SCSS for styling. This project is starting to feel overwhelming as we try to replicate the EA site. We're aiming to mimic the behavior of ...

Tips for Managing Disconnection Issues in Angular 7

My goal is to display the ConnectionLost Component if the network is unavailable and the user attempts to navigate to the next page. However, if there is no network and the user does not take any action (doesn't navigate to the next page), then the c ...

jQuery scripts were not loaded, resulting in an uncaught type error

Hey there! I am currently using jQuery Tablesorter to handle pagination on my website, but it seems to be throwing an error in the browser console. The specific error message reads: Uncaught TypeError: undefined is not a function viewTags:24 (anonymous fu ...

Toggle the visibility of a dropdown menu based on the checkbox being checked or unchecked

One challenge I am facing involves displaying and hiding DropDown/Select fields based on the state of a Checkbox. When the checkbox is checked, the Dropdown should be visible, and when unchecked, it should hide. Below is the code snippet for this component ...

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

Unable to perform multi-delete action upon clicking the checkbox button as intended

Within my GridView, I have implemented a Multi-delete feature. Below is the code snippet for your reference:- <script type="text/javascript> function ValidateAll() { var chkselectcount = 0; var gridview = document.getElementById( ...

VueJS encountered an insecure XMLHttpRequest endpoint during the request

I am currently working on a project that consists of a VueJs app with a Laravel backend serving as the API. While testing the app locally, everything works smoothly with the Https protocol. However, upon deploying it to the production server, I encountere ...

How can I implement a right-click menu for a row in a React table and how can I retrieve its properties?

I recently incorporated the react-table package into my project, and everything is working smoothly. However, I am looking to add a context menu that allows me to perform actions like cancel or pause when right-clicking on a row. I am using React with Type ...

Is there a resource or extension available for identifying design flaws in Typescript code?

Currently, I am in the midst of an Angular project and am eager to identify any design flaws in my Typescript code. Are there any tools or extensions available that can help me pinpoint these design issues within my project? Any assistance would be greatl ...

Error: Unable to locate module '@/components/Header' in Next.js project

I'm currently facing an issue while working on my Next.js project. The problem arises when I attempt to import a component into my 'page.js' file. In the 'src' folder, I have a subdirectory named 'components' which contai ...

What is the best way to manage undefined status in react after the user chooses to cancel selecting a file?

Having an issue with my simple Input file type in React. I'm storing the selected file in state, but when I click the clear button, the state doesn't actually get cleared. This leads to {selectedFile.name} throwing an undefined error if the user ...

Creating visual representations of class, organization, flow, or state diagrams using Vega or Vega-lite

I'm struggling to find an example of a state, class, flow chart, or org chart diagram created with Vega. Are there any available online? Vega seems like the perfect tool for this type of visualization, although it may be a bit complex. Without a star ...

The choice between using "npm install" and "npm install -g" for

New to the world of node, and feeling a bit lost when it comes to all this "install" stuff. Could someone clarify for me, what sets apart install from install -g? If something is installed with install -g, can it be accessed from anywhere, or is it restr ...

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

Tips for extracting specific information from a nested object in MongoDB

I am currently storing data for a NestJs based web application in MongoDB. My MongoDB data has the following structure: "gameId": "1a2b3c4d5e" "rounds": [ { "matches": [ { "match_id& ...

Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally. Current Behavior: https://i.sstatic.net/lEQ7o.png My goal is to have t ...