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?

Xantho

Put a bounty on it if you want someone to do the Extra Credit...;) – Underpay

Seems like it has been done for you: github.com/Aranir/meteor-react-typescript-todo and dphilipson.github.io/meteor-react-typescript-todos – Radcliff

The Aranir post is helpful but he is getting mixins to work with Typescript. If I understand things correctly, Meteor is moving away from mixins and react-meteor-data is the replacement. – Xantho

So basically you have everything you need except for definition files for this react-meteor-data? – Radcliff

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.

Xantho

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>;
}

Sheathing

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.

Ferrick

Answer 4

import { useTracker } from 'meteor/react-meteor-data'

Bunns

Thanks for contributing! If you find time please edit an explanation into the answer as it's recommended to explain entirely code-based answers on StackOverflow. – Zanthoxylum