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.
Introducción
Con la creciente complejidad de las aplicaciones web modernas, surge la necesidad de herramientas más poderosas para los desarrolladores. En este contexto, TypeScript destaca como una extensión de JavaScript que ofrece tipos estáticos, facilitando el mantenimiento y la detección de errores incluso antes de la ejecución del código. Vamos a explorar las razones por las cuales TypeScript ha ganado popularidad rápidamente y cómo puede mejorar significativamente la experiencia de desarrollo.
¿Qué es TypeScript?
TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft. Es una extensión de JavaScript que agrega características de tipado estático al código. En otras palabras, TypeScript permite a los desarrolladores especificar el tipo de datos de las variables, los parámetros de las funciones y los valores de retorno, lo que ayuda a detectar errores de programación durante el desarrollo.
¿Por qué usarlo?
Principales características de TypeScript
Pero, ¿cómo es la sintaxis?
La sintaxis de TypeScript es bastante simple, al igual que la de JavaScript. He desarrollado una calculadora simple para mostrarte exactamente lo fácil que es la sintaxis.
La sintaxis, como puedes ver, es simple. La mayor diferencia, de hecho, son los tipos, que las personas con más experiencia en programación ya han notado. Pero si no conoces mucho sobre programación, no te preocupes. Te explicaré dónde están esos tipos.
Note que en los parámetros de las funciones, dentro de la clase “Calculadora”, tenemos:
Esto significa que esta función recibe números como parámetro. Si cuando se llama a esta función, hay una cadena en los parámetros, TypeScript lo reconoce como un error y te alerta, impidiendo que el código se ejecute.
Cómo ejecutar el código
Para ejecutar un código TypeScript, primero necesitamos compilarlo a JavaScript. Aunque a veces el término “compilar” pueda parecer un poco intimidante, el proceso es bastante sencillo.
En tu terminal, en la carpeta del proyecto, ejecuta el comando:
Eso iniciará el tsconfig, el archivo de configuración de TypeScript, que se encargará de compilar nuestro código.
Ahora vamos a compilar el código propiamente dicho, ejecutando el comando:
Note que ahora se ha creado un archivo “.js” en la carpeta de tu proyecto, y es ese el que vamos a ejecutar realmente.
Finalmente, vamos a ejecutar lo que hemos hecho. Para ello, es simple, pero antes, verifica si tienes Node instalado en tu máquina con el comando:
Si no lo tienes, visita
Após instalar o Node, estás 100% listo para ejecutar el proyecto. Simplemente ejecuta (sin “<” y “>”)
Pronto, ahora has ejecutado tu primer proyecto con TypeScript, además de entender mejor qué es realmente TypeScript.