DEV Community

Vinícius Cristofari Barbosa
Vinícius Cristofari Barbosa

Posted on

TypeScript para checar JavaScript

TypeScript é uma linguagem de programação que adiciona tipos estáticos ao JavaScript, permitindo que os desenvolvedores detectem e corrijam erros em tempo de compilação. Mas você sabia que também é possível usar TypeScript para checar arquivos JavaScript? Neste post, vou mostrar como fazer isso e quais são as vantagens dessa abordagem.

Por que usar TypeScript para checar JavaScript?

JavaScript é uma linguagem dinâmica e flexível, mas isso também pode trazer alguns problemas. Por exemplo, se você tentar acessar uma propriedade que não existe em um objeto, ou passar um argumento de um tipo errado para uma função, você pode obter resultados inesperados ou erros difíceis de depurar. Além disso, JavaScript não tem suporte nativo para ferramentas de documentação, refatoração e autocompletar, o que pode prejudicar a produtividade e a qualidade do código.

TypeScript resolve esses problemas ao adicionar tipos estáticos ao JavaScript, o que significa que você pode especificar o tipo de cada variável, parâmetro, retorno e propriedade em seu código. Isso permite que o compilador TypeScript verifique se o seu código está correto e consistente, e também gera informações de tipo que podem ser usadas por editores de código e outras ferramentas para melhorar a experiência de desenvolvimento.

Mas se TypeScript é tão bom, por que não usar TypeScript diretamente em vez de JavaScript? Bem, existem algumas razões possíveis para isso:

  • Tem um projeto existente em JavaScript e não quer ou não pode migrar todo o código para TypeScript.
  • Quer usar algumas bibliotecas ou recursos do JavaScript que não têm tipos definidos ou compatíveis com TypeScript.
  • Prefere a sintaxe e a semântica do JavaScript e não quer aprender ou usar uma nova linguagem.

Nesses casos, você pode usar TypeScript para checar arquivos JavaScript sem precisar mudar a sua linguagem ou o seu código. Você só precisa habilitar algumas configurações no seu arquivo tsconfig.json e adicionar alguns comentários especiais no seu código JavaScript para indicar os tipos das variáveis. Dessa forma, você pode aproveitar os benefícios do TypeScript sem perder a flexibilidade do JavaScript.

Como usar TypeScript para checar JavaScript?

Para usar TypeScript para checar arquivos JavaScript, você precisa seguir os seguintes passos:

  1. Instale o TypeScript globalmente ou localmente no seu projeto usando o comando npm install -g typescript ou npm install --save-dev typescript.
  2. Crie um arquivo tsconfig.json na raiz do seu projeto com o seguinte conteúdo:
{
  "compilerOptions": {
    "allowJs": true, //Permite arquivos JavaScript
    "checkJs": true, //Habilita a checagem em arquivos JavaScript
        "noEmit": true   //Impede que arquivos sejam emitidos pelo compilador
},
  "include": ["src"]
}

Enter fullscreen mode Exit fullscreen mode

Essas opções indicam ao compilador TypeScript que ele deve permitir arquivos JavaScript (allowJs) e checá-los (checkJs), a opção (noEmit), garante que o TypeScript irá apenas checar os arquivos e não gerar novos arquivos compilados. A opção include especifica quais arquivos devem ser incluídos na verificação. Você pode ajustar essas opções conforme as suas necessidades.

  1. Adicione comentários especiais no seu código JavaScript para indicar os tipos das variáveis usando a sintaxe JSDoc. Por exemplo:
/**
 * Soma dois números.
 * @param {number} a O primeiro número.
 * @param {number} b O segundo número.
 * @returns {number} A soma dos dois números.
 */
function soma(a, b) {
  return a + b;
}

// O compilador TypeScript vai avisar se você passar argumentos de tipos errados
soma("1", "2"); // Erro: Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'number'.
Enter fullscreen mode Exit fullscreen mode

Você pode encontrar mais informações sobre como usar JSDoc para documentar e tipar o seu código JavaScript na documentação do JSDoc.

  1. Execute o comando tsc para compilar o seu projeto e verificar se há erros de tipo. Você também pode usar um editor de código que suporte TypeScript, como Visual Studio Code, para ver os erros em tempo real.

Quais são as vantagens de usar TypeScript para checar JavaScript?

Ao usar TypeScript para checar arquivos JavaScript, você pode obter as seguintes vantagens:

  • Aumentar a qualidade e a confiabilidade do seu código, evitando erros comuns e inconsistências causados por tipos dinâmicos.
  • Aprimorar a legibilidade e a manutenibilidade do seu código, documentando os tipos das variáveis e facilitando a refatoração.
  • Melhorar a produtividade e a experiência de desenvolvimento, aproveitando as ferramentas de autocompletar, navegação, renomeação e outras que usam as informações de tipo geradas pelo TypeScript.
  • Manter a compatibilidade e a flexibilidade do seu código, podendo usar qualquer recurso ou biblioteca do JavaScript sem precisar mudar a sua linguagem, ou o seu código.

Conclusão

Neste post, você aprendeu como usar TypeScript para checar arquivos JavaScript, porque isso pode ser útil e quais são as vantagens dessa abordagem. Espero que você tenha gostado e que isso te ajude a melhorar os seus projetos em JavaScript. Se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo.

Obrigado pela leitura! 😊

Top comments (0)