[Typescript]: Using meteor with react and typescript

help
1

I have seen that there are possibilities to use meteor with typescript, there is also the possibility to use react with typescript.

But I haven’t found any solution if I wanted to use typescript with React and Meteor together. Has anyone successfully managed to make all of them work together?

5 Likes
2

I am new to React and Typescript. I managed to get the React for Meteor tutorial working with Typescript up to the point of getting the app to run and show the three hard-coded tasks in the browser: https://www.meteor.com/tutorials/react/components .

Unfortunately Meteor forums limits me to two links per post, so I cannot provide complete references.

Preliminaries:

I installed the following from Atmosphere to get the Meteor + Typescript part. The type definitions file I referenced in my .tsx file is all-definitions.d.ts, but this file was installed in a completely different location than given in the documentation. I found it somewhere under ~/.meteor/... .

  • meteortypescript:compiler
  • meteortypescript:typescript-libs

For the React + Typescript part, I followed the instructions at http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/ to install TSD and the react type definitions. I also installed react-global type definitions to get React defined, rather than using import React = __React.

In summary, my .tsx file had three references:

  • all-definitions.d.ts
  • react.d.ts
  • react-global.d.ts

I wasn’t able to get the React for Meteor example to compile using React.createClass. Using the transformation shown in the staxmanade.com post , I was able to change this to

class MyApp extends React.Component<MyAppProps, {}> { ... }

which compiled and ran with the hardcoded tasks. Note that I could not call my class App as in the example, because that apparently collides with App defined somewhere else. The part where I got stuck is in the next step of the React for Meteor tutorial (collections). I don’t know how to reference the mixin ReactMeteorData, since Typescript complains that it is not defined. I Googled but didn’t find any type definitions for this mixin or anything related to this mixin and Typescript together. It doesn’t seem like anyone has tried, or maybe I am missing something obvious.

2 Likes
3

Greetings @dustbrot

I managed to get it working and you can check it out here:

let me know if you need any additional info

4

I get errors when I try to npm start the above project. Is there an up-to-date project anywhere that combines meteor and react and typescript?

1 Like
5

This is how I did successfully:

  1. Install modules from npm
    • npm install --save react react-dom react-addons-pure-render-mixin
  2. Add meteor packages
    • meteor add barbatus:typescript react-meteor-data
  3. Add TypeScript type definitions
    • typings install --save --global env~meteor dt~es6-shim dt~react dt~react-dom
1 Like