How can I use inject and observer with the decorator syntax with TypeScript and avoid the missing properties problem?
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:
- Is it possible to solve this using decorators (maybe with latest TypeScript magic)?
- Can anyone elaborate why I have to use
<any>
and maybe how to write it in a better way?