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

Neste Post vamos resolver dois problemas: 1) comandotscnão é reconhecido no terminal integrado do VS code, og 2) compilação não funciona automaticamente ao salvar arquivo.ts” (Type Script).

Introduktion

Apenas para contextualizar, den TypeScript permite escrever código utilizando uma estrutura fortemente tipada e ter este código compilado para JavaScript puro. Já o Visual Studio Code é um editor de código multiplataforma criado pela Microsoft.

// Versões utilizadas neste Post:
- Visual Studio (VS) Code: versão 1.14.1
- Typescript: versão 2.4.1

Essa é uma dica fácil, mas você pode ter problemas se não souber o que está fazendo: meu caso :(D)

Instalação Node.js e TypeScript

Uma das formas de instalar o TypeScript é por meio do gerenciador de pacotes do Node.js (npmNode package manager), mas para usá-lo, você primeiro precisa instalar o Node.js.

Após instalar o Node, abra o terminal (command) e execute o seguinte comando para instalar o TypeScript:

npm install -g typescript

Ainda pelo terminal do Windows (ou Linux), faça um teste de funcionamento do TypeScript verificando a versão instalada. O comandotscé uma acrônimo para TypeScript Compiler.

tsc -v

Problem

O problema é que o comandotscfuncionava normalmente no terminal do Windows, mas não no terminal integrado que vem dentro do próprio Visual Studio Code (VS code), exibindo o seguinte erro:

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

Além disso, eu não queria executar o comandotscpara cada vez que quisesse compilar um arquivo.ts” (extensão para TypeScript). Så, como sempre fazer a compilação automática ao salvar (CTRL+S)? É o que veremos adiante.

Outros erros

Procurando resolver esses problemas, encontrei Posts dizendo para usar o compileOnSave, mas isto só é suportado pelo Visual Studio 2015 com TypeScript >= 1.8.4 e atom-typescript plugin. IE, não adianta usar compileOnSave notsconfig.jsondo Visual Studio Code, o código abaixo não irá funcionar:

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

Løsning

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 doTypeScript 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), for eksempel:

cd C:\wamp64\www\ts

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

tsc --init

Note que um arquivotsconfig.jsonserá 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 issowde watch) a aplicação e qualquer alteração no arquivos .ts, quando salvo, fará a imediata compilação em .js.

That’s it!

Samlede hits: 1117

Efterlad et svar

I din e-mail-adresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *