2

I am just starting out in Type Script, and am using the new Visual Studios Code IDE. I am currently facing an issue where I can either use the visual studios type script plug-in, and run the javascript files using node. However it won't build the js file automatically when the ts file is saved. So i uninstalled the plugin, and installed typescript according to this video:

https://egghead.io/lessons/typescript-typescript-up-and-running-in-seconds

Now I can have one ts file be built by using the --watch option, but how would I accomplish auto building multiple .ts files when I move on to more complex projects that will require it?

Also is this the best way to write TypeScript using Visual Studios Code as my IDE? Currently I'm not a huge fan of this set up because I have to have a terminal open to watch a single ts file (which can mean a bunch of windows are required to watch each file, and also a terminal open to run the program.

PhoenixLament
  • 741
  • 1
  • 11
  • 32

1 Answers1

4

I'm not sure whether you use Visual Studio Code or Visual Studio 2013. I assume it's VS Code (if it's not, consider switching. VS Code is really good!).

Now I'll quote myself from another answer.

You can do this with Build commands:

Create a simple tsconfig.json with watch = true (this will instruct compiler to watch all compiled files):

{
    "compilerOptions": {
        "target": "ES5",
        "out": "js/script.js",
        "watch": true
    }
}

Note that files array is omitted, by default all *.ts files in all subdirectories will be compiled.

Configure your task (Ctrl+Shift+P -> Configure Task Runner):

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

Now press Ctrl+Shift+B to build the project. You will see compiler output in the output window (Ctrl+Shift+O).

See one of my projects for more info: tsconfig.json, .settings/tasks.json.

Community
  • 1
  • 1
zlumer
  • 6,844
  • 1
  • 25
  • 25
  • so there is no way to do it automatically? – PhoenixLament Jun 03 '15 at 14:03
  • After you build it once (`Ctrl+Shift+B`), it will watch and re-compile all files on save automatically. You can always `Terminate running task` or close the project to stop the compiler. – zlumer Jun 03 '15 at 14:05
  • 2
    I get the following error: tsc.js(25345, 17) JavaScript runtime error: Object doesn't support property or method 'watchFile' – PhoenixLament Jun 03 '15 at 14:20
  • 5
    Probably you use TypeScript compiler from Visual Studio Tools and not the NPM one (it's possible only on Windows). Check your compiler: `where tsc`. If the one used is not in `AppData\Roaming\npm` folder (probably under `Program Files`), you should remove it and install from NPM: `npm install -g typescript`. – zlumer Jun 03 '15 at 14:29
  • 2
    building on @zlumer, you will also need to remove the `Program Files (x86)\Microsoft SDKs\TypeScript` path from your system PATH environment variable, so it uses the one from npm. You can check which one is being used in Powershell: `get-command tsc` – kamranicus Oct 20 '15 at 02:38