Tips for avoiding derived class properties from overshadowing base class properties

Upon examining the following typescript code, my expectation was that it would lead to a compile error. The reason being, the property in the derived class shares the same name as the property in the base class but with a different type. Surprisingly, this code compiles without any issues and results in Derived.property overshadowing Base.property, ultimately causing hidden bugs. Is there a way to prevent such occurrences through either the compiler or a linter?

class Base {
  protected property: {};
  constructor(property: {}) {
    this.property = property;
  }
}

class Derived extends Base {
  property = 1;
}

Answer №1

When you assign an empty object ={}, it is expected behavior to encounter issues when extending it to various types like numbers and strings.

To resolve this, you should specify the type of the object you are assigning.

type Options = {
  option1?: boolean
}
class Base {
  protected property: Options;
  constructor(property: {}) {
    this.property = property;
  }
}

class Derived extends Base {
  property = 1; // This will not work due to type mismatch (2416)

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

Do TypeScript project references provide value when noEmit is used?

To enhance the speed of my editor interaction and reduce the time taken by tsc to run on my TypeScript code, I am considering implementing project references. Many teams have reported substantial performance improvements after incorporating project referen ...

How to reference the "this" property in TypeScript when using the <svelte:component> tag

In my Svelte project, I am working on a portal system where a component is passed using a store to display at a higher level in the component tree. My current struggle lies in typing the store correctly. I attempted to declare it like this: const modalCom ...

Ways to retrieve a variable from a separate TypeScript document

A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...

The specified function for handling NetworkError is currently unavailable

I'm trying to implement a retry mechanism for URL calls in case of network failure using the 'cockatiel' library. Below is the code snippet I have written: import { retry, handleType, ExponentialBackoff} from 'cockatiel'; const ...

What is the best way to add additional Typescript declarations to my NPM package before publishing it?

I am in the process of developing a Typescript package to be released on NPM. Along with the main declaration file produced by the Typescript compiler, I also want to include some custom declarations. However, when this package is installed as a dependency ...

Update the router URL without switching pages, yet still record it in the browser history

One of the features on my search page allows users to perform searches and view results. Initially, I faced a challenge in updating the router URL without navigating, but I managed to overcome this by utilizing the "Location" feature. In my ngOnInit meth ...

Unveiling individual modules of an Angular library using public-api.ts in the latest version of Angular (Angular 13)

After completing an upgrade on my Angular library project from version 11 to 13, I encountered an issue when attempting to execute the ng build command. In version 11, the setup looked like this: I had multiple smaller modules, each containing various co ...

How to pass context to a React Thunk?

I seem to be a bit confused about how I should be utilizing thunk in my code. Initially, I thought I could use it to dispatch async actions like the example below: app/index.ts import { applyMiddleware, createStore } from "redux"; import thunk from "redu ...

Test your unit by providing feedback to the personalized modal pop-up

Currently, I am working on a unit test within Angular where I need to evaluate the functionality of the save button. My goal is to have the 'save' option automatically selected when the user clicks on the button, and then proceed to execute the s ...

What is the most effective method to clean an object in JavaScript while maintaining security?

To circumvent the JavaScript delete operator (source: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/delete), I have opted to utilize object destructuring to eliminate private properties: //sample helper-function in ts const sani ...

Simple method to determine if a variable belongs to an enumeration

Among the numerous discussions on this topic, none seem to focus on developing a versatile function. This function should take an enum and a variable as input, check if the variable is part of that enum, and update the variable type if it is. I have made ...

Ionic is throwing a reference error stating that __importDefault is not defined

My project is encountering the following error when I try to run it: Uncaught ReferenceError: __importDefault is not defined at Module../src/app/app.component.ts (app.component.ts:9) at __webpack_require__ (bootstrap:84) at Module../src/app/app.module.ts ...

Infinite Loop Issue in Angular2 RC5 when using the templateUrl

Encountering an issue with Angular2 RC5 that seems to be causing an infinite loop problem. The app.component, which is bootstrapped by the app.module, appears quite simple: @Component({ selector: 'my-app', template: `TEST` }) export cl ...

Best practices for extending the Array<T> in typescript

In a discussion on extending the Static String Class in Typescript, I came across an example showing how we can extend existing base classes in typescript by adding new methods. interface StringConstructor { isNullOrEmpty(str:string):boolean; } String. ...

Utilizing Ionic to implement a conditional statement for comparing a string with information retrieved from an Observable source

I have a piece of code where I fetch data about a country as an observable. I then attempt to compare my string this.city with the this.capital that I got from the Observable. If they are not the same, I want to show a new paragraph in the HTML by changi ...

Generate a JSON object from a given JSON template

Hello, I am currently working on creating a JSON instance from a given JSON schema. I would greatly appreciate a Typescript solution, but I am open to any other suggestions as well. Below is a sample of the schema file: sample-schema.json. My goal is to ...

Error thrown by webpack: Module 'pug' not found when attempting to access get-api

After setting up webpack in express, a new folder was created. When I try to run bundle.js, it shows the message "server is running on port 3000". However, when I access the API at http://localhost:3000/api/test, the whole bundle.js loads in the console an ...

Expanding a container component with React TypeScript

I'm in the process of developing a foundational class, encapsulating it within a container, and extending it in my various components. Here's a basic example: let state = new State(); class Base extends React.Component<{}, {}> { } const ...

Is it feasible to utilize the redirectTo function alongside the children parameter?

It's important to note that in the latest version of @angular/router 3.0.0-rc.1, you are unable to use the redirectTo parameter if you are also utilizing the children parameter. In some scenarios, such as my own, there may be a need for this function ...

If the Angular Interpolation Binding format is other than "yyyy-MM-dd", the date will not be displayed

I am facing an issue with my interpolation binding when the date format is not 'yyyy-MM-dd' .html: <div class="form-group"> <label>DOB <input type="date" class="form-control" id="birth_date" value={{stu.result.birth_date}}& ...