Configurando o Typescript

Instalar

Instalar node.js e npm
Download | Node.js (nodejs.org)
Instalar TS
```
$ npm install -g typescript
```

Compilando uma classe

Criar um arquivo TS
Transpilar o arquivo criado a partir do comando:
```
$ tsc arquivo.ts
```
Verificar o arquivo criado

Criar um projeto

Um projeto facilitará o processo de administração do código. Com ele será possível configurar parâmetros de build para TODOS os arquivos nele contidos além de facilitar automações necessárias à infraestrutura de um projeto de maior complexidade.

Criar uma pasta para armazenar o projeto e nomear conforme a necessidade
Abrir uma nova janela do VSCode e abrir a pasta criada
Criar a pasta src na raiz do projeto
Criar arquivo tsconfig.json com o conteúdo abaixo
```
{
  "compilerOptions": {
		"target": "es2016",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "out",
    "sourceMap": true
  },
  "include": ["src/**/*.ts"]
}
```
Arquivo responsável por parametrizar o processo de build do projeto. Possui múltiplas configurações que podem ser habilitadas, porém, para os nossos projetos, apenas o informado acima será o suficiente.
Com as configurações definidas, ao executar o build so projeto serão compilados os arquivos *.tscontidos na pasta src e os arquivos *.js resultantes serão criados em na pasta out na raiz do projeto.
É possível gerar um tsconfig.json executando o comando abaixo na raiz do projeto:
```
$ tsc --init
```
Mais informações disponíveis AQUI.
Adicionar arquivos *.ts à pasta src
Para compilar o projeto, basta executar o comando abaixo na raiz do projeto:
```
$ tsc -p tsconfig.json
```
Pode ser utilizado o atalho CTRL + SHIFT + B para executar o build pelo vscode.
Verifique os arquivos *.js resultantes na pasta out
Para cada arquivo compilado, dois arquivos serão gerados (*.js e *.js.map)

*.js é o arquivo que será executado pelo interpretador
*.js.map é um arquivo de referências que será utilizado pela infraestrutura do projeto

Executar o projeto

Criar, na pasta src o arquivo app.ts que será o “gatilho” do projeto
Abrir a ferramenta de depuração do vscode a partir do atalho CTRL + SHIFT + D
Selecionar a opção “create a launch.json file” que irá criar um arquivo de referência para o depurador do projeto
Execute o projeto por meio do atalho F5 ou clicando no botão “Launch Program”
1. IMPORTANTE: caso ocorra o erro abaixo, comente a linha 15 do launch.json. Nest caso, lembre-se de SEMPRE de compilar o projeto antes de executar.
A execução do projeto será apresentada na tab TERMINAL
As impressões feitas via console.log serão apresentadas na tab DEBUG CONSOLE
A tab OUTPUT apresentará possíveis erros durante o processo de build.

A depuração serve para que a pessoa desenvolvedora possa acompanhar a execução do código. Isso é feito por meio de break points no código que levará o interpretador a pausar o código quando executar a linha marcada.]

Depurando o projeto

Para adicionar um break point, basta clicar na linha que deseja pausar no espaço à esqueda do número da linha como apresentado abaixo. Essa ação ira apresentar um círculo vermelho ao lado do número, que caracteriza o break point.

Outra forma de criar um break point é adicionando o termo debugger na linha desejada.

Da forma apresentada, ao executar o projeto, serão feitas duas pausas, uma na linha 10 e outra na linha 11.

Execute o projeto [atalho F5]
A primeira pausa ocorrerá na linha 10 e poderá ser observado que a variável sandijunior não possui valor algum pois ainda não foi executada a atribuição por meio do construtor.
Serão apresentadas as opções de controle do depurador, com seis opções:
- Continue (F5): segue a execução do programa até o próximo break point
  - Step Over (F10): pula a execução para a próxima linha sem “entrar” no comando a ser executado
  - Step Into (F11): segue a execução para “dentro” do comando a ser executado
  - Step Out (SHIFT + F11): pula a execução para “fora” do ponto a ser executado
  - Restart (CTRL + SHIFT + F5): reinicia o processo de execução
  - Stop (SHIFT + F5): para o processo de execução
Selecione a opção “Continue”
A próxima parada será na linha seguinte, linha 11. E será possível observar que a variável sandijunior possui os valores informados no construtor da linha 10.
Selecione novamente a opção “Continue”
O programa será executado até o fim sendo impresso o valor “Sandijunior” na tab DEBUG CONSOLE conforme apresentado anteriormente.

Utilizando múltiplos arquivos

Para facilitar a organização do projeto, como boa prática, cada classe é armazenada em um diferente arquivo. Porém, para que possamos utilizar as classes definidas em outro arquivo é necessário informar ao TS onde encontrar esses elementos.

Vamos então, para exemplificar, mover a classe Cachorro de volta para o arquivo cachorro.ts:

Mova a definição da classe Cachorro para o arquivo cachorro.ts adicionando o termo export:
Para que seja possível que a classe seja utilizada por outro arquivo, é necessário apresentá-la ao meio externo utilizando o termo export.
Remova a classe Cachorro do arquivo app.ts e adicione a referência de importação da classe Cachorro:
O termo import é adicionado para informar ao TS que a classe Cachorro a ser utilizada encontra-se no arquivo cachorro.ts que é nomeado após o termo from.
Execute o projeto e verifique que o resultado é o mesmo do último exemplo.

Referências

TypeScript: Documentation - Ferramentas TypeScript em 5 minutos (typescriptlang.org)

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

Last updated 2 years ago