TypeScript x JavaScript: entenda as diferenças

 A world wide web funciona basicamente em JavaScript, HTML e CSS. Infelizmente, o JavaScript carece de vários recursos que ajudariam os desenvolvedores a usá-lo para aplicativos de grande escala. Digite TypeScript .

O que é JavaScript?

O JavaScript começou como uma linguagem de script para o navegador Netscape Navigator; Brendan Eich escreveu o protótipo por um período de 10 dias em 1995. O nome JavaScript é uma referência à linguagem Java da Sun Microsystem, embora as duas linguagens sejam bastante diferentes, e a semelhança nos nomes levou a uma confusão significativa ao longo dos anos. O JavaScript, que evoluiu significativamente, agora é compatível com todos os navegadores modernos.

A introdução do JavaScript do lado do cliente no Netscape Navigator foi rapidamente seguida pela introdução do JavaScript do lado do servidor nos servidores web Netscape Enterprise Server e Microsoft IIS. Cerca de 13 anos depois, Ryan Dahl introduziu o Node.js como um ambiente de execução de código aberto, plataforma cruzada e JavaScript independente de qualquer navegador ou servidor da web.

Linguagem JavaScript

JavaScript é uma linguagem multiparadigma. Possui sintaxe de colchetes e ponto-e-vírgulas, como a família C de linguagens. Possui tipagem fraca e dinâmica e é interpretado ou (mais frequentemente) compilado just-in-time. Em geral, o JavaScript é de thread único, embora haja uma API Web Workers que faz multithreading e haja eventos, chamadas de função assíncronas e retornos de chamada.

JavaScript oferece suporte à programação orientada a objetos usando protótipos em vez da herança de classe usada em C ++, Java e C #, embora uma classsintaxe tenha sido adicionada ao JavaScript ES6 em 2015. JavaScript também oferece suporte à programação funcional, incluindo fechamentos, recursão e lambdas (funções anônimas).

Antes do JavaScript ES6, a linguagem não tinha otimização de chamada final; agora sim, embora você precise ativar o modo estrito ( 'use strict') para ativá-lo, e a implementação varia de navegador para navegador. O modo estrito também altera a semântica do JavaScript e altera alguns erros normalmente silenciosos para lançar erros.

O que há com a designação “ES6”? O nome da linguagem JavaScript padronizada é ECMAScript (ES), em homenagem ao órgão de padrões internacionais ECMA; ES6 também é chamado de ECMAScript 2015 (ES2015). ES2020 é atualmente um projeto de padrão.

Como um exemplo simples para dar a você o sabor da linguagem JavaScript, aqui está um código para decidir se é dia ou noite e colocar dinamicamente a saudação apropriada em um elemento da web nomeado encontrado no objeto de documento do navegador:

var hora = nova data (). getHours (); var saudação ; if ( hora < 18 ) {     saudação = "Bom dia" ; } else {     saudação = "Boa noite" ; } documento . getElementById ( "demo" ). innerHTML = saudação ;  

   
 
  
 

Ecossistema JavaScript

Existem inúmeras APIs de JavaScript. Alguns são fornecidos pelo navegador, como a documentAPI no código mostrado acima, e alguns são fornecidos por terceiros. Algumas APIs se aplicam ao uso do lado do cliente, algumas ao uso do servidor, algumas ao uso de desktop e algumas a mais de um ambiente.

As APIs do navegador incluem o modelo de objeto de documento (DOM) e o modelo de objeto de navegador (BOM), geolocalização , Canvas (gráficos), WebGL (gráficos acelerados por GPU), HTMLMediaElement (áudio e vídeo) e WebRTC (comunicações em tempo real).

Abundam APIs de terceiros. Alguns são interfaces para aplicativos completos, como o Google Maps . Outros são utilitários que facilitam a programação em JavaScript HTML5 e CSS, como o jQuery . Alguns, como o Express , são estruturas de aplicativos para propósitos específicos; para o Express, o objetivo é construir servidores de aplicativos móveis e da web em Node.js. Uma série de outras estruturas foram construídas sobre o Express . Em 2016, discuti 22 frameworks JavaScript em um esforço para entender o que estava se tornando uma espécie de zoológico; muitas dessas estruturas ainda existem de uma forma ou de outra, mas várias foram postas de lado.

Existem muitos mais módulos JavaScript, mais de 300.000. Para lidar com isso, usamos gerenciadores de pacotes , como npm , o gerenciador de pacotes padrão para Node.js.

Uma alternativa ao npm é o Yarn , que veio do Facebook e reivindica a vantagem de instalações determinísticas. Ferramentas semelhantes incluem Bower (do Twitter), que gerencia componentes front-end em vez de módulos Node; Ender , que se autodenomina irmã mais nova do npm; e jspm , que usa módulos ES (o padrão ECMA mais recente para módulos), em vez de módulos CommonJS, o padrão de fato mais antigo suportado pelo npm.

O Webpack agrupa módulos JavaScript em ativos estáticos para o navegador. O Browserify permite que os desenvolvedores escrevam módulos no estilo Node.js que são compilados para uso no navegador. Grunt é um executor de tarefas JavaScript orientado a arquivos, e o  gulp é um sistema de construção de streaming e executor de tarefas JavaScript. A escolha entre grunhir e gole não é decisiva. Eu instalei e uso aquele que foi configurado para um determinado projeto.

Para tornar o código JavaScript mais confiável na ausência de compilação, usamos linters. O termo vem da ferramenta lint da linguagem C, que era um utilitário Unix padrão. Linters JavaScript incluem JSLint , JSHint e ESLint . Você pode automatizar a execução de linters após alterações de código usando um executor de tarefas ou seu IDE. Novamente, a escolha entre os linters não é clara e eu uso aquele que foi configurado para um determinado projeto.

Falando em editores e IDEs, eu revisei 6 IDEs JavaScript e 10 editores JavaScript , mais recentemente em 2019. Minhas principais escolhas foram Sublime Text (editor muito rápido), Visual Studio Code (editor / IDE configurável) e WebStorm (IDE).

Os transpiladores permitem traduzir algumas outras linguagens, como CoffeeScript ou TypeScript para JavaScript, e traduzir o JavaScript moderno (como o código ES2015) para um JavaScript básico que é executado em (quase) qualquer navegador. (Todas as apostas estão encerradas para as primeiras versões do Internet Explorer.) O transpiler mais comum para o JavaScript moderno é o Babel .

O que é TypeScript?

TypeScript é um superconjunto tipado de JavaScript que compila para JavaScript simples (ES3 ou superior; é configurável). O compilador de linha de comando TypeScript de código aberto pode ser instalado como um pacote Node.js. O suporte TypeScript vem com Visual Studio 2017 e Visual Studio 2019, Visual Studio Code e WebStorm, e pode ser adicionado ao Sublime Text, Atom, Eclipse, Emacs e Vim. O compilador / transpilador TypeScript tsc é escrito em TypeScript.

O TypeScript adiciona tipos, classes e módulos opcionais ao JavaScript e oferece suporte a ferramentas para aplicativos JavaScript em grande escala para qualquer navegador, para qualquer host, em qualquer sistema operacional. Entre muitas outras vitórias para o TypeScript, a popular estrutura Angular foi renovada no TypeScript.

Os tipos permitem que os desenvolvedores JavaScript usem ferramentas e práticas de desenvolvimento altamente produtivas, como verificação estática e refatoração de código ao desenvolver aplicativos JavaScript.

Os tipos são opcionais e a inferência de tipos permite que algumas anotações de tipo façam uma grande diferença na verificação estática de seu código. Tipos permitem definir interfaces entre componentes de software e obter insights sobre o comportamento de bibliotecas JavaScript existentes.

O TypeScript oferece suporte para os recursos JavaScript mais recentes e em evolução, incluindo aqueles do ECMAScript 2015 e propostas futuras, como funções assíncronas e decoradores, para ajudar a construir componentes robustos.

Linguagem TypeScript

A linguagem TypeScript aceita JavaScript como válido, mas oferece opções adicionais de anotações de tipo, verificação de tipo em tempo de compilação, classes e módulos. Todos eles são extremamente úteis quando você está tentando produzir um software robusto. JavaScript simples gera erros apenas em tempo de execução e, então, apenas se o seu programa chegar a um caminho com erros.

O tutorial do TypeScript em 5 minutos deixa os benefícios claros. O ponto de partida é puro JavaScript com uma extensão .ts:

função saudação ( pessoa ) { retornar "Olá," + pessoa ; } let user = "Jane User" ; documento . corpo . textContent = saudação ( usuário ); 
      

 

Se você compilar com tsc, ele produzirá um arquivo idêntico com a extensão .js.

O tutorial faz você alterar este código passo a passo, adicionando uma anotação de tipo person:stringna definição da função, compilando, testando a verificação de tipo pelo compilador, adicionando uma interface para um persontipo e, finalmente, adicionando uma classe para Student. O código final é:

class Student {     fullName : string ;     construtor ( public firstName : string , public middleInitial : string , public lastName : string ) { this . fullName = firstName + "" + middleInitial + "" + lastName ; } } interface Person {     firstName : string ;  
 
    
          
                
    

  
 
    lastName : string ; } function greeter ( person : Person ) { return "Hello," + person . primeiroNome + "" + pessoa . lastName ; } let user = new Student ( "Jane" , "M." , "User" ); documento . corpo . textContent = saudação ( usuário ); 

  
        

    

Quando você compila isso e olha para o JavaScript emitido, você verá que as classes no TypeScript são apenas uma abreviatura para a mesma herança baseada em protótipo que é usada no JavaScript ES3 simples. Observe que as propriedades person.firstNamee person.lastNamesão geradas automaticamente pelo compilador quando ele vê seus publicatributos no Studentconstrutor de classe e também são transportadas para a Personinterface. Um dos melhores benefícios das anotações de tipo no TypeScript é que elas são reconhecidas pelas ferramentas, como o Visual Studio Code:

IDG

Se houver erros no código conforme você edita no VS Code, você verá as mensagens de erro na guia Problemas, por exemplo o seguinte se você excluir o final da linha com a instanciação de Student:

IDG

O tutorial Migrando de JavaScript entra em detalhes sobre como atualizar um projeto JavaScript existente. Ignorando as etapas de configuração, o ponto crucial do método é renomear seus arquivos .js para .ts, um de cada vez. (Se o seu arquivo usa JSX, uma extensão usada pelo React, você precisará renomeá-la para .tsx em vez de .ts.) A seguir, restrinja a verificação de erros e corrija os erros.

Entre outras coisas, você precisará alterar as instruções baseadas em módulo require()ou define()para instruções de importação do TypeScript e adicionar  arquivos de declaração para quaisquer módulos de biblioteca que você usar. Você também deve reescrever suas exportações de módulo usando a exportinstrução TypeScript . TypeScript suporta módulos CommonJS, como o Node.js.

Se você receber erros sobre o número incorreto de argumentos, poderá escrever assinaturas de sobrecarga de função do TypeScript. Esse é um recurso importante que falta ao JavaScript. Finalmente, você deve adicionar tipos às suas próprias funções e, quando apropriado, usar interfaces ou classes.

Normalmente, você não precisa escrever seus próprios arquivos de declaração para bibliotecas JavaScript de domínio público. DefinitelyTyped é um repositório de arquivos de declaração, todos acessíveis usando npm. Você pode encontrar as declarações usando a página TypeSearch .

Depois de converter todos os seus arquivos JavaScript em TypeScript, aumentar os tipos e eliminar os erros, você terá uma base de código muito mais robusta. Em vez de consertar constantemente os erros de tempo de execução relatados por testadores ou usuários, você poderá detectar os erros mais comuns estaticamente.

Vale a pena assistir Anders Hejlsberg discutir o TypeScript . Como você ouvirá dele, o TypeScript é JavaScript escalável.

Martin Heller é um editor colaborador e revisor da InfoWorld. Anteriormente um consultor de programação da Web e do Windows, ele desenvolveu bancos de dados, software e sites de 1986 a 2010. Mais recentemente, ele atuou como vice-presidente de tecnologia e educação na Alpha Software e presidente e CEO da Tubifi.