Os requisitos básicos para que possamos utilizar TypeScript em um projeto são
- Instalar NodeJS
- Criar um diretório (pasta) para seu projeto
- Configurar o NPM no projeto
- Adicionar TypeScript como dependência do projeto
- Configurar
tsconfig.json
no projeto - Nosso arquivo principal
- Nossos scripts
- Concluindo
Então vamos lá.
Instalar NodeJS
Para instalar o NodeJS recomendo acessar o site oficial, faça o download da última versão LTS e instale em seu computador.
Criar um diretório para seu projeto
Isso pode ser feito utilizando a interface gráfica do seu sistema operacional ou pelo terminal de comandos e caso opte pelo terminal, abra seu VSCode e em seguida abra o terminal clicando no menu superior
"Terminal > New terminal" e então vamos para o comando
Dica
Não é uma boa prática o uso de caracteres especiais como acentos ou espaços para evitar erros de codificação. O ideal é que sejam utilizadas apenas letras e hífen para separação entre palavras.
mkdir nome-do-projeto
Após criado, vamos abrir o projeto recém criado no VSCode
code nome-do-projeto -r
O parâmetro -r
indica que queremos abrir usando a mesma janela, evitando termos 2 janelas do VSCode abertas.
Configurar o NPM no projeto
O NPM (Node Package Manager) é o gerenciador de pacotes e com ele podemos usar bibliotecas escritas por outras pessoas ou publicar nossas próprias bibliotecas (escritas em JavaScript ou TypeScript) para que outros projetos usem.
Bibliotecas usadas são dependências, e se tornam necessárias para que nosso código funcione, além disso também devemos informar suas respectivas versões.
Quando executamos o comando npm install
estamos fazendo download destas dependências.
Também definimos scripts
úteis. São comandos que deixarão nosso fluxo de desenvolvimento mais prático e fazemos isso configurando um objeto { "chave": "valor" }
onde a chave é um apelido que podemos escolher como desejarmos, já o valor será o comando que será executado quando invocado através do comando npm run chave
Ao executar
npm init
Responderemos algumas perguntas
- Nome do projeto, padrão é o nome do diretório
- Versão do projeto, padrão é
1.0.0
- Descrição do projeto, padrão em branco
- Ponto de entrada principal, o padrão é
index.js
- Comando para execução de testes
- Link do repositório git, padrão em branco
- Palavras chaves, padrão em branco
- Autor, padrão em branco
- Licença, padrão é ISC mas recomendo a GPLv3 Tradução
Adicionar TypeScript como dependência do projeto
npm i -D typescript
O parâmetro -D
indica que será uma dependência necessária apenas durante o desenvolvimento e não depois que estiver em produção. Este é o caso do TypeScript, visto que enviamos para produção apenas o código JavaScript gerado a partir do que escrevemos em TypeScript.
Configurar tsconfig.json
no projeto
Este arquivo indica que esse diretório é a raiz do projeto TypeScript e especifica os arquivos raiz e as configurações de compilação necessárias para o projeto, mais informações neste link
Nosso arquivo principal
Vamos cria-lo com o seguinte comando
code src/index.ts
Em seguida vamos salva-lo.
Agora que temos nosso arquivo no diretório src
, vamos alterar nosso tsconfig.json
descomentando as linhas 48
, 50
e 56
e configurando desta forma
tsconfig.json
"sourceMap": true,
"outDir": "./dist",
"sourceRoot": "./src",
Isso define que o compilador deve procurar arquivos no diretório "src"
e o resultado deverá ser salvo no diretório "dist"
.
Nossos scripts
Um padrão muito utilizado são os comandos "dev"
e "build"
, faremos isso alterando o objeto "scripts": {}
no arquivo package.json
, com os comandos tsc
e tsc -watch
, respectivamente.
package.json
"scripts": {
"build": "tsc",
"dev": "tsc -watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
A partir de agora podemos desenvolver utilizando o comando npm run dev
e toda vez que alterarmos algum arquivo dentro do diretório "src"
, o compilador do TypeScript irá entrar em ação, colocando o resultado no diretório "dist"
.
Concluindo
Para saber se está tudo funcionando, adicione um log
src/index.ts
console.log('foi')
E execute
npm run build
Provavelmente foi criado um diretório "dist"
com um arquivo index.js
e agora executamos
node dist/index.js
Se você viu escrito "foi"
no seu terminal, tivemos êxito e temos nosso projeto configurado!
Top comments (0)