Base class protected properties are absent following the exclusion of another property

In my implementation, I have a generic base service that handles CRUD operations while the subclasses specify a specific entity and its endpoint URL. The base class sets a protected API URL property that each subclass initializes in the constructor.

Recently, I encountered a scenario where I needed to modify the signature of one operation for a particular entity by adding parameters to get.

To address this issue, I followed the guidance provided in this article. This approach worked, although it caused the protected API URL property to no longer exist, which has me puzzled.

To demonstrate this problem, I prepared a simplified example, which you can view interface Type1 { name: string; } interface Type2 { price: number; } class Service1 {} class BaseClass<T> { protected prop1: string = 'BaseClass'; constructor(protected dep1: Service1) {} foo(){ console.log(`${this.prop1}.foo`); } bar(){ console.log(`${this.prop1}.bar`); } } class SubClass1 extends BaseClass<Type1> { constructor(protected dep1: Service1) { super(dep1); this.prop1 = 'SubClass1'; } } type BaseClassWithoutBar = new <T>(dep1: Service1) => { [P in Exclude<keyof BaseClass<T>, 'bar'>]: BaseClass<T>[P]; }; const BaseClassWithoutBar: BaseClassWithoutBar = BaseClass; class SubClass2 extends BaseClassWithoutBar<Type2> { constructor(protected dep1: Service1) { super(dep1); this.prop1 = 'SubClass2'; // <- Error here } bar(name: string) { console.log(`${this.prop1}.bar -> ${name}`); // <- Error here } } const sub1: SubClass1 = new SubClass1(new Service1()); const sub2: SubClass2 = new SubClass2(new Service1()); sub1.foo(); sub1.bar(); sub2.foo(); sub2.bar('Bob');

To work around this issue, I could make the property public or create a new method with a different name. However, I am keen on understanding the underlying cause behind this behavior.

Base class protected properties are absent following the exclusion of another property

Answer №1

Similar questions

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

A guide on connecting multiple select components to a unified Angular 6+ reactive form without triggering redundant updates

Transformer Class: An object containing properties that are instances of another class

NGRX 8 reducer now outputting an Object rather than an Array

Programmatically toggle the visibility of an ion fab button

The Power of Angular 2's Reactive Form Validation

Utilizing the useState hook with generics in React for efficient data management

Prevent TypeScript from generalizing string literals as types

Exploring JSONPath in Cypress

Dealing with Angular can be frustrating at times, especially when you encounter errors like "TypeError: Cannot

Webpack is throwing an error due to the Vue component type being labeled as "any"

How can you define a type in Typescript that encompasses all types that are derived from a shared type?

The Vuex MutationAction decorator cannot be assigned to a TypedPropertyDescriptor

Module import in Ionic

the process of triggering animation to start automatically when a button is clicked in Web Development

The use of React hooks in an application saga led to an issue where, despite using history.push, the component

Updating button color dynamically using Angular 2

Tips for obtaining the iframe #document with cheeriojs?

A custom function that changes the state of a nested object using a specified variable as the key argument

The button is obscured by the dropdown menu