Glimmer Component args & Typescript

@francesconovy wrote:

I’ve been porting an addon to use Typescript, and ran into an issue I haven’t found a solution for - maybe somebody here can help me out.

How do I specify typings for this.args in a @glimmer/component?

I started from this baseline (slightly simplified, but it shows the issue):

import Component from '@glimmer/component';
import { assert } from '@ember/debug';

export default class TextInput extends Component {
  constructor() {
    super(...arguments);

    assert(`onChange must be set`, typeof this.args.onChange === 'function');
  }
}

Which gives the error Property "onChange" does not exist on type "Object".

Next I tried this:

export default class TextInput extends Component {
  args: {
    onChange: Function
  };

  constructor() {
    super(...arguments);

    assert(`onChange must be set`, typeof this.args.onChange === 'function');
  }
}

Which fixed the Typescript Error, but lead to args always being undefined when running the app.

Finally I tried this:

interface ArgsInterface {
  args: {
    onChange: Function;
  };
}

export default class TextInput extends Component implements ArgsInterface {
  constructor() {
    super(...arguments);

    assert(`onChange must be set`, typeof this.args.onChange === 'function');
  }
}

Which results in a TS error Component TextInput incorrectly impelements ArgsInterface. Types of property args are incompatible..

Has anybody managed to get this to work properly?

Posts: 4

Participants: 2

Read full topic