O TypeScript está se consolidando como uma das opções de linguagem de programação mais procuradas por organizações inovadoras.
TypeScript é uma extensão do JavaScript, caracterizada por ser compilada e fortemente tipada, construída sobre a base do JavaScript. Esta linguagem de tipagem estática, desenvolvida e mantida pela Microsoft, suporta os princípios da programação orientada a objetos, assim como seu predecessor, o JavaScript.
Esta linguagem de código aberto encontra aplicações diversas, incluindo a criação de aplicativos web, projetos de larga escala e aplicativos móveis. O TypeScript é adaptável tanto ao desenvolvimento front-end quanto back-end, e ainda oferece uma variedade de frameworks e bibliotecas que simplificam o processo de desenvolvimento e ampliam suas funcionalidades.
Por que optar pelo TypeScript em conjunto com Node.js? Este artigo explorará as razões pelas quais o TypeScript é considerado “superior” ao JavaScript, demonstrará como instalar o TypeScript utilizando Node.js, como configurá-lo e como criar um programa básico combinando TypeScript e Node.js.
TypeScript com Node.js: Vantagens
- Tipagem estática opcional: Diferente do JavaScript, que possui tipagem dinâmica (o tipo de dados de uma variável é determinado em tempo de execução), o TypeScript oferece tipagem estática opcional. Isso significa que, após declarar uma variável, seu tipo é fixo e ela aceitará somente valores compatíveis.
- Previsibilidade: O uso do TypeScript garante a consistência dos tipos definidos. Por exemplo, uma variável declarada como booleana não poderá se transformar em uma string no decorrer do programa. Isso assegura que as funções mantenham sua integridade e comportamento.
- Detecção precoce de erros: O TypeScript é capaz de identificar muitos erros de tipo já durante o desenvolvimento, reduzindo a probabilidade de problemas chegarem à produção. Isso otimiza o tempo gasto pelos engenheiros em testes nas fases posteriores.
- Compatibilidade com IDEs: O TypeScript integra-se perfeitamente com a maioria dos Ambientes de Desenvolvimento Integrado (IDEs), que oferecem recursos como autocompletar código e realce de sintaxe. Este artigo usará o Visual Studio Code, também um produto da Microsoft.
- Refatoração facilitada: É possível atualizar ou refatorar um aplicativo TypeScript sem alterar seu comportamento. As ferramentas de navegação e o suporte do IDE facilitam a refatoração do código sem gerar dificuldades adicionais.
- Aproveitamento de pacotes existentes: Não é necessário começar do zero. O TypeScript permite o uso de pacotes NPM já existentes. A linguagem também conta com uma comunidade ativa que mantém e cria definições de tipo para pacotes populares.
Como Implementar TypeScript com Node.js
Apesar das vantagens que o TypeScript oferece, os navegadores web não conseguem interpretar seu código diretamente. Portanto, o código TypeScript precisa ser transpilado para JavaScript antes de ser executado em navegadores. O código resultante terá funcionalidade idêntica ao código TypeScript original, incluindo funcionalidades extras não disponíveis em JavaScript.
Pré-requisitos
- Node.js: Node é um ambiente de tempo de execução multiplataforma que permite executar código JavaScript fora de um ambiente de navegador. Para verificar se o Node está instalado, utilize o seguinte comando:
node -v
Caso o Node não esteja instalado, ele pode ser baixado do site oficial. Após a instalação, execute o comando acima novamente para confirmar sua configuração adequada.
- Um gerenciador de pacotes Node: Você pode usar NPM ou Yarn. O NPM é instalado por padrão junto com o Node.js. Neste artigo, usaremos o NPM. Para verificar a versão do NPM, execute:
npm -v
Instalando TypeScript com Node.js
Passo 1: Criação da pasta do projeto
Começaremos criando uma pasta para o projeto TypeScript. O nome desta pasta pode ser qualquer um de sua preferência. Para criar e acessar a pasta, utilize os seguintes comandos:
mkdir typescript-node
cd typescript-node
Passo 2: Inicialização do projeto
Inicialize seu projeto usando npm com o seguinte comando:
npm init -y
O comando acima gera um arquivo `package.json`. O sinalizador `-y` instrui o npm a usar os valores padrão. O arquivo resultante será algo similar a isso:
{
"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
Passo 1: Instalação do compilador TypeScript
Instale o compilador TypeScript em seu projeto com o comando:
npm install –save-dev typescript
A saída no terminal será algo parecido com:
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. Para instalar o TypeScript globalmente em seu sistema (sem a necessidade de instalá-lo toda vez), use o seguinte comando:
npm install -g typescript
Para verificar se o TypeScript foi instalado, use:
tsc -v
Passo 2: Adição dos tipos de ambiente Node.js para TypeScript
O TypeScript utiliza diversos tipos, como Implícito, Explícito e Ambiente. Os tipos de ambiente são adicionados ao escopo de execução global. Para adicionar Tipos de Ambiente, utilize o seguinte:
npm install @types/node –save-dev
Passo 3: Criação do arquivo `tsconfig.json`
Este é o arquivo de configuração que especifica todas as opções de compilação do TypeScript. Use o comando abaixo, que já inclui algumas opções de compilação pré-definidas:
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
Isso irá gerar a seguinte mensagem no terminal:
Um arquivo `tsconfig.json`, com valores padrão e comentários, será gerado.
Arquivo `tsconfig.json`
Configuramos:
- `rootDir`: Define o diretório onde o TypeScript buscará o código. Neste caso, apontamos para a pasta `/src`, onde o código será escrito.
- `outDir`: Define onde o código compilado será armazenado. Este código será colocado na pasta `build/`.
Utilizando TypeScript com Node.js
Passo 1: Criação da pasta `src` e do arquivo `index.ts`
Com a configuração básica pronta, podemos criar um aplicativo simples em TypeScript e compilá-lo. A extensão para arquivos TypeScript é `.ts`. Dentro da pasta que criamos anteriormente, utilize os seguintes comandos:
mkdir src
touch src/index.ts
Passo 2: Adição de código ao arquivo TypeScript (`index.ts`)
Você pode começar com algo básico como:
console.log('Olá Mundo!')
Passo 3: Compilação do código TypeScript para JavaScript
Execute este comando:
npx tsc
Verifique a pasta de compilação (`build/index.js`). Um arquivo `index.js` com o seguinte conteúdo deve ter sido gerado:
O código TypeScript foi transformado em JavaScript.
Passo 4: Execução do código JavaScript compilado
Como o código TypeScript não pode ser executado diretamente em navegadores, vamos executar o arquivo `index.js` na pasta `build`. Utilize o comando:
node build/index.js
A saída será:
Passo 5: Configuração da compilação automática do TypeScript para JavaScript
Compilar o código TypeScript manualmente a cada alteração pode ser trabalhoso. Para automatizar esse processo, instale o `ts-node` (executa o código TypeScript diretamente sem esperar a compilação) e o `nodemon` (monitora mudanças no código e reinicia o servidor automaticamente).
Execute o seguinte comando:
npm install --save-dev ts-node nodemon
Edite o arquivo `package.json` e adicione o script:
"scripts": {
"start": "ts-node ./src/index.ts"
}
Agora, para fins de exemplo, adicione este código no arquivo `index.ts`:
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`.
A saída deverá ser:
soma de 3 números
Configurando o Linting do TypeScript com ESLint
Passo 1: Instalação do ESLint
O Linting é útil para manter a consistência do código e detectar erros antes do tempo de execução. Instale o ESLint usando o comando:
npm install --save-dev eslint
Passo 2: Inicialização do ESLint
Inicialize o ESLint com o comando:
npx eslint --init
O processo de inicialização irá guiá-lo por várias etapas. Utilize a seguinte captura de tela como referência:
Ao finalizar o processo, você verá um arquivo chamado `.eslintrc.js` com um conteúdo similar a:
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
Passo 3: Execução do ESLint
Execute o comando abaixo para verificar e analisar todos os arquivos com extensão `.ts`:
npx eslint . --ext .ts
Passo 4: Atualização do arquivo `package.json`
Adicione um script de lint para realizar a análise automaticamente:
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript com Node.js: Boas Práticas
- Mantenha o TypeScript atualizado: Os desenvolvedores do TypeScript estão sempre lançando novas versões. Certifique-se de instalar a versão mais recente em seu projeto para aproveitar novos recursos e correções de bugs.
- Habilite o modo estrito: Ao ativar o modo estrito no arquivo `tsconfig.json`, você pode detectar erros de programação comuns durante o tempo de compilação, reduzindo o tempo de depuração e aumentando a produtividade.
- Habilite verificações nulas estritas: Ative as verificações nulas estritas no arquivo `tsconfig.json` para capturar todos os erros relacionados a valores nulos ou indefinidos em tempo de compilação.
- Utilize um editor de código com suporte ao TypeScript: Existem diversos editores de código disponíveis. Utilize um editor como VS Code, Sublime Text ou Atom que ofereça suporte ao TypeScript através de plugins.
- Use tipos e interfaces: Ao utilizar tipos e interfaces, você pode definir tipos personalizados que podem ser reutilizados em todo o projeto. Isso torna seu código mais modular e fácil de manter.
Conclusão
Agora você possui a estrutura básica de um aplicativo criado com TypeScript em Node.js. Você pode utilizar os pacotes regulares do Node.js, mas escrever seu código em TypeScript e aproveitar todas as funcionalidades adicionais que ele oferece.
Se você está começando com TypeScript, certifique-se de entender bem as diferenças entre TypeScript e JavaScript.