Como usar bibliotecas de terceiros com TypeScript?

Oi, Dev!

No ecossistema do JavaScript e TypeScript, as bibliotecas de terceiros são faróis que iluminam nosso caminho, acelerando o desenvolvimento e fornecendo soluções prontas para problemas comuns no desenvolvimento de uma aplicação robusta.

Os ganhos de tempo e eficiência são inegáveis, porém a incorporação de bibliotecas também causa desafios relacionados à tipagem estática — que vamos esclarecer mais pra frente.

Assim, neste artigo, você vai aprender sobre:

• Integração e importância das bibliotecas de terceiros em JavaScript/TypeScript;
• Desafios de tipagem estática ao integrar bibliotecas;
• Utilização dos pacotes @types para melhorar a compreensão do TypeScript sobre bibliotecas;
• Como lidar com bibliotecas sem suporte a TypeScript;
• Boas práticas para manutenção de tipos.

E aí, vamos entender mais sobre bibliotecas de terceiros e TypeScript?

Como instalar uma biblioteca com Typescript?

Primeiro, me conta: você já tentou instalar uma biblioteca com Typescript?

Vamos fazer isso agora! Como exemplo, utilizaremos a biblioteca Lodash.

A biblioteca Lodash ajuda as pessoas desenvolvedoras a escreverem código de forma mais eficiente e legível.

Ela simplifica tarefas comuns, como iteração de arrays, manipulação de objetos, tratamento de strings, e gerenciamento de funções, oferecendo uma API consistente e otimizada para facilitar o desenvolvimento.

Seguiremos o passo a passo da instalação e integração da biblioteca, explicando para você como solucionar os desafios que surgirem no caminho.

Assim, você sairá deste artigo sabendo como utilizar bibliotecas em seus projetos profissionais ou pessoais!

Agora, vamos colocar as mãos na massa e exemplificar esse processo com a renomada biblioteca Lodash, mencionada anteriormente.

Antes de mais nada, precisamos preparar nosso projeto para uma jornada prática:

1. No terminal, crie um novo projeto

mkdir meu-projeto-ts
cd meu-projeto-ts
npm init -y

2) Instale o TypeScript e o Lodash

npm install typescript lodash

Neste ponto, precisaremos criar o arquivo tsconfig.json, que é usado para configurar as opções do compilador TypeScript (tsc).

Ele fornece informações sobre como o TypeScript deve compilar o nosso código.

3) Crie o tsconfig.json na raiz do nosso projeto e adicione o seguinte conteúdo

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

Se você quiser ler mais sobre essas configurações, temos um artigo do blog da Alura te esclarece todos os ponto sobre Typescript no Front-end.

Pronto! Concluímos a instalação da biblioteca com Typescript. Agoea, precisamos testar se ela está funcionando. Usamos a Lodash como exemplo, mas esses passos valem para qualquer biblioteca que você necessite instalar.

4) Crie o arquivo app.ts e insira o seguinte código para realizar nosso teste

// Arquivo app.ts sem os tipos do Lodash
import _ from 'lodash';

const resultado = _.chunk(['a', 'b', 'c', 'd'], 2);
console.log('Array Particionado:', resultado);

// Adicionaremos a seguinte linha para provocar um erro de tipo
const primeiroElemento = _.head(resultado);

Neste ponto, você vai perceber uma situação interessante. Ao integrar a biblioteca Lodash em nosso projeto TypeScript, inicialmente utilizamos a função _.chunk para particionar um array.

Tudo parece ir bem, e até imprimimos o resultado no console para ter uma ideia da execução.

No entanto, decidimos provocar um erro de tipo. Introduzimos a linha const primeiroElemento = _.head(resultado);, onde tentamos acessar o primeiro elemento do array particionado sem a definição adequada de tipos.

Agora, é necessário compilar nosso código TypeScript com o comando:

npx tsc

Como esperado, nos deparamos com um erro de compilação relacionado à linha adicionada, que provocou um erro de tipo.

Execute o código JavaScript com o seguinte comando:

node app.js

Enquanto observamos a saída do array particionado, também nos deparamos com um erro relacionado à linha que deliberadamente adicionamos para provocar um erro de tipo.

Essa ação tem o propósito de ilustrar como o TypeScript atua como nosso aliado, nos alertando sobre possíveis problemas durante o desenvolvimento.

Agora, considere que você está integrando a biblioteca Lodash em seu projeto TypeScript.

No entanto, ao tentar usá-la, o TypeScript reclama da falta de tipos, dificultando a interação harmoniosa entre seu código e a biblioteca externa.

Pacotes @types: nossa bússola no ecossistema TypeScript

Aqui é onde entram os pacotes @types, como verdadeiras bússolas no vasto ecossistema TypeScript.

Esses pacotes oferecem definições de tipos para bibliotecas JavaScript, atuando como guias que ajudam o TypeScript a entender profundamente as estruturas e funções dessas bibliotecas.

Integração dos tipos com Lodash

Para resolver o problema de tipos do Lodash, vamos usar os pacotes @types.

Quando falamos de pacotes, nos referimos a um conceito mais amplo, pois inclui outras ferramentas além das bibliotecas.

O próximo passo é simples e direto ao ponto: instale o pacote @types/lodash usando o npm.

1) Execute o seguinte comando

npm install --save-dev @types/lodash

2) Atualize a mensagem do arquivo app.ts, pois agora não receberemos erros:

// Arquivo app.ts sem os tipos do Lodash
import _ from 'lodash';

const resultado = _.chunk(['a', 'b', 'c', 'd'], 2);
console.log('Array Particionado:', resultado);

// Agora, não haverá erro de tipo aqui, pois os tipos do Lodash estão disponíveis
const primeiroElemento = _.head(resultado);

Com os tipos do Lodash devidamente integrados, podemos respirar com alívio. Não vamos mais nos deparar com erros de tipo, pois o TypeScript agora reconhece e entende perfeitamente as estruturas e funções do Lodash.

É como se esses tipos integrados agissem como um tradutor especializado, garantindo uma comunicação fluida e livre de mal-entendidos entre o TypeScript e as funcionalidades do Lodash.

Isso mostra como os pacotes @types salvam o dia. Pronto! Agora, a biblioteca Lodash está pronta para ser utilizada no projeto.

Como encontrar pacotes @types

Desenvolver em TypeScript implica utilizar bibliotecas JavaScript existentes, e garantir a correta definição de tipos é essencial, como já comentei.

E para encontrar os pacotes @types relacionados à biblioteca Lodash, é super simples:

• 1 - Dê um pulo no site do npm, que é o lugar certo para encontrar tudo o que você precisa nesse momento.

• 2 - Na barra de pesquisa do site, digite @types/lodash que irá aparecer a opção para clicar e acessar a página do pacote - ao chegar lá, você encontra informações úteis sobre a versão do pacote e como instalá-lo.

• 3 - Rodar o seguinte comando no seu gerenciador de pacotes npm:

npm install --save-dev @types/lodash

Com esse comando, você instala o pacote @types/lodash como uma dependência de desenvolvimento no seu projeto.

É sempre bom conferir a compatibilidade da versão, verificando se a versão do pacote @types/lodash está alinhada com a versão da biblioteca Lodash (ou qualquer outra que você está utilizando).

Isso é importante para garantir que os tipos estejam certinhos e combinem com a versão correta da biblioteca.

Assim, você vai encontrar e instalar os pacotes @types para a biblioteca Lodash. E, claro, é sempre bom ler a documentação oficial do pacote @types/lodash para entender mais detalhes sobre como usar e suas funcionalidades.

Agora você já sabe como instalar uma biblioteca com Typescript e corrigir possíveis erros de tipo!

Como instalar bibliotecas sem suporte a TypeScript?

Se você está utilizando uma biblioteca que não possui um pacote @types disponível, a estratégia é usar o declare module para adicionar tipos manualmente.

Crie um arquivo de declaração (.d.ts) e adicione as definições necessárias; no exemplo abaixo usei um exemplo de biblioteca fictícia como exemplo.

declare module 'biblioteca-ficticia' {
  function metodoFicticio(param: string): number;
  // Pode adicionar outras definições conforme a necessidade
}

Como criar definições de tipos?

Se você quiser, pode contribuir com a comunidade TypeScript, criando e publicando suas próprias definições de tipo.

Antes de começar, é crucial entender como a biblioteca funciona e quais são os tipos de dados que ela manipula.

Explore a documentação e o código-fonte para ter uma compreensão sólida. Isso ajudará você a tirar o máximo proveito dela e evitar possíveis problemas no futuro.

Assim como fizemos no exemplo anterior, crie um arquivo .d.ts. Especifique os tipos necessários para as funções, objetos e qualquer outra coisa que você deseja tipar.

Você pode publicar suas definições de tipo em um repositório público no GitHub ou em uma plataforma semelhante.

Isso permite que outras pessoas desenvolvedoras aproveitem e contribuam para melhorar ainda mais os tipos.

Também, considere contribuir para o DefinitelyTyped! O repositório DefinitelyTyped é um ponto central para definições de tipo em TypeScript. Contribua para ampliar ainda mais o alcance das suas definições.

Contribuir para um projeto de código aberto como o DefinitelyTyped é uma ótima maneira de aprender mais sobre TypeScript, JavaScript e as melhores práticas de desenvolvimento.

Você pode receber feedbacks valiosos de outros colaboradores e ganhar experiência prática na manutenção de código compartilhado.

E colaborar em um projeto conhecido pode aumentar sua visibilidade na comunidade de pessoas desenvolvedoras, beneficiando sua reputação profissional e oportunidades de colaboração futuras. Muito bom, né?

Técnicas para tipagem de bibliotecas de terceiros

Você está lá, imerso no emocionante mundo do desenvolvimento, e de repente, se depara com uma biblioteca que parece ter tipos apenas pela metade.

É como estar em um filme com uma trama emocionante, mas algumas páginas do roteiro estão faltando. Não se preocupe, há uma técnica para lidar com essa situação!

Essa técnica envolve a habilidade de estender os tipos de forma incremental, preenchendo as lacunas de informação que possam existir.

Em termos práticos, é como se você estivesse completando o roteiro do filme para entender melhor a história.

Você pode criar um arquivo de definição de tipos TypeScript (.d.ts), na raiz do seu projeto ou em um diretório onde o TypeScript o encontrará automaticamente.

No código abaixo, fazemos uso da construção declare module para adicionar informações essenciais aos tipos já existentes na biblioteca de terceiros.

Veja um exemplo específico para ilustrar como essa extensão de tipos pode ser realizada:

declare module 'biblioteca-com-tipos-parciais' {
  interface TipoAdicional {
    novoCampo: string;
  }

  export function funcaoExtendida(param: TipoAdicional): void;
}

No trecho de código acima, estamos utilizando o truque do declare module para adicionar informações ao tipo existente da biblioteca.

No exemplo, criamos uma interface TipoAdicional que contém um novo campo chamado novoCampo. Depois, exportamos uma função chamada funcaoExtendida que recebe um parâmetro com base nessa interface estendida.

Quais as boas práticas com bibliotecas com Typescript?

Pense só: seu projeto está repleto de bibliotecas de terceiros, mas, oh não! As definições de tipo estão desatualizadas! Que dilema, não é mesmo?

Aqui está o segredo: sempre que possível, atualize suas definições de tipo - deixe elas fresquinhas como pão quente.

Use ferramentas como @types/update para facilitar esse processo e garantir que suas definições estejam sempre em sincronia com as últimas versões das bibliotecas de terceiros.

Demonstração na prática

Ao integrar uma biblioteca, como a Lodash, você pode se deparar com a necessidade de garantir que as versões estejam alinhadas.

Olha só esse exemplo do que poderia ser o seu arquivo package.json:

{
  "dependencies": {
    "lodash": "^4.17.21",
    // Outras dependências aqui…
  },
  "devDependencies": {
    "@types/lodash": "^4.14.168",
    // Outros tipos aqui…
  }
}

Nesse cenário, os gerenciadores de dependências, como Yarn ou npm, são sua melhor ferramenta para assegurar que as versões das bibliotecas principais e dos pacotes @types estejam alinhadas.

Os gerenciadores são importantes, pois:

• Organizam o código;
• Possibilitam a instalação das versões corretas;
• Resolvem potenciais conflitos no projeto.

Sempre que possível, modere o número de bibliotecas no projeto. Evite incluir bibliotecas desnecessárias e opte por aquelas que são verdadeiramente essenciais para a aplicação.

Essa abordagem não apenas reduz a complexidade, mas também minimiza a chance de conflitos entre bibliotecas no futuro.

Escolha com sabedoria, preze por um código enxuto e ganhe um desenvolvimento mais tranquilo!

Conclusão

Uau! Exploramos várias possibilidades ao desbravar as bibliotecas de terceiros com TypeScript.

Ao longo deste artigo, mergulhamos nas águas desafiadoras da integração, enfrentando problemas e revelando soluções.

Aprendemos a importância dos pacotes @types, verdadeiras bússolas que nos guiam no ecossistema TypeScript.

Descobrimos como resolver o problema de integração com bibliotecas populares, como Lodash, usando esses pacotes.

No contexto de um problema real, navegamos pelas estratégias para lidar com bibliotecas sem suporte a TypeScript, criando nossas próprias definições de tipo quando necessário.

A teoria se transformou em prática ao explorarmos o uso de declare module e módulos de declaração para adicionar tipos a pacotes não tipados ou parcialmente tipados.

Fechamos com chave de ouro, compartilhando boas práticas essenciais para manter definições de tipo atualizadas, garantindo um código limpo e seguro ao integrar bibliotecas de terceiros.

Agora é com você! Com o conhecimento e habilidades que adquiriu, você está preparado para enfrentar qualquer desafio ao incorporar bibliotecas de terceiros em seus projetos TypeScript. Aplique essas técnicas, experimente e compartilhe seus sucessos nas redes sociais. Marque os perfis da Alura e use a hashtag #AprendiNaAlura. Ficaremos contentes em ver os seus resultados!

Além disso, convido você a conferir nossas formações disponíveis nos seguintes links:

• Formação Aplique TypeScript no front-end
• Formação TypeScript

Nos vemos por aí!

Referências

• Lodash (inglês, gratuito, site): site da popular biblioteca Lodash, que ajuda as pessoas desenvolvedoras a escreverem código de forma mais eficiente e legível. Ela simplifica tarefas comuns, como iteração de arrays, manipulação de objetos, tratamento de strings, e gerenciamento de funções, oferecendo uma API consistente e otimizada para facilitar o desenvolvimento. O site oferece a documentação da biblioteca.
• Site do npm (inglês, gratuito, documentação): site que oferece a documentação do npm, ferramenta popular e bastante utilizada no desenvolvimento de muitas empresas.
• GitHub (inglês, gratuito, ferramenta): site do GitHub, uma das ferramentas de upload e versionamento de projetos e utilizada internacionalmente por empresas e pessoas desenvolvedoras.
• Repositório DefinitelyTyped (inglês, gratuito, ferramenta): Repositório DefinitelyTyped disponível no GitHub. É um acervo interessante que auxilia o desenvolvimento de projetos que utilizam Typescript.
• TypeScript - how to deal with the types of third-party libraries (inglês, gratuito, artigo): este artigo discute como lidar com os tipos de bibliotecas de terceiros ao desenvolver projetos TypeScript.