Desenvolvimento

19 ago, 2016

TypeScript – Configurando o VS Code para escrever, rodar e debugar

Publicidade
  • Typescript permite escrever JavaScript do jeito que você realmente quer.
  • Typescript é um super conjunto de JavaScript que compila para JavaScript simples.
  • Qualquer browser. Qualquer host. Qualquer sistema operacional. Código aberto.

As frases acima estão na página de entrada do TypeScript.

Neste artigo, vamos realizar as tarefas básicas para iniciar com o TypeScript no VS Code:

  1. Configurar o ambiente para o Typescript no Visual Studio Code.
  2. Escrever uma aplicação TypeScript bem simples.
  3. Rodar a aplicação na janela do console.
  4. Degubar o código TypeScript.

Instalando o TypeScript usando o NPM e o Visual Studio Code

O Typescript pode ser instalado de duas formas, ou seja, via NPM (Node Package Manager) ou através dos plugins do Visual Studio.

Nosso foco é usar o Visual Studio Code, então vamos instalar o TypeScript usando o NPM.

Abra uma janela do prompt de comando no seu ambiente Windows digitando Command ou Cmd na caixa de texto Pesquisar e digite o comando npm:

vs_ts-1

Você deverá ver a lista de comandos disponíveis para o NPM indicando que o npm está vivo no seu ambiente.

Agora vamos instalar o TypeScript digitando o seguinte comando: npm install -g typescript.

E, em seguida, digitando tsc -v para indicar a versão do TypeScript que foi instalada:

vs_ts-2

Depois, crie uma pasta na raiz do seu ambiente digitando md DemoTs.

vs_ts-3

Abra a pasta DemoTs no VS Code usando a opção File -> Open Folder:

vs_ts-4

Configurando o Task Runner para transpilar o JavaScript para o TypeScript

Você deve pressionar agora as teclas Ctrl+Shit+B no VS Code.

Fazendo isso, você vai obter o seguinte alerta:  “No task runner configured”.

Você deve então clicar em “Configure Task Runner” para criar o arquivo tasks.json, o que é uma coleção de tarefas para várias tarefas do TypeScript, Gulp, Grunt etc.

vs_ts-5

Após clicar em Configure Task Runner, selecione a opção TypeScript – watch mode.

Com isso, sempre que qualquer arquivo TypeScript for modificado ou salvo, ele será compilado imediatamente para um arquivo JavaScript:

vs_ts-6

Você verá o arquivo tasks.json ser criado e exibido conforme abaixo:

vs_ts-7

Usando a opção New File do VS Code, crie o arquivo tsconfig.json com o código abaixo:

vs_ts-8

Dessa forma, criamos um TypeScript Configuration File onde no código temos que:

  1. “–target”  – Informa ao TSC (TypeScript Compiler) para transpilar todo os arquivos TS para arquivos JS padrão;
  2. “–outDir” – É o diretório de saída dos arquivos JavaScripts transpilados,  ou seja, “jsScripts”
  3. “–sourceMap” – Ajuda a debugar o typescript.

Escrevendo o seu primeiro programa TypeScript – app.ts

Usando o VS Code (opção New File), crie um arquivo chamado app.ts com o código abaixo:

vs_ts-9

Após salvar o arquivo, vamos dar um build no projeto teclando Ctrl+Shit+B:

vs_ts-10

Após alguns segundos, você verá a mensagem de compilação e notará a criação da pasta jsScripts com os arquivos app.js e app.js.map.

Isso indica que o TypeScript foi transpilado para JavaScript e estamos prontos para rodar a aplicação.

Rodando o projeto e vendo a saída no console

Pressione as teclas Ctrl+Shift+D par abrir o painel Debug.

A seguir, clique no ícone: Open launch.json.

vs_ts-11

Copie e cole o código conforme mostra a figura abaixo no arquivo launch.json e salve-o:

vs_ts-12

Agora é só alegria…

Pressione F5 para rodar a aplicação e ver o resultado no console conforme a figura abaixo:

vs_ts-13

Debugando sua aplicação TypeScript no VS Code

Vamos colocar um breakpoint no arquivo app.ts na linha da definição da variável ola e rodar a aplicação e ver o debug em ação.

Veja o que acontece:

  1. Definimos um breakpoint e rodamos a aplicação;
  2. Quando o breakpoint é atingido vemos a call stack;
  3. Podemos avançar linha a linha no debug e vemos na janela de saída a movimentação do arquivo app.ts para o arquivo app.js:

vs_ts-14

Chegamos assim ao final, e já configuramos e criamos a nossa aplicação TypeScript para rodar no VS Code.

Pegue o código da aplicação aqui: DemoTs.zip.

Até mais!