Is it true that a TypeScript derived class is not allowed to have identical variable names?

Why is it not allowed for TypeScript derived classes to have the same variable name, even if these members are private? Is there another way to achieve this, or am I making a mistake?

class ClassTS {
    
    private nom: string = "ClassTS";
    
    constructor() {
            
    }
}

class ClassTSDer extends ClassTS {
    
    private nom: string = "ClassTS";
    
    constructor() {
        super();
    }
}

I came across this issue while practicing with TS.

Class 'ClassTSDer' incorrectly extends base class 'ClassTS'. Types have separate declarations of a private property 'nom'. ClassTSDer

class ClassTSDer

You could use protected; however, if I prefer not to use protected, do I need to use a different name?

Answer №1

Make sure each property has a unique name.

Keep in mind that during execution, JavaScript class instances behave like regular objects where properties are essentially key-value pairs. Each property name is the key, and it's essential to avoid having two different keys sharing the same name.

Answer №2

It is important for properties to have unique names.

When examining the ES5 code generated, it becomes evident that defining a property with the same name in a child class as a private property in the parent class will override the parent property, potentially compromising encapsulation.

/**
 * ClassTS
 */
var ClassTS = (function () {
    function ClassTS() {
        this.nom = "ClaseTS";
    }
    ClassTS.prototype.someMethod = function () {
        console.log(this.nom);
    };
    return ClassTS;
}());
/**
 * ClassTSDer
 */
var ClassTSDer = (function (_super) {
    __extends(ClassTSDer, _super);
    function ClassTSDer() {
        _super.call(this);
        this.nom = "ClassTS";
    }
    ClassTSDer.prototype.childMethod = function () {
        _super.prototype.someMethod.call(this);
    };
    return ClassTSDer;
}(ClassTS));

In such cases, calling any function from the parent within the child class will result in this.nom having the value "ClassTS" instead of the expected "ClaseTs" from the private property.

The compiler does not issue warnings about protected properties (despite producing similar ES5 code) because the concept of encapsulation is no longer maintained.

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

Unable to locate the reference to 'Handlebars' in the code

I am currently attempting to implement handlebars in Typescript, but I encountered an error. /// <reference path="../../../jquery.d.ts" /> /// <reference path="../../../require.d.ts" /> My issue lies in referencing the handlebars definition f ...

Scroll automatically to the last div whenever a button is clicked using React and Typescript

I'm currently working on an application being developed in React + Typescript. I am trying to implement auto-scroll functionality to the last div within a parent div where child divs are dynamically added based on data from an array of objects. The da ...

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based. export interface TenantDto { uuid: string; name: string; } export const useTenantStore = defineStore('tenant', { state: () => ({ tenants: [], }), actions: { setMyTenants: (pa ...

Asynchronous execution of Angular 2 services

Currently, I am working on a project that utilizes Angular and RxJS. My approach involves creating an injectable class responsible for fetching data from a JSON source as shown below: import {Injectable, Inject} from '@angular/core'; import {Ht ...

Attempting to authenticate with Next.js using JWT in a middleware is proving to be unsuccessful

Currently, I am authenticating the user in each API call. To streamline this process and authenticate the user only once, I decided to implement a middleware. I created a file named _middleware.ts within the /pages/api directory and followed the same appr ...

The function was operational before, but currently it is indicating that it is no longer functioning as a

I encountered an issue with my code where a service that was previously working has suddenly stopped functioning and is now displaying an error message stating that it's not a function. Thanks to Sajeetharan for helping me out initially. constructo ...

Exposing the method to the outside world by making it public in

I have a situation where I have a base class with a protected method called foo, and a child class that needs to make this method publicly accessible. Since this method will be called frequently, I am looking for a more efficient solution to avoid unnecess ...

Is it possible for transclusion to display content from external sources using *ngIf and <ng-content>?

In my Angular4 Project, I have come across this snippet of code: <div class="divider"></div> <ng-content select=".nav-toggle"></ng-content> Now, I am trying to figure out a way to display the divider only when there is content pr ...

experiencing an excessive amount of rerenders when trying to utilize the

When I call the contacts function from the main return, everything seems fine. However, I encounter an error at this point: const showContacts = React.useCallback( (data: UsersQueryHookResult) => { if (data) { return ( < ...

Encountering an error when using Jest and the envalid library to test a React application: process.exit invoked with code "1"

While testing my React/Typescript application with Jest, I encountered an error. I am utilizing the envalid library to manage my environment variables with types and autocompletion: const ENV = cleanEnv(process.env, { | ^ 6 | R ...

The state update is triggering a soft refresh of the page within Next.js

In my Next.js project, I have integrated a modal component using Radix UI that includes two-way bound inputs with state management. The issue arises when any state is updated, triggering a page-wide re-render and refreshing all states. Here is a snippet of ...

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

Learning to handle data fetching and looping in NextJs

I'm facing an issue with fetching data through a loop in getStaticProps. The array ends up empty due to asynchronous code. If I pass the ID array and implement the logic within the React component, it works fine. Should I continue using the component ...

Create a .d.ts file for a custom JavaScript file

I am working on an application written in JavaScript and considering incorporating TypeScript for a new feature. Currently, I have a base class defined in JavaScript as shown below: // base.js module.exports = function BaseClass () { // ... ... }; M ...

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

What are the steps for integrating Angularfire2 into an Angular application?

Trying to integrate Angularfire2 into a fresh Angular project, but encountered an issue while following the official documentation. This is the guide I followed Upon reaching step 7 - Inject AngularFirestore, console errors were displayed: If anyone has ...

What causes the variation in typing behavior between specifying props directly on a component versus nesting them inside another prop?

Understanding the next component might be a bit tricky, so let's delve into it (Check playground): type Props<T> = { initValue: T, process: (value: T) => T } export const Input = <T,>({ initValue, process, }: Props<T>): ...

angular directive to receive an object

When I have a table and click on a row, the information is supposed to be displayed in a different component using the @input decorator. However, instead of displaying the correct result in my other component, I am getting [object Object]. table.html < ...

Failure to Execute Angular HttpClient Request

I'm facing an issue with firing the HttpClient request. It seems like there might be a problem with importing or providing, but I can't pinpoint where it is exactly. The API works fine, but the call never goes through. Here are the environment/v ...

Upgrading from Sequelize V5 to V6: TypeScript bug - Property 'x' is not recognized in type 'y'

Updating from sequelize 5.x.x to 6.x.x has caused some issues for me. In version 5, everything was working fine but after the upgrade, I started facing TypeScript errors with properties generated via associations when trying to use objects from the include ...