אָטאַמאַטיק זאַמלונג ווען שפּאָרן טיפּקריפּט אין וויסואַל סטודיאָ קאָד

אין דעם פּאָסטן מיר וועלן סאָלווע צוויי פּראָבלעמס: 1) באַפֿעלן “tsc” ניט דערקענט אין די ינאַגרייטיד ווס קאָד וואָקזאַל, און 2) זאַמלונג טוט נישט אַרבעטן אויטאָמאַטיש ווען שפּאָרן טעקע “.ts” (טיפּ שריפט).

הקדמה

Apenas para contextualizar, די 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 :די

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

פּראָבלעם

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 ווי an internal or external command,operable program or batch טעקע.

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

אנדערע ערראָרס

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. אין אנדערע ווערטער, não adianta usar compileOnSave notsconfig.jsondo Visual Studio Code, o código abaixo não irá funcionar:

{
   "compileOnSave": אמת,
   "compilerOptions": {
       "noImplicitAny" : אמת
   }
}

באַשייד

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), לעמאָשל:

cd C:\wamp64\www\ts

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

tsc --אין דעם

Note que um arquivotsconfig.jsonserá criado emC:\wamp64\www\ts” (diretório corrente).

Abra o tsconfig.json e habilite a opção sourceMap”: אמת, e salve a modificação, ficando assim:

  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (ניט ויסצאָלן), '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": אמת,                       /* Allow javascript files to be compiled. */
    // "checkJs": אמת,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": אמת,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": אמת,                     /* 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 ...

באַלד, agora é só ir no terminal do VS Code e digitar o comando:

tsc -w

Este comando fica monitorando (ou vendo, דעריבער “wde watch) a aplicação e qualquer alteração no arquivos .ts, quando salvo, fará a imediata compilação em .js.

That’s it!

גאַנץ אַקסעססעס: 10612

לאָזן אַ ענטפֿערן

אייער בליצפּאָסט אַדרעס וועט ניט זיין ארויס. Required fields זענען אנגעצייכנט מיט *