Uma dúvida comum que surge frequentemente é: qual a distinção entre JavaScript e TypeScript?
Vamos explorar essa questão…
Desde os seus primeiros passos na programação, o JavaScript (JS) provavelmente fez parte de todos os seus projetos de front-end. Se você já tem alguma familiaridade com JS, pode considerar o TypeScript como uma evolução do JS, com funcionalidades adicionais que melhoram a organização e a tipagem do seu aplicativo. O TypeScript foi criado como um projeto de código aberto pela Microsoft, visando otimizar o desenvolvimento em JS e identificar erros de compilação logo no início do processo.
Neste artigo, vamos analisar alguns aspectos importantes do JavaScript e do TypeScript, destacando as diferenças entre essas duas linguagens de script.
O que é JavaScript?
JavaScript é uma linguagem usada para scripts do lado do cliente. Você pode incorporar um script diretamente em uma página HTML ou criar um arquivo com a extensão .js e incluí-lo no seu arquivo HTML. Um exemplo prático de uso do JavaScript é na validação de formulários de login, onde uma mensagem de erro é exibida caso o nome de usuário ou a senha estejam incorretos.
Vamos criar um código JS simples e executá-lo em um navegador:
Crie um arquivo chamado example.html e adicione o seguinte trecho de código:
<script> sentimento = 'alegre'; sentimento = 23; </script>
Este código simples declara uma variável e atribui a ela o valor “alegre” (string). Em seguida, atribuímos um valor de um tipo diferente (número) à mesma variável. O JavaScript não irá gerar nenhum erro nesse caso e o código será executado sem problemas em qualquer navegador. Agora, vamos obter o valor do sentimento do usuário:
Nosso HTML será:
<input type="textbox" id="comoestaseusentindo">
e o script:
sentimento = document.getElementById("comoestaseusentindo").value;
A menos que implementemos verificações explícitas no script, o JS aceitará qualquer valor fornecido pelo usuário e o atribuirá à variável. Portanto, você pode inserir qualquer coisa, como 234, @.#$%, etc., na variável “sentimento”.
Características do JavaScript
Com base no que vimos, podemos identificar as seguintes características do JavaScript:
- Linguagem de script com tipagem fraca
- Utilizado para scripts do lado do cliente e do lado do servidor (com Node.js)
- Flexível e dinâmico
- Suportado por todos os principais navegadores
- Leve e interpretado
Se você deseja se aprofundar no JavaScript, confira este Curso Udemy.
O que é TypeScript?
Em um aplicativo real, muitas validações e verificações dinâmicas são necessárias. Para esses aplicativos, o código JavaScript pode se tornar difícil de testar, principalmente pela falta de verificação de tipos. Ao receber valores de usuários, é fundamental validá-los logo no início. É nesse cenário que o TypeScript se destaca.
TypeScript é uma linguagem fortemente tipada, com um compilador que sinaliza um erro se o tipo de uma variável não for definido.
Tanto o JavaScript quanto o TypeScript seguem as especificações ECMAScript para uma linguagem de script. O TypeScript é capaz de executar todo o código JavaScript e suporta todas as suas bibliotecas. Por isso, é considerado um superconjunto do JavaScript.
Instalação do TypeScript
Para executar nosso código anterior em TypeScript, precisamos instalar o compilador TypeScript utilizando o pacote npm (caso você tenha o Node.js instalado).
npm install -g typescript
Ou você pode baixá-lo diretamente da página oficial de downloads da Microsoft: Página de downloads da Microsoft. Você também pode utilizar o Playground TS para observar como o código é transcompilado de .ts para .js.
Após a instalação, você pode definir as configurações do projeto no arquivo tsconfig.json e utilizar qualquer IDE ou editor de texto para escrever o código TypeScript e salvá-lo com a extensão .ts.
É possível não definir o tipo de uma variável e deixar que o TypeScript infira o tipo de dado. No entanto, você receberá um erro se tentar atribuir um valor de um tipo diferente do primeiro utilizado (no nosso caso, uma string), durante o processo de compilação.
É sempre recomendável adicionar anotações de tipo ao código para facilitar a manutenção e o uso:
var sentimento: string = "alegre";
E não para por aí!
O TypeScript oferece muitos outros recursos para facilitar a vida de um desenvolvedor.
Recursos do TypeScript
O TypeScript possui um conjunto robusto de funcionalidades, com cada nova versão trazendo aprimoramentos para tornar o desenvolvimento ainda mais prático. Por exemplo, na versão mais recente (4.0), foram adicionados recursos como tipos de tuplas variáveis, fábricas JSX personalizadas, inferência de propriedades de classe a partir de construtores, entre outros. Algumas características típicas do TypeScript são:
- Suporte a conceitos de programação orientada a objetos como interface, herança, classe e genéricos.
- Detecção antecipada de erros.
- Suporte IDE com verificação de sintaxe e sugestões.
- Facilidade de depuração devido à tipagem.
- Transcompila para JavaScript.
- Utilizado para aplicações do lado do servidor e do lado do cliente.
- Suporte a diversas plataformas e navegadores.
- Compatível com todas as bibliotecas e extensões JS.
Por que precisamos do TypeScript? (Vantagens do TypeScript sobre o JavaScript)
A Microsoft desenvolveu e utilizou o TypeScript internamente por dois anos antes de torná-lo público em 2012. A empresa criou um JavaScript com tipagem porque essa abordagem tornava mais fácil o teste do código para aplicações corporativas de nível de produção. Você ainda pode utilizar os recursos de tipagem dinâmica, mas também pode tipar as variáveis quando necessário.
Observe o código abaixo:
var meunum = //obter do usuário;
adicionarDez(numero){
return numero + 10;
}
O resultado esperado é sempre um número. Mas, e se o usuário inserir “ovelha”? A saída será “ovelha10” – o ideal é informar ao usuário que esta operação não é possível!
Além disso, quando as informações de tipo estão disponíveis, os editores de texto e IDEs se tornam mais práticos, economizando tempo e evitando erros em tempo de execução. A refatoração do código também se torna mais simples.
Isso significa que não precisamos mais do JavaScript? (Desvantagens do TypeScript sobre o JavaScript)
O TypeScript pode ser visto como uma extensão do JavaScript, mas não como um substituto.
Em pequenos trechos de código, o uso do TypeScript pode se tornar um fardo, pois a instalação, compilação e transcompilação são etapas extras desnecessárias. Com JavaScript, você pode simplesmente escrever o seu script em HTML e executá-lo. A depuração do código também é mais fácil, pois você pode simplesmente atualizar o navegador sempre que modificar algo.
Comparação Direta
Agora que entendemos os recursos e vantagens do TypeScript e do JavaScript, vamos realizar uma comparação mais direta:
| TypeScript | JavaScript |
| Uma linguagem tipada que detecta erros de compilação antecipadamente. | Erros podem ser identificados durante a execução. |
| Ideal para projetos grandes, pois melhora a capacidade de manutenção e a legibilidade do código. | Com o aumento do código, torna-se mais difícil de testar e depurar. O JS é mais adequado para projetos menores. |
| Superconjunto do JS, ou seja, oferece recursos como orientação a objetos, verificação de tipos, entre outros. | Uma linguagem de script que oferece suporte à criação dinâmica de conteúdo web. |
| Requer a instalação do compilador e configuração. | Não há necessidade de nenhuma instalação; O código JS pode ser escrito diretamente no navegador usando a tag <script>. |
| Todos os arquivos .ts são convertidos em arquivos .js antes da execução; processo conhecido como transcompilação. | Desenvolvedores podem incluir diretamente arquivos .js em arquivos HTML para execução usando a tag <src>. |
| Poderoso e intuitivo com recursos avançados como módulos, genéricos e interfaces. | Adequado para aplicações web simples que não exigem funcionalidades avançadas. |
| Utilizado para scripts do lado do servidor e do lado do cliente. | Fácil de usar para scripts do lado do cliente, mas pode se tornar pesado e complexo para scripts do lado do servidor. |
| A execução leva mais tempo devido à etapa de compilação. | Nenhuma compilação é necessária, portanto, a execução é mais rápida. |
| Suporta tipagem estática e dinâmica. | Suporta apenas tipagem dinâmica. |
| Podemos especificar anotações de tipo, como: var sentimento: string = “feliz”; | Não é possível especificar anotações de tipo, pois não é possível definir tipos. |
Conclusão
Do ponto de vista do aprendizado, o JavaScript pode ser o caminho mais natural. Você abre um arquivo, escreve algo dentro das tags <script></script>, salva como HTML e já pode visualizar os resultados! A partir daí, é possível construir conteúdo mais dinâmico.
Além disso, em um cenário onde você trabalha em um aplicativo de grande escala, o conhecimento em JavaScript o ajudará a migrar facilmente para o TypeScript.
No entanto, sob uma ótica de carreira e remuneração, um Desenvolvedor TypeScript terá mais flexibilidade e domínio em projetos JS e TS, sendo um profissional mais valorizado no mercado. Normalmente, desenvolvedores de TypeScript recebem entre US$ 110 mil e US$ 147 mil, enquanto desenvolvedores de JS recebem entre US$ 63 mil e US$ 118 mil por ano.