Extending a class with diverse types in Typescript: A guide

Question

Extending a class with diverse types in Typescript: A guide

I have a class with multiple methods that deal with an entity referred to as "entity."

class entity {
  entityName: string = '';

  getList(): any[] {
    someAPI + this.entityName ....
  }

  getOne(): any{
  }
}

Additionally, there are specific entities that extend from the base class:

class person extends entity {
entityName: string = 'person';
}

class order extends entity {
entityName: string = 'order';
}

I would like to specify the entity type for each new class. Instead of inheriting the generic method getList(): any[] {}, I want to customize it for each subclass. For example, in the person class:

getList(): IPerson[] {
}

And for the order class:

getList(): IOrder[] {
}

Is there a way to set an interface type in each inherited class similar to how I am setting the entityName?

typescript

Answer 1

Answer №1

Discover Generic classes here.

Implement a generic type on your entity class (can be abstract) and specify it when extending (extends Entity<IOrder>).

Sample code:

/* === Entity === */
interface EntityOptions {
    name: string;
    anotherOption?: any;
    anotherOptionWhyNot?: any;
}
abstract class Entity<T> {
    protected readonly entityOptions: EntityOptions;

    public constructor(entityOptions: EntityOptions) {
        this.entityOptions = entityOptions;
    }

    public getOne(): T {
        // Call to API ...
        console.info(`Calling API (one) ${this.entityOptions.name} ...`);

        // DO NOT COPY THIS!
        return {} as T;
    }

    public getList(): T[] {
        // Call to API ...
        console.info(`Calling API (list) ${this.entityOptions.name} ...`);

        // DO NOT COPY THIS!
        return [] as T[];
    }
}

/* === Person === */
interface IPerson {
    id: number;
    name: string;
}
class Person extends Entity<IPerson> {
    public constructor() {
        super({ name: 'person' });
    }
}

/* === Order === */
interface IOrder {
    id: number;
    date: Date;
}
class Order extends Entity<IOrder> {
    public constructor() {
        super({ name: 'order' });
    }
}

/* ---------------- */
// ERROR: Cannot create an instance of an abstract class.(2511)
// const entity = new Entity({ name: 'ItDoesNotWork' });

// Person
const person = new Person();
console.log(person.getOne());
console.log(person.getList());

// Order
const order = new Order();
console.log(order.getOne());
console.log(order.getList());

PS: This is also available on the Typescript Playground here.

Answer 2

Discover Generic classes here.

Implement a generic type on your entity class (can be abstract) and specify it when extending (extends Entity<IOrder>).

Sample code:

/* === Entity === */
interface EntityOptions {
    name: string;
    anotherOption?: any;
    anotherOptionWhyNot?: any;
}
abstract class Entity<T> {
    protected readonly entityOptions: EntityOptions;

    public constructor(entityOptions: EntityOptions) {
        this.entityOptions = entityOptions;
    }

    public getOne(): T {
        // Call to API ...
        console.info(`Calling API (one) ${this.entityOptions.name} ...`);

        // DO NOT COPY THIS!
        return {} as T;
    }

    public getList(): T[] {
        // Call to API ...
        console.info(`Calling API (list) ${this.entityOptions.name} ...`);

        // DO NOT COPY THIS!
        return [] as T[];
    }
}

/* === Person === */
interface IPerson {
    id: number;
    name: string;
}
class Person extends Entity<IPerson> {
    public constructor() {
        super({ name: 'person' });
    }
}

/* === Order === */
interface IOrder {
    id: number;
    date: Date;
}
class Order extends Entity<IOrder> {
    public constructor() {
        super({ name: 'order' });
    }
}

/* ---------------- */
// ERROR: Cannot create an instance of an abstract class.(2511)
// const entity = new Entity({ name: 'ItDoesNotWork' });

// Person
const person = new Person();
console.log(person.getOne());
console.log(person.getList());

// Order
const order = new Order();
console.log(order.getOne());
console.log(order.getList());

PS: This is also available on the Typescript Playground here.

Answer 3

Answer №2

An easy and straightforward method for returning self in extended classes looks like this

class Entity {
  entityName: string = '';

  getList(): this[] {
    return [];
  }

  getOne(): this {
    return this;
  }
}

class Person extends Entity {}

new Person().getOne(); // returns 'this'
new Person().getList(); // returns 'Person[]'

If this approach isn't sufficient, you may need to utilize generics or "reimplement" the necessary functions.

getOne(): anyTypeYouWant {
  super().getOne()
}

Answer 4

An easy and straightforward method for returning self in extended classes looks like this

class Entity {
  entityName: string = '';

  getList(): this[] {
    return [];
  }

  getOne(): this {
    return this;
  }
}

class Person extends Entity {}

new Person().getOne(); // returns 'this'
new Person().getList(); // returns 'Person[]'

If this approach isn't sufficient, you may need to utilize generics or "reimplement" the necessary functions.

getOne(): anyTypeYouWant {
  super().getOne()
}

Extending a class with diverse types in Typescript: A guide

Answer №1

Answer №2

Similar questions

The data remains undefined even after being initialized in the constructor

I find that the value is consistently undefined whenever I attempt to set it within a promise in Angular

Having trouble retrieving values from Promise.allSettled on Node.js 12 using TypeScript version 3.8.3

Modify the value of mat-slide-toggle from TypeScript code

The function within filereader.onload is not running properly in JavaScript

How to retrieve the value of a variable accessible to all users in Angular?

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

Custom Typescript type that runs concurrently with the base type is disregarded

Issues with implementing AddEventListener in InAppBrowser on IONIC 2

Exploring the process of extending Shoelace web components with Typescript using Lit

Having trouble accessing @ViewChildren from the parent component

What are the best practices for handling dynamic content internationalization in Angular?

What is the best way to initiate the registration page through the @auth0/auth0-react library?

Tips for utilizing innerHTML in TypeScript code within an Angular 2 application

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

Specify the return type based on specific parameter value

What is the proper way to implement jest.mock in a describe or it block?

Dropdown box not displaying any choices

The 'filter' attribute is not found in the 'ContextProps' type

Transferring data to a different module