Accepting generic component as an argument

[vstefanovic97]

I have ComponentA that accepts a component class as an argument item: typeof ComponentB | typeof ComponentC and then yields out the item with some prebound arguments potentially.

// ComponentA.hbs
{{yield (component @item argsA="prebound Arg")}}

Unfortunatelly I am not sure how to type this out or if this is even supported.
I tried a couple of things, but results in TS error

interface ComponentASignature<T extends typeof ComponentB | typeof ComponentC> {
Element: HTMLElement;
  Args: {
    item: T
  };
  Blocks: {
    default: [
      item: WithBoundArgs<T, 'argsA'>,
    ];
  };
}

// TS error
Type '"argA"' does not satisfy the constraint 'NamedArgNames<T>'.
  Type '"argA"' is not assignable to type 'NamedArgNames<T>

I would appreciate some help on this if there is a better way to do this, or is this a bug in glint?

[dfreeman]

Unfortunately this is something that there isn't quite a direct way to express to TypeScript. Taking a slightly simpler example:

declare const ComponentA: ComponentLike<{
  Args: {
    name: string;
    age: number;
  };
}>;

interface MyComponentSignature<T extends typeof ComponentA> {
  Args: { item: T };
  Blocks: {
    default: [item: WithBoundArgs<T, 'name'>];
  };
}

The issue you're running into is that ComponentA isn't the only possible thing T could be there. A component that only accepted a numeric @age arg, or that didn't require any arguments at all, would be equally valid.

Note that this isn't in any way specific to Glint, and is just a general property of how TypeScript's structural typing works:

// Given a function like this:
declare function runLater<T extends (args: { foo: string; bar: number }) => void>(callback: T): void;

// A callback that accepts every declared arg is valid to pass:
runLater(({ foo, bar }) => {
  console.log(foo, bar);
});

// But so is one that only uses a subset of them:
runLater(({ bar }) => {
  console.log(bar);
});

// Or even one that doesn't accept any args at all:
runLater(() => console.log('hi'));

Because of these kinds of ambiguities, TypeScript will frequently be unable to perform complex type operations on generic type parameters like WithBoundArgs<T, ...> here.

I imagine your real situation is a bit more complicated than the simplified version in your example, but it looks like you're passing item into your <ComponentA> just to have it pre-bind some args and then pass the component back out again. If that's the case, it might be simpler to have <ComponentA> yield whatever data it was going to pre-bind instead of needing to have any knowledge of the component that's receiving that information:

{{! i.e. instead of this: }}
<ComponentA @item={{component 'component-c'}} as |Item|>
  <Item />
</ComponentA>

{{! do this: }}
<ComponentA as |argsA|>
  <ComponentC @argsA={{argsA}} />
</ComponentA>

If that's not viable, you may just need to fall back to // @ts-expect-error and/or {{! @glint-expect-error }}

[vstefanovic97]

Oh I see, thank you for the detailed explanation @dfreeman, really appreciate that fast reply and the effort you put into the explanation.
I was planning to do a workaround like you suggested but before that I just wanted to check if there was some more elegant way or if I was missing something, thanks!