Using react-meteor-data from Typescript

Question

Question:

How do I use react-meteor-data with Typescript?

Background:

I'm just getting going on a new project and would like to use Meteor.

According to what I've been reading (link) the recommendation seems to be to use React with Meteor for new projects. Great I wanted to learn React anyway.

And since I'm a Java programmer, I'd really like to use Typescript.

But I'm having a lot of trouble with this trio of technologies.

Specifically, how do I hook up react components to meteor containers?

I believe I'm supposed to use react-meteor-data but if I run typings search meteor add react-meteor-data I find nothing.

Where do I go from here?

Extra-Credit:

What I would really like is for the Todo App with React tutorial to be rewritten by someone for use with Typescript. That would make my life a lot easier. Any takers?

Answer 1

There seems to be no type package for react-meteor-data at the moment, but you can just put this declaration in some .d.ts file of yours, I think it's good enough:

declare module 'meteor/react-meteor-data' {
  function createContainer(
    getMeteorData: (props?: Object) => Object,
    component: React.ComponentClass<any> | React.StatelessComponent<any>,
  ): React.ComponentClass<any>;
}

Answer 2

The excellent meteor-typings project has a bunch of meteor types available. react-meteor-data has typings available here: https://github.com/meteor-typings/react-meteor-data

Other typings are available at https://github.com/meteor-typings/ including the flow-router.

In my tsconfig.json, I added:

"types": ["meteor-typings"]

but you might not need to do that.