Any way to get Typescript working with Meteor and React?


#1

As title. I can’t seem to get it to work at all :frowning:
Thank you!


#2

Yes, but you should use one of the two meteor/webpack/react projects.
Also Atom (with typescript plugin) works better than webstorm 11.


#3

Sorry, but could you explain that part? I am just looking to use Meteor’s React with Typescript. I don’t need webpack (unless it’s necessary). Thank you.


#4

The problem is that you have to manage the scope somehow.
As you probably know, Meteor manages the scope per file : either your variables are scoped to the file, or you make them global for the whole app, which is pretty inconvenient.
One workaround is to use packages for everything, but this doesn’t work well with typescript either.
The best way to structure your code is to use ES6 modules, but meteor doesn’t support them ATM.
With modules, the typescript compiler will have no problem knowing how your app’s scope works.


#5

Since modules are not yet support in Meteor, does that mean I can’t use the combination I want?


#6

The combination of what ?


#7

That I can’t use the combination Meteor + React + Typescript together since modules are not yet supported in Meteor. (Sorry, if it’s possible could I just get a small example?) Tank you.


#8

You can use typescript now without modules, but there will be some workarounds involved.
I have no experience running react in meteor with typescript without modules, since when i began learning React, there was already an existing Webpack project.
It’s possible to use typescript with the “everything in packages” approach, but it’s a bit of a PITA.
One small example : if you want to export a namespaced variable for your package, you must write :

declare var foo;
foo = {} || foo ;

You can’t really use tsconfig.json with packages since it won’t recognize package scopes, so you must use the dreaded > ///<reference path=".."/> at the beginning of your files.

I hope this will be fixed when Meteor will support es6 modules, but i’m not 100% sure there won’t be problems with meteor “flavor” of es6 modules.

What i can say is that it works (quite) flawlessly with webpack.


#9

FWIW, i’ve been using webpack (without Typescript) for several months and it’s been really great. If you’re going to use modules doing it in a fresh app with Webpack is much better than waiting until MDG gets around to it.


#10

One last word about typescript and react.
Typescript will check that your props are correctly passed to children, and will help autocomplete this.props members in the children, but since it doesn’t know about meteor and the mixin, it will complain about unknown this.data. There should probably be a way to write definitions to allow the compiler to know about this.data, but i’m not enough of a TS Ninja to write definitions for a decorator (since this is the preferred way to implement the mixin, @reactMixin.decorate(ReactMeteorData) on the es6 class)