使用来自Typescript的react-meteor-data

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

Based on what I've been reading, this is an awkward time for the Javascript community in general and for the Meteor community specifically. With the introduction of things like Webpack, Typescript, Flow, Angular2, React and a host of other new tools and technologies, it is painful to start a Meteor project right now (so long as you want to use some of those modern technologies). Perhaps it will be easy again soon.

Here were some very helpful articles:

1. State of Meteor (part 1)
2. State of Meteor (part 2)

As a result of all of this, I decided to go with Express for now.

Answer 2

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 3

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.