- 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:
- Configurar o ambiente para o Typescript no Visual Studio Code.
- Escrever uma aplicação TypeScript bem simples.
- Rodar a aplicação na janela do console.
- 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:
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:
Depois, crie uma pasta na raiz do seu ambiente digitando md DemoTs.
Abra a pasta DemoTs no VS Code usando a opção File -> Open Folder:
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.
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:
Você verá o arquivo tasks.json ser criado e exibido conforme abaixo:
Usando a opção New File do VS Code, crie o arquivo tsconfig.json com o código abaixo:
Dessa forma, criamos um TypeScript Configuration File onde no código temos que:
- “–target” – Informa ao TSC (TypeScript Compiler) para transpilar todo os arquivos TS para arquivos JS padrão;
- “–outDir” – É o diretório de saída dos arquivos JavaScripts transpilados, ou seja, “jsScripts”
- “–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:
Após salvar o arquivo, vamos dar um build no projeto teclando Ctrl+Shit+B:
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.
Copie e cole o código conforme mostra a figura abaixo no arquivo launch.json e salve-o:
Agora é só alegria…
Pressione F5 para rodar a aplicação e ver o resultado no console conforme a figura abaixo:
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:
- Definimos um breakpoint e rodamos a aplicação;
- Quando o breakpoint é atingido vemos a call stack;
- 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:
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!