Typescript - how to implement circular generic

Question

I have the following code:

interface BaseProps<TControl> {
  onEvent: (control: TControl) => void;
}

class BaseControl<TValue, BaseProps<any>> {
  onBlur = () => {
    onEvent(this); //subscriber must see the whole TS-class instead of BaseControl<TValue, BaseProps<any>>
  }
}

As you can see I can't define class kind of

class BaseControl<TValue, BaseProps<this>>> {}

or infinite

class BaseControl<TValue, BaseProps<BaseControl<TValue, BaseProps<...etc.>>>> {}

Is there any way to implement the similiar generic pointer kinda ? BaseProps<this>

I ran into the same. Did you find a good solution? – Merijn Schering Jul 11 '22 at 08:12 — Merijn Schering, Jul 11 '22 at 08:12

score 0 · Answer 1 · answered Apr 14 '20 at 09:43

In

class Foo<T> { }

T is a type variable. It can not be a type itself. Which means you can have the above, but you can't have this

interface Foo<T> { } // ok
class Bar<any> { } // error: type variable cannot be 'any'
class Baz<Foo<any> { } // error: type variable cannot be 'Foo<any>'

which is what you're trying to do.

However, you can reference the type of this inside of the class itself

class Foo<T> {
    foo: Foo<T>;
    constructor(foo: Foo<T>) {
        this.foo = foo;
    }
}

I can't help you further because your question is unclear, it looks like an XY problem, but basically you should use the above.

Typescript - how to implement circular generic

1 Answers1