Target different Javascript versions with TypeScript

Question

TypeScript can globally target different versions of Javascript - you can switch between transpiling ES3, ES5 or ES6.

We have to support IE, so ES3 is our lowest common denominator.

However, good browsers (like Chrome) already support ES6, and will be able to run the significantly smaller ES6 code with optimisations.

So, from the same TypeScript source I want to serve ES3 to IE and ES6 to Chrome.

Is there a way to make TypeScript transpile multiple JS files (maybe as *.es3 and *.es6 or something like that) so we can pick which version to serve? (Ideally in VS 2015)
Alternatively in C# can I access the TypeScript transpiler to complete the step at run time?

Are you using a JS build tool like Gulp, Webpack, or even Grunt? If so, you can simply factor your TS build into a function and run it twice with different targets. — ssube, Aug 15 '16 at 17:54
@ssube - unfortunately not, this is a C# VS 2015 project file upgraded from older versions. VS appears to use hard coded settings in the .csproj file rather than tsconfig.json files like VS Code does. — Keith, Aug 15 '16 at 20:49

score 4 · Answer 1 · edited May 23 '17 at 12:14

4

You can actually specify which version you want to transpile to using the command line (--target ES3).

You can also specify an output directory, so that you can output both ES6 and ES3 transpiled code, and then chose which to reference on the fly (using old style IE ifs).

edited May 23 '17 at 12:14

Community

1
1

answered Aug 15 '16 at 08:31

Benjamin Soulier

2,223
1
18
30

score 3 · Answer 2 · answered Aug 15 '16 at 08:33

3

How about using different tsconfig.json files?

For example, something like:

 - root  
    - ts-source  
    - js-es3  
       - tsconfig.json  
       - js  
    - js-es5  
       - tsconfig.json  
       - js

Then the root/js-es3/tsconfig.json:

{
    "compilerOptions": {
        "target": "ES3",
        "outDir": "js",
        "rootDir": "../ts-srouce"
    }
}

And the root/js-es5/tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "js",
        "rootDir": "../ts-srouce"
    }
}

I'm not a visual studio user so I don't know how to support different tsconfig.json files there, but even if you can't, then you can compile it using tsc.

answered Aug 15 '16 at 08:33

Nitzan Tomer

155,636
47
315
299

I think this would be the answer in most IDE's/editors, but unfortunately VS2015 doesn't support multiple tsconfig files, completely ignores `rootDir` and has a bug where `outDir` gets a copy of the output but an in-place copy is created too. – Keith Sep 08 '16 at 12:14
@Keith Are you sure? I'm not a VS kinda guy, but according to [this ticket](https://github.com/Microsoft/TypeScript/issues/4714) it seems to be supported. – Nitzan Tomer Sep 08 '16 at 12:50
Yup, it's taken me so long to reply because I was testing it extensively. I think it is a [bug in VS2015](https://connect.microsoft.com/VisualStudio/feedback/details/3101865) rather than a fault in TypeScript. The free VS Code handles multiple tsconfig files fine, but full fat VS2015 with a .csproj fails hard at the moment. Maybe they'll fix it in Update 4. – Keith Sep 08 '16 at 13:04
You can always run the compiler from the command line... And you can use a different IDE for the typescript part (WebStorm is amazing, but you also have the VSCode thing, and even atom can work well) – Nitzan Tomer Sep 08 '16 at 13:10

Target different Javascript versions with TypeScript

2 Answers2