The parameters of a generic class in Typescript are customizable and

Question

The parameters of a generic class in Typescript are customizable and

Currently working on programming an internal abstract class for a project, and I need it to be generic in order to make it extendable.

The goal is to have my class named as if it were extending the T template, like Sample extends T, so that all parameters of T are included. For example, if T is Vue, then all Vue parameters such as $el or $options should be accessible without needing to re-declare or include Vue again.

Here's what I currently have:

export namespace SDK {

  export abstract class Sample<T> {

    private static methods: any = {
      hello: Sample.prototype.hello
    }

    abstract callMe(): void;

    x: number = 0;
    y: number = 0;
    width: number = 1;
    height: number = 1;

    hello(): void {
      console.log('Sample hello world');
      this.callMe();
    }
  }
}

However, I'm unsure how to go about including the properties of T into Sample.

I would like it to look something like this:

export namespace SDK {

  export abstract class Sample<T> {

    private static methods: any = {
      hello: Sample.prototype.hello
    }

    abstract callMe() : void;

    x: number = 0;
    y: number = 0;
    width: number = 1;
    height: number = 1;

    // T properties (example with Vue)
    $el: HTMLElement
    ...

    hello () : void {
      console.log('Sample hello world')
      this.callMe()
    }
  }
}

The desired way to use my class would be like this:

export default class MyComponent extends SDK.Sample<Vue> {
  name: string = 'my-component';

  callMe (): void {
    console.log('called')
  }

  mounted (): void {
    this.hello()
  }
}

I haven't been able to find any information on how to properly extend from a templated class with parameters included in it.

typescript vue.js

Answer 1

Answer №1

Utilizing mixins, @TitianCernicovaDragomir appears to have the right approach. I have my own code that I will share for thoroughness, as our methods differ slightly with their own set of advantages and disadvantages.

The code below enforces implementation of abstract methods and grants access to static members. However, this comes at the cost of using private unexported names, which restricts the ability to use this as a library for others. While there may be workarounds, delving too deep into them might not be ideal.

Here is the Sample code snippet:

export namespace SDK {

  export type Constructor<T> = {
    new(...args: any[]): T;
    readonly prototype: T;
  }

  export function Sample<C extends Constructor<{}>>(ctor: C) {
    abstract class Sample extends ctor {
      private static methods: any = {
        hello: Sample.prototype.hello
      }
      abstract callMe(): void;
      x: number = 0
      y: number = 0
      width: number = 1
      height: number = 1

      hello(): void {
        console.log('Sample hello world')
        this.callMe()
      }

    }
    return Sample;
  }

}

Here's how it can be used:

export default class MyComponent extends SDK.Sample(Vue) {
  name: string = 'my-component';

  callMe () : void {
    console.log('called')
  }

  mounted () : void {
    this.hello()
  }
}

Best of luck!

Answer 2

Utilizing mixins, @TitianCernicovaDragomir appears to have the right approach. I have my own code that I will share for thoroughness, as our methods differ slightly with their own set of advantages and disadvantages.

The code below enforces implementation of abstract methods and grants access to static members. However, this comes at the cost of using private unexported names, which restricts the ability to use this as a library for others. While there may be workarounds, delving too deep into them might not be ideal.

Here is the Sample code snippet:

export namespace SDK {

  export type Constructor<T> = {
    new(...args: any[]): T;
    readonly prototype: T;
  }

  export function Sample<C extends Constructor<{}>>(ctor: C) {
    abstract class Sample extends ctor {
      private static methods: any = {
        hello: Sample.prototype.hello
      }
      abstract callMe(): void;
      x: number = 0
      y: number = 0
      width: number = 1
      height: number = 1

      hello(): void {
        console.log('Sample hello world')
        this.callMe()
      }

    }
    return Sample;
  }

}

Here's how it can be used:

export default class MyComponent extends SDK.Sample(Vue) {
  name: string = 'my-component';

  callMe () : void {
    console.log('called')
  }

  mounted () : void {
    this.hello()
  }
}

Best of luck!

Answer 3

Answer №2

In Typescript (as well as in C# and Java), extending a generic parameter directly is not allowed. However, there is a workaround using the concept of mixins.

Here's a solution based on your requirements. Although I haven't tested it with Vue specifically, the methods and properties should be properly inherited from both classes, making it compatible with Vue (feel free to notify me if you encounter any issues).

Two limitations were identified:

You won't receive compiler warnings for failing to implement abstract methods
You cannot access static methods through the derived class

The following function enables this functionality:

function extendSample<T, R extends { new(): T & Sample }>(componentCtor: new () => T): R {
    // Create a new derived class from the component class
    class DerivedComponent extends (<new () => any>componentCtor) {
        constructor() {
            // Call the component constructor
            super();
            // Call the sample class constructor
            Sample.apply(this)
        }
    }
    // Copy instance methods to DerivedComponent
    Object.getOwnPropertyNames(Sample.prototype).forEach(name => {
        DerivedComponent.prototype[name] = Sample.prototype[name];
    });
    return <R><any>DerivedComponent;
}

Example code snippet:

export abstract class Sample {
    abstract callMe(): void;
    x: number = 0
    y: number = 0
    width: number = 1
    height: number = 1

    hello(): void {
        console.log('Sample says hello')
        this.callMe()
    }   
}

export class LibaryComponentBase {
    constructor() {
        this.$el = "HTML "
    }
    $el: string;
    public libraryMethod() {
        console.log("libraryMethod");
    }
    static Test() {

    }
}

export default class MyComponent extends extendSample(LibaryComponentBase) {
    name: string = 'my-component';
    constructor() {
        super();
        console.log(this.$el);
        this.libraryMethod();
        this.hello();
    }

    callMe(): void {
        console.log('callMe method called')
    }

    mounted(): void {
        this.hello();
    }
}

let my = new MyComponent();
my.callMe();

Answer 4

In Typescript (as well as in C# and Java), extending a generic parameter directly is not allowed. However, there is a workaround using the concept of mixins.

Here's a solution based on your requirements. Although I haven't tested it with Vue specifically, the methods and properties should be properly inherited from both classes, making it compatible with Vue (feel free to notify me if you encounter any issues).

Two limitations were identified:

You won't receive compiler warnings for failing to implement abstract methods
You cannot access static methods through the derived class

The following function enables this functionality:

function extendSample<T, R extends { new(): T & Sample }>(componentCtor: new () => T): R {
    // Create a new derived class from the component class
    class DerivedComponent extends (<new () => any>componentCtor) {
        constructor() {
            // Call the component constructor
            super();
            // Call the sample class constructor
            Sample.apply(this)
        }
    }
    // Copy instance methods to DerivedComponent
    Object.getOwnPropertyNames(Sample.prototype).forEach(name => {
        DerivedComponent.prototype[name] = Sample.prototype[name];
    });
    return <R><any>DerivedComponent;
}

Example code snippet:

export abstract class Sample {
    abstract callMe(): void;
    x: number = 0
    y: number = 0
    width: number = 1
    height: number = 1

    hello(): void {
        console.log('Sample says hello')
        this.callMe()
    }   
}

export class LibaryComponentBase {
    constructor() {
        this.$el = "HTML "
    }
    $el: string;
    public libraryMethod() {
        console.log("libraryMethod");
    }
    static Test() {

    }
}

export default class MyComponent extends extendSample(LibaryComponentBase) {
    name: string = 'my-component';
    constructor() {
        super();
        console.log(this.$el);
        this.libraryMethod();
        this.hello();
    }

    callMe(): void {
        console.log('callMe method called')
    }

    mounted(): void {
        this.hello();
    }
}

let my = new MyComponent();
my.callMe();

The parameters of a generic class in Typescript are customizable and

Answer №1

Answer №2

Similar questions

Exploring data retrieval from nested arrays of objects in TypeScript/Angular

Unable to bring in Vue component from NPM module

What is the best way to create an interface with multiple property types in TypeScript?

What is the best way to combine a Signal containing an array of Signals in Angular using the merge(/mergeAll) operator?

implementing firestore onsnapshotListner feature with pagination

Tips and tricks for personalizing an npm package in vue.js

Using TypeScript generics to add constraints to function parameters within an object

Converting enum flags to strings

Create an interface that inherits from a class

Error message: 'React TypeScript: (props: OwnProps) => Element' cannot be assigned to type 'FunctionComponent<{}>'

Angular - tracking the window scroll event to target a specific scrollbar on a page with multiple scrollbars

Utilizing RxJS finalize in Angular to control the frequency of user clicks

Unit test failing due to Vue v-model binding not functioning as expected

Quasar Table fails to update (version 1)

Automatic type inference for TypeScript getters

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3

Sending parameters to a function within the ngAfterViewInit() lifecycle method in Angular version 6

Developing a Javascript object using Typescript

How can jsPDF be used with Angular2 in Typescript?

Angular's Spanning Powers