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

Encountering issues with Typescript when providing parameters for res.status().json()

Using function overloading in TypeScript causes an error

When clicking initially, the default input value in an Angular 2 form does not get set

Transform the date format from Google Forms to TypeScript

Issue with rendering React Toastify

How can I display 4 react components, such as custom buttons, in a manner that ensures the most recently pressed button appears on top?

Is there a specific type of function missing in Typescript?

Tips for creating a dynamic interface in TypeScript to eliminate repetitive code

What is the best way to execute 2 statements concurrently in Angular 7?

Comparison between a Typescript optional field and a field that has the potential to be undefined

Why does TypeScript not recognize deconstructed arrays as potentially undefined variables?

Tips for creating type-safe assertion functions in TypeScript

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

Troubleshooting: Difficulty with Angular 2 TypeScript interface array functionality

Encountering a duplication issue when redirecting components in Angular2/TypeScript using navigateByUrl

What could be the reason for the Angular dropdown values not appearing?

Encountering a problem with the 'string' parameter when using TypeScript

The argument provided is a string type, which cannot be assigned to a parameter expecting an object with a 'results' property of type string

Creating numerous bar graphs for each specific date

The type 'EventTarget & HTMLTextAreaElement' does not contain the property 'files'