Crie aplicações Javascript com TypeScript no Visual Studio Code

Para quem nos acompanha no talkitbr, temos escrito vários posts voltados para o desenvolvimento com Visual Studio Code. E hoje iremos abordar mais um tema relevante que é desenvolvimento com TypeScript.

Para quem não conhece, o TypeScript permite a você escrever Javascript, sem ter que lidar com problemas comuns como ausência explícita de tipos e também erros do Javascript em tempo de execução. Isso porque ele é um superset do Javascript que permite escrever arquivos que são então compilados em Javascript regular.

Dessa forma, o TypeScript faz a verificação de erros durante a compilação e permite gerar Javascript para diferentes versões do EcmaScript sem que você precise necessariamente se preocupar com isso.

E o melhor de tudo isso é que é OpenSource e pode ser usado para disponibilizar conteúdo em qualquer browser, computador e sistema operacional.

Para maiores informações, visitem o site oficial do TypeScript: http://www.typescriptlang.org/.

Esse artigo foi escrito com base na documentação oficial do Visual Studio Code que aborda desenvolvimento com TypeScript (https://code.visualstudio.com/Docs/languages/typescript).

Preparando o Ambiente

Você pode também ver os passos no post “Desenvolva sites com Visual Studio Code”.

Vamos começar baixando e instalando o Visual Studio Code. É gratuito e está disponível tanto para Windows como Linux e OS X.

Em seguida vamos instalar no Node.js, que será usado como ambiente de execução do nosso programa Javascript.

Agora abra o programa de linha de comando do Node.JS (no Windows é o Node.js Command Prompt) e execute o seguinte comando:

npm install -g typescript

Formas de desenvolvimento TypeScript

O TypeScript pode ser desenvolvido de duas maneiras:

• Arquivos isolados .ts Os arquivos precisam ser compilados separadamente. Nesse caso você não conta com facilidades como referência entre arquivos TypeScript.

• Projeto TypeScript Você pode definir vários arquivos TypeScript que estarão relacionados um com o outro. Você possui também configurações de compilação que se aplicam para todos os arquivos .ts.

Para nosso exemplo, vamos desenvolver utilizando projeto TypeScript.

Criando projeto TypeScript no Visual Studio Code

Abra o Visual Studio Code e então abra uma nova pasta (File > Open Folder…). Sugiro criar uma pasta vazia e então selecioná-la:

Através do Explorer, crie uma nova pasta onde iremos colocar nossos arquivos ".ts". Exemplo: “typescript”.

Dentro dessa pasta, crie o arquivo tsconfig.json e coloque o conteúdo a seguir. Para auxiliá-lo, o Visual Studio Code oferece IntelliSense para completar código (CTRL + espaço).

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd"
    }
}

O arquivo tsconfig.json deve ser criado na raiz da pasta do projeto TypeScript e define opções de compilação do projeto. No caso do código acima, estamos especificando o EcmaScript 5 como target e o módulo AMD (Asynchronous Module Definition), que é mais apropriado para navegadores Web. Para a lista completa de opções de compilação, acesse a documentação contida no repositório GitHub do TypeScript.

Crie agora uma nova pasta par incluirmos nosso código TypeScript. Exemplo: “ts”. Dentro dele vamos adicionar o arquivo HelloWorld.ts com o código a seguir:

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

Percebam que a programação usando TypeScript se assemelha com aquela que temos no Java e C#. Temos a definição de classe, tipos, métodos públicos, métodos estáticos, etc. Para maiores informações sobre os recursos, acesse o link que contém o Handbook do TypeScript.

Compilando e executando o projeto

Você se lembra que instalamos anteriormente o módulo TypeScript? Vamos usá-lo agora para fazer o build do nosso projeto. E podemos fazê-lo de dentro do Visual Studio Code. Para tanto, temos que configurar a tarefa de build.

Pressione F1 ou Ctrl + Shift + P e selecione o comando “Configure Task Runner” (basta começar a escrever o nome do comando que o Visual Studio Code faz o filtro para você).

Como é a primeira vez que estamos configurando a tarefa de build, o próprio Visual Studio Code fornecerá um código guia. Se vocês observarem, esse código contempla várias configurações de tarefas. A primeira é para compilar arquivos TypeScript (no caso de desenvolvimento de arquivos “.ts” isolados); A segunda, a qual iremos utilizar, é para compilar um projeto TypeScript a partir de um arquivo de compilação tsconfig.json; Entre outras que usam msbuild, por exemplo.

Vamos usar então a segunda definição de task. O arquivo deverá ter o seguinte conteúdo:

// Available variables which can be used inside of strings.
// ${workspaceRoot}: the root folder of the team
// ${file}: the current opened file
// ${fileBasename}: the current opened file's basename
// ${fileDirname}: the current opened file's dirname
// ${fileExtname}: the current opened file's extension
// ${cwd}: the current working directory of the spawned process

// A task runner that calls the Typescript compiler (tsc) and
// compiles based on a tsconfig.json file that is present in
// the root of the folder open in VSCode
{
	"version": "0.1.0",

	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
	"command": "tsc",

	// The command is a shell script
	"isShellCommand": true,

	// Show the output window only if unrecognized errors occur.
	"showOutput": "silent",

	// Tell the tsc compiler to use the tsconfig.json from the open folder.
	"args": ["-p", "typescript"],

	// use the standard tsc problem matcher to find compile problems
	// in the output.
	"problemMatcher": "$tsc"
}

Notem que para o argumento “-p”, especificamos o valor “typescript” que é a pasta que criamos para colocar os arquivos TypeScript.

Pronto! Para compilar o projeto, pressione Ctrl + Shift + B. Como resultado, será gerado o arquivo “HelloWorld.ts”:

Para executar o projeto, vamos usar o Node.js. Abra o programa de linha de comando, acesse a pasta onde está contido seu projeto TypeScript. Você pode fazê-lo selecionando a pasta “ts” ou o arquivo “HelloWorld.js” do seu projeto e então abrindo o menu de contexto (clique com o botão direito do mouse no item) e selecionando a opção “Open in command prompt”. Lá, execute o seguinte comando:

node HelloWorld.js

O resultado será a exibição do texto “Hello World” no console:

Hello World

Resolvendo erros de compilação

Uma grande vantagem do TypeScript é o fato do código ser compilado. Portanto, muitos erros de escrita do programa são detectados nesse momento. Isso é uma vantagem em relação ao Javascript, onde o erro só é acusado durante a execução.

Ao compilar o projeto TypeScript, se ocorrer algum erro, o mesmo é indicado na barra de status: .

Você pode tanto clicar no ícone como também pressionar as teclas Ctrl + Shift + M ou F1 e então “!” para exibir lista de erros. Os erros são também exibidos no painel de saída (Output) da task:

Depurando o código

O Visual Studio Code também permite depurar o código TypeScript, mas temos que fazer algumas alterações no nosso projeto. Primeiro devemos criar um mapeamento de código Javascript gerado com o original TypeScript. Para isso, devemos incluir uma opção a mais no arquivo de configuração do nosso projeto TypeScript:

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "sourceMap": true
    }
}

Agora, ao compilarmos novamente nosso projeto, será gerado o arquivo “.map” para cada Javascript gerado.

Acesse o item de depuração do Visual Studio Code, e então clique no ícone de configuração:

Será exibida uma lista com opções de ambientes de execução. Vamos escolher o Node.js. Como ainda não tinhamos feito essa configuração antes, o Visual Studio Code irá gerar o arquivo a partir de um template. Vamos só fazer algumas modificações para o nosso projeto (destacadas abaixo):

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch",
			"type": "node",
			"request": "launch",
			"program": "${workspaceRoot}/typescript/ts/HelloWorld.ts",
			"stopOnEntry": false,
			"args": [],
			"cwd": "${workspaceRoot}",
			"runtimeExecutable": null,
			"runtimeArgs": [
				"--nolazy"
			],
			"env": {
				"NODE_ENV": "development"
			},
			"externalConsole": false,
			"sourceMaps": true,
			"outDir": null
		},
		{
			"name": "Attach",
			"type": "node",
			"request": "attach",
			"port": 5858,
			"sourceMaps": false,
			"outDir": null,
			"localRoot": "${workspaceRoot}",
			"remoteRoot": null
		}
	]
}

Para incluir o breakpoint, volte para o explorer do projeto e então selecione o arquivo HelloWorld.ts (não vamos depurar o arquivo gerado “.js” e sim o arquivo que programamos, o “.ts”):

Para depurar o projeto, pressione F5. O código será depurado e a execução será interrompida na linha do breakpoint:

Nesse momento você pode analisar valor de variáveis e executar o programa linha a linha.

Que saber mais sobre TypeScript no Visual Studio Code?

O site do Visual Studio Code fornece ainda outras informações acerca do desenvolvimento com TypeScript. Acesse o link https://code.visualstudio.com/Docs/languages/typescript.

Mande também seus comentários e dúvidas. E continue nos acompanhando no talkitbr.