Typescript Passing Type to Generic Sub Class

Question

I'm working with a class that inherits from two levels of abstract class. I'm wondering is it possible to pass generics from Test class to BaseComponent as it stands, or would the BaseRendererComponent need to be changed?

For example, if I wanted the Test class to pass down a TestData type to be used for BaseComponent.baseData type A

export abstract class BaseComponent<A = DataType> {
  public baseData: A;
}

export abstract class BaseRenderComponnet<B> extends BaseComponent {
  public renderData: B;
}

export class Test extends BaseRenderComponent<BranchData> {
}

Answer 1

You want to specify the type of your BaseComponent when you extend it for your BaseRenderComponent, like this:

abstract class BaseComponent<A = DataType> {
  public abstract baseData: A;
}

abstract class BaseRenderComponent<B> extends BaseComponent<TestData> {
  public abstract renderData: B;
}

class Test extends BaseRenderComponent<BranchData> {
    baseData: TestData;
    renderData: BranchData;

    constructor(baseData: TestData, renderData: BranchData) {
        super();
        this.baseData = baseData;
        this.renderData = renderData;
    }
}

Demo here: https://tsplay.dev/wQVbvN

If you instead want to specify the type for both base and render component from your test, you could do it like this:

abstract class BaseComponent<A = DataType> {
  public abstract baseData: A;
}

abstract class BaseRenderComponent<A, B> extends BaseComponent<A> {
  public abstract renderData: B;
}

class Test extends BaseRenderComponent<TestData, BranchData> {
    baseData: TestData;
    renderData: BranchData;

    constructor(baseData: TestData, renderData: BranchData) {
        super();
        this.baseData = baseData;
        this.renderData = renderData;
    }
}

Demo here: https://tsplay.dev/N5eVMN