component helper doesn't prohibit passing unknown args

[boris-petrov]

foo-components.ts:

import templateOnlyComponent from '@glint/environment-ember-loose/ember-component/template-only';

interface IFoo {
  readonly Args: {
    readonly name: string;
    readonly model: number;
  };
}

const Foo = templateOnlyComponent<IFoo>();

export default Foo;

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry {
    'foo-component': typeof Foo;
  }
}

qux.ts:

import Component from '@glint/environment-ember-loose/glimmer-component';

export interface IQux {
  readonly Args: {
    readonly [key: string]: any;
  };
}

export default class Qux extends Component<IQux> {
}

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry {
    Qux: typeof Qux;
  }
}

bar.hbs:

<Qux @foo={{component "foo-component" name1="asd" model="asd"}} />
<Qux @foo={{component "foo-component" name="asd" model1="asd"}} />
<Qux @foo={{component "foo-component" name1="asd" model1="asd"}} />

Only the first and the third lines give an error. The second one also should but doesn't.

[dfreeman]

Unfortunately this is something we don't have a great deal of control over. The specific feature of the type system at play here is something called excess property checking, which only kicks in in very specific scenarios.

For normal component/helper/modifier invocations, because you have to provide all required arguments at once, we're able to frame that invocation in a way that triggers TypeScript to apply EPC and warn you when you specify an unknown arg.

Because of the way {{component}} is happy to have missing arguments and let you fill the rest in later, though, we can't get EPC for that scenario. In your examples above:

• The first line is a type error because model should be a number
• The third line is a type error because the args you pass have no properties in common with the expected type, so TS flags it as a mismatch regardless of EPC
• The second line is accepted because { name: 'asd', model1: 'ast' } is a valid Partial<{ name: string; model: number }>, even if we can tell that model1 is likely a human error. Note in this case that the resulting bound component type knows that it's still missing a @model arg of type number and won't let you invoke it without providing that.

[boris-petrov]

Is this the same as what microsoft/TypeScript#40311 is trying to fix?

[dfreeman]

That looks like something different.

The trouble we have here with {{component}} is that we need to capture which args are actually given (so we can know which will still be required later), but the exact thing that allows us to do that—capturing the exact subtype of Partial<Args> with a type parameter—is also what (pretty reasonably) disables EPC for the argument with that type.