Error message encountered when attempting to override a static field in a derived class that incorrectly extends the base class

When a static field is overridden in a derived class, it leads to an issue

Error TS2417: Build:Class static side 'typeof TDerived' incorrectly extends base class static side 'typeof TBase'

Is this a valid error scenario?

class TBase
{
  private static s_field = 'something';

  public constructor() {}
}

class TDerived extends TBase
{
  private static s_field = 'something else'; // removing this line resolves the error

  public constructor()
  {
    super();
  }
}

What is the best approach for handling static fields? Currently, the only solution seems to be prefixing the class name before every static field, which is not ideal.

private static TBase_s_field = 'something';
...
private static TDerived_s_field = 'something else';

ps using typescript 2.0.3

Answer №1

It is not allowed to redeclare a private field in a subclass. If you want subclasses to be able to access or override the field, consider using protected instead.

This restriction exists because static methods are accessible in subclasses as well. For instance, the following code demonstrates unexpected behavior (disregarding the compilation error):

class Base {
    private static foo = 'base';

    static printName() {
        // Should always display 'base' since no other class
        // can modify 'foo'
        console.log(this.foo);
    }
}

class Derived extends Base {
    private static foo = 'derived';
}
// Will output 'derived' instead
Derived.printName();

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

Tips for stopping webpack from creating compiled files in the source directory

I'm in the process of transitioning my AngularJs project from ES6 to TypeScript and I've integrated webpack with ts-loader. However, I've encountered an issue where the compiled files and source maps are saved in my directory instead of bei ...

Harnessing the power of Material-UI's muiThemeable with Typescript

I'm trying to access the current theme colors within a custom React component. The example I'm referencing is from Material UI http://www.material-ui.com/#/customization/themes Despite attempting various approaches, I'm unable to get Typesc ...

TypeScript - create an Interface that must have either the error field or the payload field, but

My Action type has the following requirements: MUST have a field type {String} CAN include a field payload {Object<string, any>} CAN include a field error {Error} Constraints: IF it contains the field payload THEN it cannot contain the field er ...

Despite attempts to exclude them, types in node_modules continue to be compiled in TypeScript

During my attempt to compile my typescript source code, I've noticed that the compiler is also attempting to compile the types found within my node_modules directory. I am currently utilizing typescript version 2.6.1 and have my tsconfig file set up ...

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

Seamless string arrays in JavaScript and TypeScript

I am working with a system that has the following structure: interface Data { x: number; y: number; n: string; } const array = Array<Data>(100); I have heard that in Chrome, the V8 engine may allocate objects as ...

Obtaining data from a TypeScript decorator

export class UploadGreetingController { constructor( private greetingFacade: GreetingFacade, ) {} @UseInterceptors(FileInterceptor('file', { storage: diskStorage({ destination: (req: any, file, cb) => { if (process.env ...

Filtering a Table with Angular Material: Using multiple filters and filter values simultaneously

Looking to implement dual filters for a table of objects, one being text-based and the other checkbox-based. The text filter works fine, but struggling with the checkbox filter labeled "Level 1", "Level 2", etc. Ideally, when a checkbox is checked, it shou ...

Issue: TypeScript is throwing an error of type TypeError because it is unable to read the property "push" of an undefined

I am encountering a common issue while working with TypeScript. The error message I am receiving is: ERROR TypeError: Cannot read property 'push' of undefined In my code, I have defined a model called EmailModel: export class EmailModel { ...

Exploring the functionality of the Angular snackbar feature

I have created a simple snackbar with the following code: app.component.ts: ngOnInit(){ this.dataService.valueChanges.pipe( filter((data) => data === true), switchMap(() => { const snackBarRef = this.matSnackBar.open ...

The parameter cannot be assigned to type 'HTMLCanvasElement | null' due to conflicting arguments

I am encountering an issue with the following code, as it fails to compile: import React, {useEffect} from 'react' import {Card, Image} from 'semantic-ui-react' import * as chart from 'chart.js' export const PieChartCard = ...

The Angular-Chart.js chart fails to display when data is automatically inserted

I came across this sample code at https://stackblitz.com/edit/angular-chartjs-multiple-charts and tried using it. Everything was working well with static data, but when I attempted to push data retrieved from the Firebase Realtime Database into the chart, ...

Encountering a bug in Angular 10 while attempting to assign a value from

I am having trouble updating the role of a user. In my database, I have a user table and a role table with a ManyToMany relation. I can retrieve all the values and even the correct selected value, but I am encountering issues when trying to update it. Her ...

Testing @microsoft/applicationinsights-web within an Angular project on a local environment

How can I test Microsoft's application insights locally? Most guides I've come across suggest testing it on the Azure portal, but I can't do that as it would mean testing it in a production environment. ...

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

After upgrading Angular from version 12 to 13, I encountered an error when running the app: "Uncaught SyntaxError: Unexpected token 'export'." Here are some additional details for context: In the angular.json configuration file, I had specified ...

Cannot execute example of type alias in Typescript

While delving into the Typescript documentation, I came across the concept of type alias and found an interesting example here. type DescribableFunction = { description: string; (someArg: number): boolean; }; function doSomething(fn: DescribableFunctio ...

Setting the desired configuration for launching an Aurelia application

After creating a new Aurelia Typescript application using the au new command from the Aurelia CLI, I noticed that there is a config directory at the root of the project. Inside this directory, there are two files: environment.json and environment.productio ...

When using Playwright, there may arise a requirement to reuse a specific UUID that has been defined in one test within another

I have two separate tests running in parallel, each creating a different company in my test environment. However, I need to access the uuid of both companies in later tests. I am looking for a way to store these uuids so they can be used across all subseq ...

Differentiating between TypeScript string literal types and enums

Is it better to use enum or string literal type in TypeScript? String literal type: export type Animal = { id : number, name : string, type : "dog" | "cat" } Enum: export enum Type{ dog = "dog", cat = &qu ...