Implementing subclass properties in TypeScript that override parent class properties

Question

Implementing subclass properties in TypeScript that override parent class properties

I have a base class called Parent from a library with certain properties, and a derived class Child which inherits the same properties but with different data types.

class Parent {
  propertyA: string;

  propertyB: string;
  
  propertyC: string;

  constructor() {
    this.propertyC = '';
  }
}

class Child extends Parent {
  propertyA: number;

  propertyB: number;
}

I'm attempting to change the data type of multiple properties in the parent class, but I am encountering an error ts(2416).

Type 'number' is not assignable to type 'string'.

I considered converting the Parent class into an interface and utilizing Omit<> to exclude propertyA and propertyB, however, since the class is located in a library, that approach is not feasible.

Due to the fact that the Child class will be utilized to represent existing data (such as a table with the three properties) as a generic type for functions within the firebase library (specifically the

FirebaseFirestore.CollectionReference<T>

type), I cannot use composition (PropertyParent: Parent as a Child property) or rename the properties.

Are there alternative methods to achieve this?

typescript

Answer 1

Answer №1

class Parent {
  propertyA: string | number;

  propertyB: string | number;
  
  propertyC: string;

  constructor() {
    this.propertyC = '';
  }
}

class Child extends Parent {
  propertyA: number;

  propertyB: number;
}

This implementation is effective because it highlights a key aspect of the Liskov substitution principle, which is discussed in depth by @T. J. Crowder with references to criticisms of that principle. One noteworthy point raised is that the principle may not fully address scenarios involving abstract or generic parent types.

In practical terms, developers can navigate to the library's source code and handle such situations by utilizing TypeScript's as keyword for casting inherited types as needed, including converting them to string if required.

Answer 2

class Parent {
  propertyA: string | number;

  propertyB: string | number;
  
  propertyC: string;

  constructor() {
    this.propertyC = '';
  }
}

class Child extends Parent {
  propertyA: number;

  propertyB: number;
}

This implementation is effective because it highlights a key aspect of the Liskov substitution principle, which is discussed in depth by @T. J. Crowder with references to criticisms of that principle. One noteworthy point raised is that the principle may not fully address scenarios involving abstract or generic parent types.

In practical terms, developers can navigate to the library's source code and handle such situations by utilizing TypeScript's as keyword for casting inherited types as needed, including converting them to string if required.

Answer 3

Answer №2

When Parent's propertyA is a string, it follows that Child's propertyA must also be a string in accordance with the Liskov substitution principle. A Child should essentially "be" a Parent, meaning any code referencing a Child object as a Parent object should work seamlessly, expecting a string, not a number.

If this isn't the scenario in your situation, inheritance may not be the best solution. Consider using composition instead: assigning a field of type Parent to the Child.

Alternatively, allow Child to keep propertyA untouched and introduce a separate property for the number value.

Answer 4

When Parent's propertyA is a string, it follows that Child's propertyA must also be a string in accordance with the Liskov substitution principle. A Child should essentially "be" a Parent, meaning any code referencing a Child object as a Parent object should work seamlessly, expecting a string, not a number.

If this isn't the scenario in your situation, inheritance may not be the best solution. Consider using composition instead: assigning a field of type Parent to the Child.

Alternatively, allow Child to keep propertyA untouched and introduce a separate property for the number value.

Implementing subclass properties in TypeScript that override parent class properties

Answer №1

Answer №2

Similar questions

A TypeScript interface creating a type with optional keys of various types while enforcing strict null checks

Access the child component within an @ChildComponent directive in Angular

Trouble with Nested Routing in React Router Version 6: Route not Rendering

Compilation errors plague TSC on varying systems

I am perplexed by the CommonJS pattern, TypeScript modules, and how to effectively utilize ES6

A guide to resolving the Angular 11 error of exceeding the maximum call stack size

Using Angular's Hostbinding feature to toggle a button and change the background color of the

Issue with readonly is preventing the ability to alter the font color of the input

Error429 was received from a GET request made to the Imgur API

Omit select dormant modules when building (Angular5)

Utilize a variable from one Angular component in another by sharing it between .ts files

Dynamic Rendering and Retrieving Component HTML in Angular

Removing Multiple Object Properties in React: A Step-by-Step Guide

Tips and tricks for setting up a functional react select component using Material UI

Encountering a Typescript issue with the updated Apollo server version within a NestJS application

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

What steps can be taken to resolve the Angular error stating that the property 'bankCode' is not found on type 'User' while attempting to bind it to ng model?

Compiling TypeScript: Using the `as` operator to convert and then destructure an array results in a compilation error, requiring an

Next.js: Importing from a new endpoint triggers the code execution once more

Using a BehaviorSubject in conjunction with ngIf can rearrange the placement of elements