Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In VS Code, how to use the Typescript 1.5 alpha compiler

Looking through the VS Code settings, there doesn't seem to be an option, on a per project basis, to set the Typescript compiler. Can I set VS Code to use the 1.5 alpha compiler I've installed via NPM? Would referencing this compiler in a tsconfig file work?

Edit: Just want to add that I'd like to compile to ES6, if that makes a difference.

like image 246
sandy matt Avatar asked Apr 30 '15 15:04

sandy matt


People also ask

Which compiler is used in TypeScript?

The TypeScript compiler, named tsc , is written in TypeScript. As a result, it can be compiled into regular JavaScript and can then be executed in any JavaScript engine (e.g. a browser).


2 Answers

I have now verified this - you can edit your tasks.json file to point to any version you like. The example below points at the 1.5 beta, but you can point at 1.4... or I suppose even 0.8 if you want to be fruity.

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "C:\\Program Files (x86)\\Microsoft SDKs\\TypeScript\\1.5\\tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "C:\\Program Files (x86)\\Microsoft SDKs\\TypeScript\\1.5\\tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["app.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}
like image 173
Fenton Avatar answered Nov 15 '22 09:11

Fenton


Well, I did stumble upon the answer, thanks to Steve and Basarat above, so here are the steps I took. It was a combination of editing the tasks.json and the tsconfig.json files. Now I am using the TS 1.5 alpha and it compiles to ES6 code.

  1. Open the tasks.json file. You can do that using CTRL + SHIFT + P and typing "configure task runner". This will create a tasks.json file for you if one doesn't already exist in the "./settings/" folder. Steve's answer for another question pointed this out.

  2. Keep the first task that is uncommented. We'll modify that task in this way:

2a. for "command", the value is set to the npm installed TS 1.5 alpha (this is a local install of TS - not a global one with the -g option):

"C:\\path\\to\\node_modules\\.bin\\tsc.cmd"

I'm on Windows, so be sure to use "tsc.cmd", not simply "tsc".

2b. comment out the entire "windows" property.

2c. comment out the "args" property. If you enter a file name here, or ${file}, the compiler will ignore your tsconfig.json file completely.

And that's it for this file.

  1. create a tsconfig.json file in the root directory of your TS project.

3a. In my case, I deleted entirely (not just commented out) the "files" property, as I want all the TS files in the project to compile.

3b. In the compiler options, changed "target" to "ES6" and deleted completely the "module" option (commenting it out gave me an error). "Module" isn't needed for ES6.

The main part of this file now looks like this:

"version": "1.5.0-alpha",
"compilerOptions": {
    "target": "ES6",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": false,
    "noLib": false
},

"filesGlob": [
    "./**/*.ts",
    "!./node_modules/**/*.ts"
],

// optional format code options omitted...

Now when I make a change to a TS file, pressing ctrl + shift + b runs the compiler and the output is ES6 javascript.

Much thanks to both Steve and Basarat. I gave Steve the answer as he pushed me a little further along the way.

like image 33
sandy matt Avatar answered Nov 15 '22 10:11

sandy matt