Component arguments and Typescript - what's the right approach?

I’m at the start of my journey with Ember and Typescript and running into an error when specifying argument types in a component constructor. According to what I’ve read in the ember-cli-typescript docs I should be able to do something like this:

import Component from '@glimmer/component';
​
export interface MyComponentSignature<T> {
  Args: {
    items: T[];
  };
}
​
export default class MyComponent<T> extends Component< MyComponentSignature <T>> {
  constructor(owner: unknown, args: {}) {
    super(owner, args);
​    ...
  }
}

The current ember-cli-typescript docs state:

The args are {} because a Glimmer component always receives an object containing its arguments, even if the caller didn’t pass anything: then it would just be an empty object.

However, when args are {} I get this error:

Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `Record<string, unknown>` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.
- If you want a type meaning "empty object", you probably want `Record<string, never>` instead.eslint@typescript-eslint/ban-types

Updating so that args are MyComponentSignature<T>['Args']) resolves the error but I can’t find any documentation that would suggest this is necessary. Is it?

6 posts - 3 participants

Read full topic