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> {
}

I made a little example with constrains on type, hopefully it can help you: tsplay.dev/wggK1w — coglialoro
– coglialoro, Commented Apr 21, 2022 at 9:38
i was trying to make a more complete example, the main point is that you can specify the type when you extends BaseComponent like extends BaseComponent<B> — coglialoro
– coglialoro, Commented Apr 21, 2022 at 9:48
You can't automatically pass generics down; you need to do it explicitly, maybe like this. Does that address your question? If so I could maybe write up an answer; if not, what am I missing? — jcalz
– jcalz, Commented Apr 21, 2022 at 14:06
@jcalz maybe it can't be done without updating one or other of the abstract classes - but I updated my question to make it clearer what I am after — Drenai
– Drenai, Commented Apr 21, 2022 at 14:38
Sorry but I'm understanding this question even less now; what is TestData; where is that defined? — jcalz
– jcalz, Commented Apr 21, 2022 at 17:29

coglialoro · Accepted Answer · 2022-04-21 14:55:03Z

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

Collectives™ on Stack Overflow

Typescript Passing Type to Generic Sub Class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related