ES6 + TypeScript + Babel + React + Karma

[johnnyreilly]

Hi @mhegazy,

As discussed I've put together a demo of how to use TypeScript for type checking and use something else (in this case Babel) to handle transpilation to ES5:

https://github.com/johnnyreilly/ES6-TypeScript-Babel-React-Karma

It also uses JSX / React (the JSX is also transpiled by Babel) and has Jasmine unit tests (both TS and TSX) with a runner set up that uses Karma. It's all powered by webpack and leans heavily on @jbrantly's ts-loader. It has sourcemaps to spare which makes debugging in Chrome a pretty sweet experience.

You're very welcome to have this (or a further cutdown version) for the TypeScript samples. Let me know and I'll submit a PR. I'm intending to blog about this at some point as well - it took a while to get everything working as I wanted it to and I figure it could be useful to others.

The one caveat (and it seems fairly important) is that it doesn't seem to play too well inside Visual Studio! I'm guessing this is related to microsoft/TypeScript#3949 but I haven't had chance to investigate.

[mhegazy]

A PR would be greatelly appreciated.

The one caveat (and it seems fairly important) is that it doesn't seem to play too well inside Visual Studio! I'm guessing this is related to microsoft/TypeScript#3949 but I haven't had chance to investigate.

Can you elaborate on the issues you are running into? As for #3949 @paulvanbrenk is looking into it. he got pulled off on other work items, but he should be back on it now.

[johnnyreilly]

A PR would be greatelly appreciated.

Done

[johnnyreilly]

Can you elaborate on the issues you are running into?

Sure.

I've tried using 2 templates in Visual Studio 2015; ASP.Net empty and the TypeScript template. I'd just copy the contents of the repo into the new project and add the web.config tweak specified in the readme.md. The TypeScript template doesn't appear to allow combining "EcmaScript 6" and any of of the possible module types. Some of the errors:

A 'tsconfig.json' file is not supported in this project type. JustTypeScript 1

TS1204 Cannot compile modules into 'commonjs', 'amd', 'system' or 'umd' when targeting 'ES6' or higher. JustTypeScript 1

Build: Cannot compile modules into 'commonjs', 'amd', 'system' or 'umd' when targeting 'ES6' or higher. JustTypeScript C:\Source\JustTypeScript\JustTypeScript\VSTSC

[johnnyreilly]

Hold on a sec - may have cracked it....

[johnnyreilly]

Okay, if you set the TypeScript options as follows it works... kinda:

• ECMAScript Version: ECMAScript 6
• JSX compilation in TSX files: Preserve

However, the intellisense for imports is a land of red squigglies when it comes to importing TSX files.

[johnnyreilly]

Updated the readme.md with the above info.

[mhegazy]

thanks @johnnyreilly!