Visão geral do TypeScript

5 minutos

JavaScript, uma das linguagens de programação mais utilizadas no mundo, tornou-se a linguagem oficial da web. Os desenvolvedores usam-no para escrever aplicações multiplataforma que podem ser executadas em qualquer plataforma e em qualquer navegador.

Embora o JavaScript seja usado para criar aplicativos multiplataforma, ele não foi concebido para grandes aplicativos envolvendo milhares, ou mesmo milhões, de linhas de código. O JavaScript carece de alguns dos recursos de linguagens mais maduras que alimentam os aplicativos sofisticados de hoje. Os editores de desenvolvimento integrados (IDEs) podem achar difícil gerenciar JavaScript e manter essas grandes bases de código.

O TypeScript aborda as limitações do JavaScript, fazendo isso sem comprometer a proposta de valor chave do JavaScript: a capacidade de executar seu código em qualquer lugar e em todas as plataformas, navegadores ou hosts.

O que é TypeScript?

TypeScript é uma linguagem de código aberto que foi desenvolvida pela Microsoft. É um superconjunto de JavaScript, o que significa que você pode usar as habilidades de JavaScript que você já desenvolveu junto com certos recursos que anteriormente não estavam disponíveis para você.

Dicas de tipo

A principal característica do TypeScript é o seu sistema de tipos. No TypeScript, você pode identificar o tipo de dados de uma variável ou parâmetro usando uma dica de tipo. Com dicas de tipo, você descreve a forma de um objeto, o que fornece melhor documentação e permite que o TypeScript valide se seu código está funcionando corretamente.

Através da verificação de tipo estático, o TypeScript deteta problemas de código no início do desenvolvimento que o JavaScript normalmente não consegue detetar até que o código seja executado no navegador. Os tipos também permitem descrever o que seu código se destina a fazer. Se você está trabalhando em uma equipe, um colega de equipe que entra depois de você pode facilmente entendê-lo também.

Os tipos também potencializam os benefícios de inteligência e produtividade das ferramentas de desenvolvimento, como IntelliSense, navegação baseada em símbolos, ir para definição, encontrar todas as referências, conclusão de instrução e refatoração de código.

Escrever tipos pode ser opcional no TypeScript, porque a inferência de tipo permite que você obtenha muito desse poder sem escrever código extra. Se o TypeScript puder determinar o tipo de dados implicitamente (por exemplo, quando você atribui um valor a uma variável usando let age = 42), ele inferirá automaticamente o tipo de dados.

Experimente! Aprender sobre os tipos

Vejamos um exemplo para demonstrar o uso de tipos.

Abra o TypeScript Playground. Você aprenderá mais sobre o Playground mais adiante neste módulo.
Copie e cole o seguinte exemplo de código JavaScript no painel TypeScript (à esquerda):
```
function addNumbers(x, y) {
  return x + y;
}

console.log(addNumbers(3, 6));
```
Observe que o mesmo código aparece no painel .JS (direito). Este painel mostra o código JavaScript que o TypeScript gerará depois de compilado.
Selecione Executar para executar o código JavaScript. Em seguida, selecione a guia Logs e observe que o valor 9 está registrado no console. JavaScript atribuiu o number tipo aos parâmetros x e y a função retornou um número.
Substitua 3 por "three" (incluindo as aspas) no código TypeScript e execute-o. JavaScript agora atribui o tipo ao x parâmetro e retorna "three6", um tipo de cadeia de caracteres, para o string console. Você provavelmente já se deparou com essa situação antes e, como você sabe, pode causar alguns resultados inesperados.

No painel TypeScript, observe as linhas onduladas vermelhas sob os nomes dos parâmetros na addNumbers função. As linhas indicam que o verificador de tipo identificou erros. Passe o cursor sobre um dos parâmetros e leia a descrição do erro. O TypeScript atribuiu implicitamente um tipo de any, que é o tipo mais amplo porque pode essencialmente conter qualquer coisa.
Atualize o código TypeScript para especificar um tipo para cada parâmetro. Substitua x por e y por x: numbery: number.

Você notará que os erros agora desapareceram dos parâmetros, mas um novo apareceu sob o primeiro argumento na chamada de função: "Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'número'."
Substitua "three" por um número para corrigir o erro. Você pode passar um valor literal, uma variável ou qualquer outro dado. O TypeScript entende a forma do seu objeto, para que possa notificá-lo sobre o conflito de tipo no momento do desenvolvimento.
Revise o JavaScript e observe que não há alterações nele. O TypeScript foi capaz de fornecer verificação de tipo durante o desenvolvimento, mas não teve efeito no código JavaScript resultante porque não suporta tipos.

Outros recursos de código do TypeScript

O TypeScript tem mais recursos de codificação que você não encontrará em JavaScript:

Interfaces
Espaços de Nomes
Genéricos
Aulas abstratas
Modificadores de dados
Opcionais
Sobrecarga de funções
Decoradores
Tipo utils
palavra-chave readonly

Você aprenderá mais sobre alguns desses recursos em módulos posteriores.

Compatibilidade do TypeScript com JavaScript

TypeScript é um superconjunto estrito do ECMAScript 2015 (ECMAScript 6 ou ES6). Essa relação significa que todo o código JavaScript também é código TypeScript, e um programa TypeScript pode consumir JavaScript sem problemas.

Os navegadores compreendem apenas JavaScript. Para que seu aplicativo funcione, quando você o escreve em TypeScript, você precisa compilar seu código e convertê-lo em JavaScript. Você transforma o código TypeScript em código JavaScript usando o compilador TypeScript ou um transpiler compatível com TypeScript. O JavaScript resultante é um código simples e limpo que é executado em qualquer lugar em que o JavaScript seja executado: em um navegador, no Node.js ou em seus aplicativos.

Diagram of the relationship between JavaScript and TypeScript, where TypeScript can use JavaScript directly but must be compiled to become JavaScript.

Importante

Quando você trabalha com TypeScript, lembre-se em quase todas as situações que o TypeScript será compilado (ou transpilado) em JavaScript, e o JavaScript é realmente executado pelo tempo de execução. Você pode usar TypeScript em qualquer projeto onde você usa JavaScript.

Migrar de JavaScript para TypeScript

Adotar o TypeScript não é uma escolha binária, então você pode migrar gradualmente sua base de código. Você pode começar anotando seu JavaScript existente com JSDoc e, em seguida, alternar alguns arquivos para serem verificados pelo TypeScript. Você pode preparar sua base de código ao longo do tempo para ser convertida completamente.

Para obter mais informações sobre esse processo, consulte Tutoriais do TypeScript: migrando do JavaScript.

Continuar