O TypeScript está abrindo caminho como uma das linguagens de programação mais populares para organizações modernas.
TypeScript é um sobrescrito JavaScript compilado e estritamente tipado (construído sobre a linguagem JavaScript). Essa linguagem de tipagem estática, desenvolvida e mantida pela Microsoft, oferece suporte a conceitos orientados a objetos, como seu subconjunto, JavaScript.
Essa linguagem de programação de código aberto tem muitos casos de uso, como a criação de aplicativos da Web, de grande escala e móveis. O TypeScript pode ser usado para desenvolvimento de front-end e back-end. Ele também possui vários frameworks e bibliotecas que simplificam o desenvolvimento e estendem seus casos de uso.
Por que usar TypeScript com Node.js? Este artigo discutirá porque TypeScript é considerado “melhor” que JavaScript, como instalá-lo usando Node.js, configurar e criar um pequeno programa usando TypeScript e Node.js.
TypeScript com Node.js: Benefícios
- Tipo estático opcional: o JavaScript é tipado dinamicamente, o que significa que o tipo de dados de uma variável é determinado em tempo de execução e não durante o tempo de compilação. Por outro lado, o TypeScript oferece digitação estática opcional, o que significa que, uma vez declarada uma variável, ela não mudará seu tipo e apenas aceitará determinados valores.
- Previsibilidade: Ao lidar com TypeScript, há garantia de que tudo o que você definir permanecerá o mesmo. Por exemplo, se você declarar uma determinada variável como booleana, ela nunca poderá mudar para uma string ao longo do caminho. Como desenvolvedor, você tem a certeza de que suas funções permanecerão as mesmas.
- Fácil de detectar erros antecipadamente: o TypeScript detecta a maioria dos erros de tipo antecipadamente, portanto, sua probabilidade de passar para a produção é baixa. Isso reduz o tempo que os engenheiros gastam testando o código em estágios posteriores.
- Compatível com a maioria dos IDEs: TypeScript funciona com a maioria dos ambientes de desenvolvimento integrado (IDEs). A maioria desses IDEs fornece conclusão de código e realce de sintaxe. Este artigo usará o Visual Studio Code, outro produto da Microsoft.
- Código fácil de refatorar: você pode atualizar ou refatorar seu aplicativo TypeScript sem alterar seu comportamento. A presença de ferramentas de navegação e o IDE que entende seu código facilita a refatoração da base de código sem esforço.
- Utiliza pacotes existentes: Você não precisa criar tudo do zero; você pode usar pacotes NPM existentes com TypeScript. Essa linguagem também possui uma forte comunidade que mantém e cria definições de tipo para pacotes populares.
Como usar TypeScript com Node.js
Embora o TypeScript tenha essas vantagens, os navegadores modernos não podem ler seu código de forma simples. Portanto, o código TypeScript deve ser primeiro transpilado para código JavaScript para ser executado em navegadores. O código resultante terá a mesma funcionalidade do código TypeScript original e funcionalidades extras indisponíveis em JavaScript.
Pré-requisitos
- Node.js: Node é um ambiente de tempo de execução de plataforma cruzada que permite a execução de código JavaScript fora de um ambiente de navegador. Você pode verificar se o nó está instalado em sua máquina usando este comando;
nó -v
Caso contrário, você pode baixar o Node.js do site oficial. Execute o comando acima novamente após a instalação para verificar se ele foi bem configurado.
- Um gerenciador de pacotes de nós: você pode usar NPM ou Yarn. O primeiro é instalado por padrão quando você instala o Node.js. Usaremos o NPM como gerenciador de pacotes neste artigo. Use este comando para verificar sua versão atual;
npm -v
Instalando TypeScript com Node.js
Etapa 1: configurar uma pasta de projeto
Começaremos criando uma pasta de projeto para o projeto TypeScript. Você pode dar a esta pasta qualquer nome de sua preferência. Você pode usar esses comandos para começar;
mkdir typescript-node
cd typescript-node
Etapa 2: inicializar o projeto
Use npm para inicializar seu projeto usando este comando;
npm init -y
O comando acima criará um arquivo package.json. O sinalizador -y no comando diz ao npm para incluir os padrões. O arquivo gerado terá uma saída semelhante.
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Configurando TypeScript com Node.js
Etapa 1: instalar o compilador TypeScript
Agora você pode instalar o compilador TypeScript em seu projeto. Execute este comando;
npm install –save-dev typescript
A saída em sua linha de comando será algo semelhante a isto;
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
Observação: a abordagem acima instala o TypeScript localmente na pasta do projeto em que você está trabalhando. Você pode instalar o TypeScript globalmente em seu sistema, para não precisar instalá-lo toda vez que trabalhar em um projeto. Use este comando para instalar o TypeScript globalmente;
npm install -g typescript
Você pode verificar se o TypeScript foi instalado usando este comando;
tsc -v
Etapa 2: adicionar tipos de ambiente Node.js para TypeScript
TypeScript tem tipos diferentes, como Implicit, Explicit e Ambient. Os tipos de ambiente são sempre adicionados ao escopo de execução global. Use este comando para adicionar Tipos de Ambiente;
npm install @types/node –save-dev
Etapa 3: criar um arquivo tsconfig.json
Este é o arquivo de configuração que especifica todas as opções de compilação do TypeScript. Execute este comando que vem com várias opções de compilação definidas;
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Isso será enviado no terminal;
O arquivo tsconfig.json, que contém alguns padrões e comentários, será gerado.
arquivo tsconfig.json
Isto é o que configuramos:
- O rootDir é onde o TypeScript procurará nosso código. Nós o direcionamos para a pasta /src onde escreveremos nosso código.
- A pasta outDir define onde o código compilado é colocado. Esse código é configurado para ser armazenado na pasta build/.
Usando TypeScript com Node.js
Passo 1: Crie a pasta src e o arquivo index.ts
Agora temos a configuração básica. Agora podemos criar um aplicativo TypeScript simples e compilá-lo. A extensão de arquivo para um arquivo TypeScript é .ts. Execute esses comandos dentro da pasta que criamos nas etapas anteriores;
origem do mkdir
toque em src/index.ts
Etapa 2: adicionar código ao arquivo TypeScript (index.ts)
Você pode começar com algo simples como;
console.log('Hello world!')
Etapa 3: compilar o código TypeScript para o código JavaScript
Execute este comando;
npx tsc
Você pode verificar a pasta de compilação (build/index.js) e verá que um index.js foi gerado com esta saída;
TypeScript foi compilado em código JavaScript.
Etapa 4: execute o código JavaScript compilado
Lembre-se de que o código TypeScript não pode ser executado em navegadores. Assim, executaremos o código em index.js na pasta build. Execute este comando;
node build/index.js
Esta será a saída;
Etapa 5: configurar o TypeScript para compilar automaticamente para o código JavaScript
Compilar o código TypeScript manualmente sempre que você alterar seus arquivos TypeScript pode desperdiçar tempo. Você pode instalar ts-node (executa o código TypeScript diretamente sem esperar para ser compilado) e nodemon (verifica seu código em busca de alterações e reinicia automaticamente o servidor).
Execute este comando;
npm install --save-dev ts-node nodemon
Você pode então acessar o arquivo package.json e adicionar este script;
"scripts": {
"start": "ts-node ./src/index.ts"
}
Podemos usar um novo bloco de código para fins de demonstração;
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
Exclua o arquivo index.js (/build/index.js) e execute npm start.
Sua saída será semelhante a esta;
soma de 3 números
Configurar TypeScript Linting com eslint
Etapa 1: instalar o eslint
Linting pode ser útil se você quiser manter a consistência do código e detectar erros antes do tempo de execução. Instale o eslint usando este comando;
npm install --save-dev eslint
Etapa 2: inicializar o eslint
Você pode inicializar o eslint usando este comando;
npx eslint --init
O processo de inicialização o levará por várias etapas. Use a captura de tela a seguir para guiá-lo;
Terminado o processo, você verá um arquivo chamado .eslintrc.js com conteúdo semelhante a este;
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Etapa 3: execute o eslint
Execute este comando para verificar e lint todos os arquivos com a extensão .ts;
npx eslint . --ext .ts
Etapa 4: atualizar package.json
Adicione um script lint neste arquivo para linting automático.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript com Node.js: práticas recomendadas
- Mantenha o TypeScript atualizado: os desenvolvedores do TypeScript estão sempre lançando novas versões. Certifique-se de ter a versão mais recente instalada em sua pasta de máquina/projeto e aproveite os novos recursos e correções de bugs.
- Ativar modo estrito: você pode capturar os erros de programação comuns no tempo de compilação ao ativar o modo estrito no arquivo tsconfig.json. Isso reduzirá o tempo de depuração, levando a mais produtividade.
- Ativar verificações nulas estritas: você pode capturar todos os erros nulos e indefinidos no tempo de compilação ativando verificações nulas estritas no arquivo tsconfig.json.
- Use um editor de código compatível com TypeScript: existem muitos editores de código. Uma boa prática é escolher editores de código como VS Code, Sublime Text ou Atom que suportem TypeScript por meio de plug-ins.
- Use tipos e interfaces: com tipos e interfaces, você pode definir tipos personalizados que podem ser reutilizados em todo o projeto. Essa abordagem tornará seu código mais modular e fácil de manter.
Empacotando
Agora você tem a estrutura básica de um aplicativo criado com TypeScript em Node.js. Agora você pode usar os pacotes regulares do Node.js, mas ainda assim, escrever seu código em TypeScript e aproveitar todos os recursos extras que acompanham o último.
Se você está apenas começando no TypeScript, certifique-se de entender as diferenças entre TypeScript e JavaScript.
