What is the reason behind the inability to access a static member in a property method, but being able to access it

Why is it an issue to access a static member from a property method in TypeScript? This behavior works fine in plain ES6 and as a proper prototype method.

class FooBar {
    static v = 123;

    static foo = () => this.v;  // this throws an error in TS (but works in ES6)

    static bar() {
        return this.v;  // but this is allowed in TS??
    }
}

The error arises because the code in the function body is considered part of the property initializer itself:

apptest2.ts:40:24 - error TS2334: 'this' cannot be referenced in a static property initializer.

40     static foo = () => this.v;
                          ~~~~

This error would make more sense if the code was like static foo = this.v, but being within a function callback makes it confusing why it's considered part of the initialization phase of the class where this might not be defined. However, this same structure works in ES6 which adds to the confusion as to why it's an error in TypeScript and why it works in bar() but not in foo().

Answer №1

Today, I encountered an interesting problem and made a notable observation:

If arrow functions are being used, it is necessary to reference the ClassName instead of this.

class FooBar {
    static v = 123;
    static fooArrow = () => FooBar.v; //works
    static foo () {this.v}; //works 
}

It appears that this issue is well-documented in Typescript, with ongoing discussions about potential fixes here. At this time, avoiding arrow functions within Classes may be advisable due to complications surrounding how the this context is linked.

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

What are the TypeScript type definitions for the "package.json" configuration file?

What is the most efficient method for typing the content of the "package.json" file in TypeScript? import { promises as fs } from 'fs'; export function loadManifest(): Promise<any> { const manifestPath = `${PROJECT_DIR}/package.json`; ...

What is the method for substituting one text with another using two-way data binding?

I implemented two different cases in my Mat-Table. When there is no data, the user will see a message saying "No Data Found". However, if the user enters text in the filter search, the "No Data Found" message should be hidden and replaced with the entered ...

React application experiencing freezing when setInterval function is utilized

I've been working on incorporating Conway's Game of Life into a React project, but I'm encountering freezing issues whenever a new generation is triggered. My assumption is that the problem lies in the excessive overhead from constant DOM re ...

React Typescript is causing issues with the paths not functioning properly

Looking to simplify my import paths and remove the need for deeply nested paths. Currently working with React and TypeScript, I made adjustments to my tsConfig file like so: { "compilerOptions": { "baseUrl": "src", & ...

Tips for implementing a real-time search feature in Angular

I require assistance. I am attempting to perform a live search using the following code: when text is entered into an input, I want my targetListOptions array, which is used in a select dropdown, to update accordingly. The code runs without errors, but not ...

Tips for updating a JSON object value in Node.js

Storing a JSON object in a JSON file is important for passing data during an API call. To update the object, replace "it-goes-here" with the following {} block. Newly updated data: { "parenturl":"xxx.com", "user ...

What could be causing the value to not be assigned in TypeScript?

I'm currently working on code aimed at generating a string based on the selected value. this.selectedCategory = selectedvalue.name; this.filter = '{category:${this.selectedCategory}}'; The content of this.filter is {category:${this.selecte ...

What is the best way to update the displayed data when using Mobx with an observable array?

Is there a way to re-render observable array data in Mobx? I have used the observer decorator in this class. interface IQuiz { quizProg: TypeQuizProg; qidx: number; state: IStateCtx; actions: IActionsCtx; } @observer class Comp extends Rea ...

Mastering the Art of Promises in RXJS Observables

After thoroughly researching SO, I stumbled upon numerous questions and answers similar to mine. However, I suspect that there might be gaps in my fundamental understanding of how to effectively work with this technology stack. Currently, I am deeply enga ...

How can I preserve data in editable PDFs with Angular and JavaScript?

Need help with savedoc() functionality <iframe [src] ="fileurl" #iframe> </iframe> <button (click)="saveDoc()"> </button> Having trouble accessing edited PDF content in Typescript: /*api cal ...

Modifying state within reducers is not allowed

Encountered the following error while using @ngrx/store: index.js?4b23:19 State mutation is prohibited inside of reducers. (anonymous) @ index.js?4b23:19 (anonymous) @ index.ts:54 rootReducer @ index.ts:70 _initialStateFactory @ ng2.ts?2a33:24 AppModule ...

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

Toggling multiple ions simultaneously does not function independently

I encountered a problem while working on an ionic app. I needed to have individual control over toggle switches, but my current code toggles all switches at once whenever one switch is tapped. Is there a way to fix this and manage each toggle switch separa ...

Error encountered while processing Graphql response: The string is unable to accurately represent the value of

I'm encountering an issue with GraphQL while attempting to retrieve the name of an airport from JSON data. Instead of receiving a single item containing just the airport name, I'm getting an array with additional details like city, country, geolo ...

Ensure that every member of an object adheres to a particular generic interface in some capacity

Can a TypeScript index signature type be used to enforce that every index adheres to a generic interface? I want to define code like this: interface HasState<T> { state : T; } interface ModuleDefinition { [moduleName : string] : <T>HasSta ...

A guide to creating a dynamic ngTemplateOutlet in Angular

Below is the HTML code I attempted: HTML <ng-container [ngTemplateOutlet]="room"></ng-container> <ng-template #room1> test 1 </ng-template> <ng-template #room2> test 2 </ng-template> <ng-template # ...

Data not showing up in *ngFor loop

component.ts file posts= []; constructor( private http:HttpClient) { http.get('https://jsonplaceholder.typicode.com/posts') .subscribe(response=>{ this.posts.push(response) console.log(this.posts) }); } Within the ...

Displaying products with the active status set to 0 when utilizing the select feature in Angular

I need help displaying only data where "active" is set to 0. The data is retrieved in JSON format as shown below: { "StatusCode": 0, "StatusMessage": "OK", "StatusDescription": [ { "h_id": "1", "active": 0, "d ...

Manually close the AntD Menu without using any shortcuts

I'm facing a unique situation with my table implemented using antd. Each row has a dropdown menu that opens a modal upon clicking. To ensure the dropdown menu doesn't trigger the row click event, I used stopPropagation on the menu item click. Eve ...

Dynamic loading in React Plugin Architecture allows for flexibility in organizing and incorporating

My goal is to develop a Single Page Application on the client side that incorporates a plugin architecture. The requirement is for users to be able to place a package in a designated folder, which will then be loaded by the server after a restart. These pl ...