My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

How can I use inject and observer with the decorator syntax with TypeScript and avoid the missing properties problem?

Sebastian Deutsch's photo
Sebastian Deutsch
·Mar 3, 2019

I have a FilterHeader component that gets some stores injected:

interface FilterHeaderProps {
  applicationStore: ApplicationStoreType;
  conversationsListStore: ConversationsListStoreType
}

@inject('applicationStore', 'conversationsListStore')
@observer
export default class FilterHeader extends Component<FilterHeaderProps> {
   ...

When I use the class in another component like this:

  return(
      <Container>
        <FilterHeader />
        <Panel>
          ...

TypeScript is complaining that it's missing the properties:

Type '{}' is missing the following properties from type 'Readonly<FilterHeaderProps>': applicationStore, conversationsListStorets(2739)

I've chased down the problem to the fact that TypeScript decorators are not able to change the function signature:

github.com/DefinitelyTyped/DefinitelyTyped/..

I've solved my problem so far by using functions:

const observedFilterHeader = observer(FilterHeader);
export default inject('applicationStore', 'conversationsListStore')<any>(observedFilterHeader);

By placing an <any> after the inject it works but TBH I was more guessing than knowing what's happening here. My questions are:

  1. Is it possible to solve this using decorators (maybe with latest TypeScript magic)?
  2. Can anyone elaborate why I have to use <any> and maybe how to write it in a better way?