
Sissejuhatus
Apenas para contextualizar, O 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 (npm – Node package manager), mas para usá-lo, você primeiro precisa installige selle Node.js.
Após instalar o Node, abra o terminal (käsk) 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 comando “TSC” é uma acrônimo para TypeScript Compiler.
TSC -v |
Probleem
O problema é que o comando “TSC” funcionava 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 Kui an internal or external command,operable program or batch Faili. |
Além disso, eu não queria executar o comando “TSC” para cada vez que quisesse compilar um arquivo “.Ts” (extensão para TypeScript). Nii, como sempre fazer a compilação automática ao salvar (CTRL+S)? É o que veremos adiante.
Muud tõrked
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 no “tsconfig.json” do Visual Studio Code, o código abaixo não irá funcionar:
{ "compileOnSave": True, "compilerOptions": { "noImplicitAny" : True } } |
Lahendus
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), näiteks:
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, Seega:
"compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (Vaikimisi), '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. */ ... jätkub ... |
Valmis, agora é só ir no terminal do VS Code e digitar o comando:
TSC -w |
Este comando fica monitorando (ou vendo, Seetõttu “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!