Compilação automática ao salvar TypeScript no Visual

Studio Code

Solução

TSC no Terminal integrado do VS Code

Primeiro vamos resolver o problema do tsc não ser reconhecido no terminal integrado do
Visual Studio Code (VS code).
Alguns Posts sugerem colocar o caminho do tsc ou npm na variável de ambiente PATH, mas
um jeito fácil de solucionar isto foi fazendo a instalação do “TypeScript for Visual Studio“,
que é compatível para o VS Code também.
Agora sim, após instalação, abra o terminal integrado do Visual Studio Code, teclando:

// Tecla de atalho para o terminal integrado do Visual Studio Code:

CTRL+`

// Ou use o Menu para abrir o terminal no Visual Studio Code:

View > Integrated Terminal

Tente verificar a versão do TypeScript direto no terminal integrado do VS Code (Não no

terminal do Windows), e provavelmente estará funcionando:

tsc -v

Compilação automática ao salvar um arquivo .ts

Pelo terminal do VS Code se posicione no diretório do seu script (.ts), por exemplo:

cd C:\wamp64\www\ts

Crie o arquivo tsconfig.json digitando no terminal VS Code:

tsc --init

Note que um arquivo “tsconfig.json” será criado em “C:\wamp64\www\ts” (diretório corrente).

Abra o tsconfig.json e habilite a opção “sourceMap”: true, e salve a modificação, ficando
assim:
 "compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3'
(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. */
... continua ...

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

tsc -w

Este comando fica monitorando (ou vendo, por isso “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!