A Dupla Dinâmica para Web Dev

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 criar uma conferência discada com equipes Microsoft

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

  Inicie sua carreira como analista de dados com estes 12 cursos e recursos

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).

  Como combinar vários subreddits com multireddits

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.