Uma das perguntas mais frequentes que recebo é: qual é a diferença entre JavaScript e Typescript?
Vamos descobrir…
A partir do momento em que você começou a codificar, JavaScript (JS) faria parte de todos os seus projetos front-end. Se você estiver um pouco familiarizado com JS, pense no TypeScript como JS, além de alguns recursos adicionais que tornam seu aplicativo mais organizado e tipado. O typeScript foi desenvolvido como um projeto de código aberto pela Microsoft para tornar o desenvolvimento JS mais eficiente e detectar erros de compilação desde o início.
Neste artigo, discutiremos alguns recursos importantes do JavaScript e do TypeScript e as diferenças entre as duas linguagens de script.
últimas postagens
O que é JavaScript?
JavaScript é usado para scripts do lado do cliente. Você pode criar um script em uma página HTML ou criar um arquivo com extensão .js e incluí-lo em seu arquivo HTML. Um exemplo comum do mundo real onde você pode ver o JavaScript é a validação da página de login, onde é mostrado um erro quando seu nome de usuário/senha está incorreto.
Vamos escrever um código JS simples e executá-lo no navegador:
Crie um arquivo example.html e adicione o seguinte código:
<script> feeling = 'happy'; feeling = 23; </script>
Este código simples declara uma variável e atribui um valor de happy (string) a ela. Podemos atribuir um valor de um tipo diferente (número) à mesma variável. JavaScript não reclamaria disso e podemos executar o código em qualquer navegador sem problemas. Agora, vamos obter o valor do sentimento do usuário:
Nosso HTML ficará assim:
<input type = "textbox" id = "howyoufeel">
e o roteiro será:
feeling = document.getElementById("howyoufeel").value;
A menos que coloquemos verificações explícitas no script, o JS aceitará qualquer valor do usuário e o transmitirá. Então, você pode colocar qualquer coisa como 234, @.#$%, etc. na variável feeling.
Recursos do JavaScript
Do exposto, podemos observar as seguintes características do JavaScript:
- Linguagem de script fracamente tipada
- Usado 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ê estiver interessado em dominar JavaScript, confira este Curso Udemy.
O que é TypeScript?
Um aplicativo do mundo real terá muitas validações e verificações dinâmicas. Para esses aplicativos, o código JavaScript se tornará difícil de testar em algum momento, principalmente porque não há verificação de tipo. Ao obter valores dos usuários, é importante obtê-los logo no início. É aqui que o TypeScript entra em cena.
TypeScript é fortemente tipado e tem um compilador que reclama se você não definir o tipo de uma variável.
Tanto o JavaScript quanto o TypeScript estão em conformidade com as especificações ECMAScript para uma linguagem de script. O Typescript pode executar todo o código JavaScript e suporta todas as suas bibliotecas – é por isso que é chamado de superconjunto de JavaScript.
Instalação do TypeScript
Para executar nosso código anterior no TypeScript, precisamos instalar o compilador TypeScript usando o pacote npm (se você tiver o node js).
npm install -g typescript
ou baixe-o diretamente do site oficial Página de downloads da Microsoft. Você também pode usar o Parque infantil TS para ver como o código é trans-compilado de ts para js.
Feito isso, você pode definir as configurações do projeto em tsconfig.json e usar qualquer IDE ou editor de texto para escrever o código TypeScript e salvá-lo como .ts.
Você ainda pode escapar não definindo o tipo de variável e o TypeScript pode inferir o tipo de dados. No entanto, você receberá um erro de ‘sentimento’ se fornecer algo diferente do primeiro tipo usado (no nosso caso, uma String) – durante a própria compilação.
É sempre bom que o código tenha uma anotação de tipo para manutenção e facilidade de uso:
var feeling: string = “happy”;
Não é isso!
O TypeScript fornece muitos outros recursos para facilitar a vida de um desenvolvedor.
Recursos do TypeScript
O Typescript possui um rico conjunto de recursos e cada versão vem com novos recursos para tornar o desenvolvimento mais fácil do que antes. Por exemplo, com a nova versão (4.0), alguns recursos adicionais são tipos de tuplas variáveis, fábricas JSX personalizadas, inferência de propriedades de classe de construtores, etc. Alguns recursos típicos do TypeScript são:
- Suporta conceitos de programação orientada a objetos como interface, herança, classe. genéricos
- Detecção precoce de erros
- Suporte IDE com verificação de sintaxe e sugestões
- Mais fácil de depurar à medida que é digitado
- Trans-compila em JavaScript
- Usado para aplicativos do lado do servidor e do lado do cliente
- Suporte entre plataformas e navegadores
- Suporta todas as bibliotecas e extensões JS
Por que precisamos do TypeScript? (Vantagens do TypeScript sobre JavaScript)
A Microsoft desenvolveu e usou o TypeScript por dois anos para seus projetos internos antes de torná-lo público em 2012. Eles criaram um JavaScript tipado porque era mais fácil testar o código para aplicativos corporativos de nível de produção. Você ainda pode usar os recursos de digitação dinâmica, mas também digitar as variáveis quando for realmente necessário.
Considere o código abaixo:
var mynum = //get from user;
addten(number){
return number + 10;
}
Esperamos que o resultado seja sempre um número. Mas, e se um usuário der “ovelha”? A saída será sheep10 – idealmente, precisamos informar ao usuário que esta operação não é possível!
Além disso, quando você tem as informações de tipo disponíveis, os editores de texto e IDEs se tornam mais práticos para usar e salvar erros de tempo de execução. Também é mais fácil refatorar o código posteriormente.
Isso significa que não precisamos de JavaScript? (Desvantagens do TypeScript sobre JavaScript)
Você pode pensar no TypeScript como uma extensão do JavaScript, mas certamente não um substituto.
Para pedaços menores de código, o TypeScript pode se tornar uma sobrecarga – instalar, compilar, transcompilar será redundante. Com JavaScript, você pode simplesmente digitar seu script em HTML e funcionará. Também é mais fácil depurar o código quando você pode simplesmente atualizar o navegador sempre que alterar algo.
Comparação direta
Agora que entendemos os recursos e vantagens do TypeScript e do JavaScript, vamos fazer mais comparações:
TypeScript
JavaScript
Uma linguagem tipada que detecta erros de compilação desde o início
Você pode descobrir erros durante o tempo de execução
Adequado para grandes projetos, pois melhora a capacidade de manutenção e a legibilidade do código
À medida que mais código é adicionado, torna-se difícil testar e depurar, portanto, o JS é adequado para pequenos projetos
Superconjunto de JS, ou seja, recursos como orientação a objetos, verificação de tipos e muito mais
Uma linguagem de script que oferece suporte à criação dinâmica de conteúdo da Web
Requer instalação do compilador e configuração
Não há necessidade de qualquer instalação; O código JS pode ser escrito diretamente em um navegador usando a tag , salva como HTML – você verá os resultados! Você pode então construir sobre ele para criar conteúdo mais dinâmico.
Além disso, quando você está trabalhando em um aplicativo de grande escala, ter conhecimento de JavaScript o ajudará a mudar facilmente para o TypeScript.
No entanto, do ponto de vista de carreira e remuneração, como um Desenvolvedor TypeScript, você ficará mais flexível e confortável com projetos JS e TS – então definitivamente um ativo melhor no mercado. Normalmente, os desenvolvedores de TypeScript recebem algo entre US$ 110 mil e US$ 147 mil, enquanto os desenvolvedores de JS recebem cerca de US$ 63 mil a US$ 118 mil por ano.