Automatic compile on save TypeScript in Visual Studio Code

In this Post we will solve two problems: 1) command “TSC” is not recognized in the VS integrated terminal code, and 2) compiling does not work automatically when saving file “.TS” (Type Script).

Introduction

Just to contextualize, the Typescript allows you to write code using a strongly typed structure and have this compiled code to pure JavaScript. Already the Visual Studio Code is a multiplatform editor created by Microsoft.

// Versions used in this Post:
- Visual Studio (VS) Code: version 1.14.1
- Typescript: version 2.4.1

This is an easy tip, but you may have problems if you don't know what you're doing: my case :(D)

Node.js and TypeScript installation

One of the ways to install the TypeScript is through the package manager of Node.js (NPM – Node package manager), but to use it, you first need to install the Node.js.

After installing the Node, Open the terminal (command) and run the following command to install the TypeScript:

NPM install -g typescript

The Windows terminal (or Linux), do a test run of the TypeScript by checking the installed version. The command “TSC” is an acronym for TypeScript Compiler.

TSC -v

Problem

The problem is that the command “TSC” functioned normally in Windows terminal, but not in the integrated terminal that comes inside the Visual Studio Code (VS code), displaying the following error:

' tsc ' is not recognized as an internal or external command,operable program or batch file file.

In addition, I didn't want to run the command “TSC” for each time I wanted to compile a file “.TS” (extension to TypeScript). So, How do the automatic build to save (CTRL + S)? Is that we will see further.

Other errors

Seeking to resolve these issues, I found Posts saying to use the compileOnSave, but this is only supported by Visual Studio 2015 with TypeScript > = 1.8.4 and atom-typescript plugin. IE, There's no point in using compileOnSave in “tsconfig. json” the Visual Studio Code, the code below will not work:

{
   "compileOnSave": true,
   "compilerOptions": {
       "noImplicitAny" : true
   }
}

Solution

TSC in the VS integrated Terminal Code

First, we solve the problem of TSC not be recognized in the Visual Studio integrated terminal Code (VS code).

Some Posts suggest put the path of the tsc or npm in the PATH environment variable, but an easy way to solve this was doing the installation of the “Typescript for Visual Studio, It is compatible to the VS Code.

Now yes, After installation, Open the Visual Studio integrated terminal Code, typing:

// Shortcut key for Visual Studio integrated terminal Code:
CTRL+`
// Or use the Menu to open the terminal in Visual Studio Code:
View > Integrated Terminal

Try checking the TypeScript version integrated terminal direct VS. Code (Not on Windows terminal), and will probably be working:

TSC -v

Automatic compilation when saving a file .TS

The terminal Code stand VS in your script directory (.TS), for example:

CD C:\wamp64wwwts

Create the file tsconfig. json by typing in terminal VS. Code:

TSC --init

Note that a file “tsconfig. json” will be created in “(C):\wamp64wwwts” (the current directory).

Open the tsconfig. json and enable the option “sourceMap”: true, and save the modification, Thus:

  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: ' Buffalo ' (default), ' ES5 ', ' ES2015 ', ' ES2016 ', ' ES2017 ', or ' ESNEXT '. */
    "module": "commonjs",                     /* Specify module code generation: ' commonjs ', ' amd ', ' system ', ' umd ', ' es2015 ', or ' ESNext '. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ... continues ...

Ready, agora é só ir no terminal do VS Code e digitar o comando:

TSC -w

Este comando fica monitorando (ou vendo, so “w” de watch) a aplicação e qualquer alteração no arquivos .TS, quando salvo, fará a imediata compilação em .js.

That’s it!

Total hits: 1117

Leave a reply

The your email address will not be published. Required fields are marked with *