Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

August 12, 2015

Automatic Compilation in VS Code for TypeScript

Filed under: TypeScript,VS Code @ 2:19 pm
Tags: ,

By default, when you use VS Code with a TypeScript project, you need to use Ctrl+Shift+B (or Cmd+Shift+B on a mac) to build the application and transpile the TypeScript to JavaScript. But there is a way to make this process more seamless.

To set up VS Code to watch for changes and transpile automatically requires two steps:

1) Modify the tsconfig.json file for the project.

2) Run the TypeScript compiler on the folder for the project.

Let’s look at both of these steps in detail.

Modify the tsconfig.json File

The tsconfig.json file configures TypeScript for your project. In the tsconfig.json file you can define compiler options, such as the version of JavaScript you’d like the transpiler to use. The TypeScript code is then transpiled to the selected version of TypeScript.

To configure VS Code for automatic compilation, you need to add a watch property here:

{
    “compilerOptions”: {
        “target”: “ES5”,
       “watch”: true
    }
}

NOTE: The intellisense does not seem to know about the “watch” option. So you won’t see it in the list of available compiler options. But it does work.

Run the TypeScript Compiler

You can manually run the TypeScript compiler from within VS Code by using Ctrl+Shift+B (or Cmd+Shift+B). Alternatively, you can manually run the TypeScript compiler from the command window (also called a terminal).

1) Right-click on the index.html file in the VS Code Explore pane and select Open in Console.

This opens a command window defaulted to the current project directory.

2) Type tsc.

Typing tsc (for TypeScript compiler) immediately transpiles all of the TypeScript code in the directory (and subdirectories) to JavaScript. Without the “watch” setting, if you later make changes to the TypeScript code, you have to re-run the tsc command to transpile the changes.

image

HOWEVER, if you have the watch compiler option set to true as shown in the code example above, running tsc here produces a different result. In this case, the TypeScript compiler will immediately transpile all of the TypeScript code in the directory (and subdirectories). But then, it will start watching for changes. Any change it sees to the files in the directory will automatically be transpiled. Notice in the screen shot below that it watched me make 3 changes and compiled after each of them.

image

If you leverage VS Code’s AutoSave feature, and turn on the watch following the two steps detailed above, then the TypeScript compiler will transpile your TypeScript files every time you make a change.

Enjoy!

For more information on other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

Thanks to Greg who posted this suggestion to the Discussion forum for my Pluralsight course.

5 Comments

  1.   Erich Gamma — August 14, 2015 @ 1:02 am    Reply

    Regarding: “The intellisense does not seem to know about the “watch” option.”
    Thanks for catching this one, fix will be in the next update.

    •   deborahk — August 14, 2015 @ 9:06 am    Reply

      Excellent! Thanks!
      And another thing I noticed is that when I have the watch on, if I use Ctrl+Shift+B (out of habit) the build process runs forever. I have to exit TypeScript for it to stop. Is there a good place to post these types of things?

      •   Erich Gamma — August 18, 2015 @ 11:42 pm    Reply

        Bugs on https://code.visualstudio.com/Issues/List are always welcome.

        We have some experimental support for ‘watching’ tasks that isn’t fully finished but that we use for our own dogfooding. I’ll send it to you through your contact channel.

  2.   Erich Gamma — August 18, 2015 @ 11:55 pm    Reply

    Here is the experimantal version of our task.json with watching support. It uses gulp but our gulp task shells out to TSC so it should also work for tsc –watch.

    The challenge with watching is you need to find out when a new run starts and ends, this is the reason for the additional regexs and complexity. Feedback is always welcome.

    task.json
    {
    “version”: “0.1.0”,
    “command”: “gulp”,
    “isShellCommand”: true,
    “tasks”: [
    {
    “taskName”: “watch”,
    “args”: [
    “–no-color”
    ],
    “isBuildCommand”: true,
    “isWatching”: true,
    “problemMatcher”: {
    “owner”: “typescript”,
    “fileLocation”: [“absolute”],
    “pattern”: {
    “regexp”: “^\\*\\*\\* Error: ([^(]+)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\): (.*)$”,
    “file”: 1,
    “location”: 2,
    “message”: 3
    },
    “watchedTaskBeginsRegExp”: “^\\*\\*\\* Starting\\.\\.\\.$”,
    “watchedTaskEndsRegExp”: “^\\*\\*\\* Finished”
    }
    }
    ]
    }

  3.   Erich Gamma — August 19, 2015 @ 12:43 am    Reply

    Sorry for the spam, but Dirk the owner of the Tasks implementation just pointed out to me, that if you just want to run tsc as a watching task, then we have a buglet. Here is a tasks.json that avoids this problem and it works nicely.

    {
    “version”: “0.1.0”,
    “command”: “tsc”,
    “isShellCommand”: true,
    “tasks”: [
    {
    “taskName”: “build”,
    “suppressTaskName”: true,
    “isWatching”: true,
    “problemMatcher”: {
    “base”: “$tsc”,
    “watchedTaskBeginsRegExp”: “^\\s*message TS6032: File change detected. Starting incremental compilation…”,
    “watchedTaskEndsRegExp”: “^\\s*message TS6042: Compilation complete. Watching for file changes.”
    }
    }
    ]
    }

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs