Como usar TypeScript com Node.js – Parte 2

Na primeira parte desta série nós vimos o básico de TypeScript e como utilizar ele para adicionar tipagem em parâmetros, retornos de função e até para garantir segurança maior com o strict mode.

No artigo de hoje, vamos avançar nos nossos estudos deste superset tão famoso para TypeScript.

Atenção: este é um post intermediário, para alguém que já tem conhecimentos básicos em Node.js. Ele já vai direto ao ponto, para quem precisa de algo com mais didática, recomendo começar com esse.

#1 – Union Types

Falamos de tipagem estática para parâmetros e retorno de funções no último artigo e também do coringa ‘any’ quando queremos manter a tipagem dinâmica, mesmo como strict mode ligado em nosso tsconfig.json.

Mas e se queremos sim ter tipos, mas mais de um? Algumas linguagens com tipagem forte permite a chamada sobrecarga de métodos (overload), inexistente no JavaScript.

O TypeScript permite o uso de Union Types, que nada mais são do que diferentes tipos, mas ainda estáticos para suas variáveis, como abaixo.

Note que defini mais de um tipo para o parâmetro num1, através do uso do pipe (‘|’). No entanto, o TypeScript me obriga a fazer checagem de tipo com um if quando uso Union Types, como você pode ver que fiz no código acima.

Se eu não fizer, ele irá me gerar um erro.

Ou seja, ele me acaricia com uma mão, e me bate com a outra, hehe.

Ainda na linha de Union Types, o TypeScript possui os Type Aliases, que são apelidos para Union Types.

Assim, posso criar um novo tipo a partir de dois outros possíveis, como abaixo, usando a keyword nova do TS chamada type.

Assim, onde antes eu usaria o Union Type, agora posso usar o Type Alias que chamei de NumberOrString (bem sugestivo).

#2 – Tipos de objetos

Até aqui ficamos mexendo apenas com variáveis simples como números e strings. Mas e quanto aos objetos? Como fazer que a estrutura e tipo dos objetos seja respeitada utilizando TypeScript?

Quando você passa um objeto por parâmetro, você pode definir a sua estrutura no mesmo lugar em que declararia o seu tipo, como abaixo.

Note que o código é extremamente autoexplicativo: a função cadastrar espera receber um objeto cliente com um nome (string) e uma data de nascimento (Date).

Aqui, com apenas este trecho de código, não vai ficar evidente uma das maiores vantagens desta abordagem e programação com JS que é o ganho com o auto-complete do VS Code.

Uma vez que eu defini a estrutura do meu objeto, o VS Code consegue me sugerir as suas propriedades quando eu estou manipulando o mesmo no seu interior, coisa que geralmente não aconteceria, me forçando a decorar as informações ou ficar consultando frequentemente.

Essa vantagem da tipagem estática, para mim, supera as demais.

E ela pode ir além, juntando com o conceito de Alias Type que mostrei na seção anterior, que eu posso usar para definir um novo tipo de objeto, como abaixo.

Olha que bacana, criamos uma struct à “moda C”, hehehe.

Mas tem outro objeto que ainda não falamos que também se beneficia da segurança fornecida pela tipagem estática que são os arrays.

Em TypeScript, podemos definir o tipo de dado que deve estar presente no array desta forma.

Aqui estou dizendo que a constante ‘numeros’ é do tipo ‘number[]’ (number array), ou seja, que somente numbers podem ser armazenados no seu interior, acabando com aquela festa do array de qualquer coisa e tornando seu código mais error proof.

Com isto tudo que vimos até o momento, já me sinto confiante para lhe explicar como usar TypeScript em um projeto real.

Curso Node.js e MongoDB
Curso Node.js e MongoDB

#3 – TypeScript com Node.js

Primeiro, crie uma pasta e vamos configurar o nosso projeto Node.js. Nesta pasta, rode o comando tsc –init para criar o arquivo de configuração do TypeScript e npm init para criar o arquivo de configuração do Node.js.

Vamos criar uma Web API REST aqui, como exemplo, e para isso vamos precisar da dependência do Express e do body-parser, instale-as.

Agora, crie o nosso clássico app.js para programarmos uma aplicação ExpressJS. Ou melhor, crie um app.ts, pois vamos usar TypeScript aqui.

Você vai notar que já irá aparecer um erro aqui, no comando require, pois ele não é nativo do JavaScript, mas sim do Node.js e portanto o TypeScript não o conhece.

Para que o TypeScript conheça os tipos existentes no Node.js, precisamos instalar esta dependência, mas somente em ambiente de desenvolvimento, visto que TS serve para codificarmos melhor, certo?

O parâmetro –save-dev salvará esta dependência somente no seu ambiente de desenvolvimento.

Mas o que é esse @types/node afinal?

Todos os pacotes @types são extensões de pacotes já existentes no NPM para que eles suporte TypeScript, fornecendo, entre outras coisas, os tipos definidos para estes pacotes. Com @types/node, o TS irá conseguir entender sintaxe específica do Node.js, como nosso comando require.

E se quisermos oferecer suporte a TS no Express também, podemos instalar o @types dele, o que nos dará não apenas suporte aos seus tipos, mas a minha tão amada funcionalidade de code complete no VS Code.

Não esqueça de sempre instalar em ambiente de desenvolvimento, para não pesar em produção desnecessariamente.

O mais legal é que atualmente existe suporte com @types à maioria das dependências mais populares do NPM, tornando o uso com TS muito mais interessante e produtivo que no passado.

Mas para que consigamos desbloquear esses poderes, é necessário fazer uma configuração no tsconfig, deixando-o como abaixo:

Aqui, mudei o target para ES6, uma versão bem mais interessante de JavaScript e que o Node.js possui suporte, bem como adicionei o moduleResolution configurado para Node, pois por padrão o TS foi criado para JavaScript client-side.

Agora, o último passo é deixarmos de usar require para usarmos a diretiva import, mais moderna e que habilita o carregamento dos types que instalamos.

Se você testar agora, ao escrever “app.” o VS Code vai lhe sugerir tudo que pode fazer com o objeto app do Express.

Demais, não?

Nas próximas lições, vamos avançar na construção desta WebAPI com Express e TypeScript. Clique aqui para ler!

Para conhecer meu curso completo de Desenvolvimento Web Full Stack JS, clique no banner abaixo!

Curso FullStack
Curso FullStack

Publicado por

Luiz Duarte

Pós-graduado em computação, professor, empreendedor, autor, Agile Coach e programador nas horas vagas.