Introdução
Com a crescente complexidade das aplicações web modernas, surge a necessidade de ferramentas mais poderosas para desenvolvedores. Nesse contexto, o TypeScript se destaca como uma extensão do JavaScript que oferece tipos estáticos, facilitando a manutenção e a detecção de erros antes mesmo da execução do código. Vamos explorar os motivos pelos quais o TypeScript tem ganhado popularidade rapidamente e como ele pode melhorar significativamente a experiência de desenvolvimento.
O que é TypeScript?
O TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. Ela é uma extensão do JavaScript que adiciona recursos de tipagem estática ao código. Em outras palavras, o TypeScript permite que os desenvolvedores especifiquem o tipo de dados das variáveis, parâmetros de função e valores de retorno, o que ajuda a detectar erros de programação durante o desenvolvimento.
Por que usar?
Em projetos grandes, o TypeScript facilita a manutenção do código, fornecendo informações claras sobre os tipos de dados utilizados. Isso torna o código mais compreensível, facilita a colaboração entre desenvolvedores e reduz o risco de introdução de erros durante as alterações.
Além disso, como comentado na introdução, o TypeScript é compatível com o ecossistema JavaScript, o que significa que você pode integrar facilmente código TypeScript em projetos JavaScript existentes. Além disso, com os tipos estáticos, as refatorações podem ser realizadas com mais segurança, especialmente em projetos grandes, onde mudanças podem ter efeitos colaterais complexos.
Principais recursos do TypeScript
O TypeScript possui varios recursos nativos, aqui estão alguns deles:
Tipagem Estática: O TypeScript permite a definição de tipos para variáveis, parâmetros de função, propriedades de objetos, etc. Isso ajuda a detectar erros de tipo durante o desenvolvimento, proporcionando uma camada adicional de segurança.
Inferência de Tipos: Mesmo que você não especifique explicitamente os tipos, o TypeScript é capaz de inferir os tipos com base no contexto do código. Isso reduz a necessidade de declarações de tipo verbosas.
Interfaces: O TypeScript suporta a criação de interfaces, que podem ser usadas para definir contratos para objetos. Isso é útil para garantir que os objetos tenham as propriedades necessárias.
Enums: Enums permitem a criação de conjuntos nomeados de valores constantes, o que pode tornar o código mais legível e manutenível.
Union Types e Intersection Types: O TypeScript oferece a capacidade de combinar tipos usando union (|) e intersection (&) types, permitindo maior flexibilidade na modelagem de dados.
Generics: Generics permitem criar componentes e funções que podem trabalhar com uma variedade de tipos, proporcionando reutilização de código e maior flexibilidade.
Namespace e Módulos: O TypeScript suporta a organização de código usando namespaces e módulos, ajudando a evitar conflitos de nome e melhorar a estrutura do projeto.
Decorators: Os decoradores são uma forma de adicionar metadados a classes e membros, permitindo extensibilidade e funcionalidades adicionais, como os usados em frameworks como o Angular.
Mixins: O TypeScript oferece suporte a mixins, uma técnica para compartilhar funcionalidades entre classes de forma flexível.
Strict Null Checks: Quando ativada, essa opção obriga a verificação de nulos e indefinidos, ajudando a evitar muitos erros comuns em JavaScript.
TypeScript Compiler (tsc): O TypeScript possui seu próprio compilador (tsc) que converte código TypeScript em JavaScript, facilitando a integração com projetos existentes.
Suporte a ES6/ESNext: O TypeScript tem suporte às características mais recentes do ECMAScript, permitindo o uso de funcionalidades avançadas do JavaScript.
Integração com Ferramentas de Desenvolvimento: O TypeScript é bem integrado com diversas ferramentas, como editores de código (VSCode, Atom, etc.) e sistemas de compilação (Webpack, etc.).
Compatibilidade com JavaScript: O TypeScript é retrocompatível com JavaScript, o que significa que você pode gradualmente adicionar TypeScript a projetos existentes sem a necessidade de uma reescrita completa.
Mas e a sintaxe, como é?
A sintaxe do TypeScript é bem simples, assim como a do JavaScript. Eu desenvolvi uma calculadora simples para te mostrar exatamente como a sintaxe não é difícil.
A sintaxe, como você pode ver, é simples. A maior diferença de fato são as tipagens, que pessoas com mais experiênca em programação já notaram. Mas se você não conhece muito sobre programação, fique tranquilo. Eu irei te explicar aonde estão as tais tipagens.
Note que nos parâmetros das funções, dentro da classe “Calculator”, temos:
Isso significa que esta função recebe números como parâmetro. Se quando esta função for chamada, tive uma string nos parâmetros, o próprio TypeScript já reconhece como um erro e te alerta e nem deixa o código ser executado.
Como rodar o código
Para executar um código TypeScript, antes precisamos compilar ele para JavaScript. Por mais que as vezes o nome “compilar” pareça um pouco assustador, o processo é bem simples.
No seu terminal, na pasta do projeto, rode o comando
Isso vai iniciar o tsconfig, o arquivo de configuração do TypeScript, que vai cuidar de compilar nosso código.
Agora vamos compilar o código de fato, rodando o comando
Note que agora um arquivo “.js” foi criado na pasta do seu projeto, e é ele que vamos executar de fato.
Por final, vamos rodar o que fizemos. Para isso é simples, mas antes, verifique se você tem o node instalado na sua máquina com o comando
Caso você não tenha, visite
Após o node devidamente instalado, você está 100% pronto para rodar o projeto. Apenas rode (sem “<” e “>”)
Pronto, agora você rodou seu primeiro projeto com TypeScript, além de entender melhor o que é o TypeScript de fato.