TypeScript definition render() problem

https://github.com/developit/preact/blob/0dea3b77ee0677987815347c1e6bd23821728aa2/src/preact.d.ts#L66

So, this definition doesn’t seem to work. I have to do something like this to make it work:

interface Props {
  item: any;
}

class Item extends Component<Props, any> {
  render({ item }: Props) {
    return <div class="item">
      {item.title}
    </div>;
  }
}

[leebenson]

Yeah, this is a Typescript issue. Consider this minimal example in the TS playground:

In the above, this.props is correctly inferred to be of type Person.

Yet, the argument passed into the function - despite being part of the overridden function signature (TS will balk if you pass into a non-Person instance) - is incorrectly inferred as any:

Preact is doing the right thing in its type definitions; if/when TS fix it, it should just work.

Until then, your options are:

1. Explicitly define the type in the render() args list, or…
2. Use this.props.

FWIW, I do the latter. It means I define the types in one place and screw up less often, whilst also cleaning up the render() call (I never understood the point of explicitly passing in props, when they’re already set on this.props anyway.)

[mindplay-dk]

Yeah, then you need the extra type-hint.

I’ve been bothered by this before - it’s been a minor annoyance, nothing too grievous for me.

And it’s just an annotation with no effect on bundle size, so… I just add it and move on.

(Incidentally, constructors also can’t be abstracted and can’t inherit anything - so you’ll duplicate the type-hint for the props argument in constructors as well. It’s not perfect.)