www - O que é o TypeScript e por que eu o utilizaria no lugar do JavaScript?




www typescript (4)

Você pode por favor descrever o que é a linguagem TypeScript?

O que pode fazer que JavaScript ou bibliotecas disponíveis não possam fazer, isso me daria motivos para considerá-lo?


Originalmente, escrevi essa resposta quando o Typescript ainda era hot-off-the-presses. Cinco anos depois, esta é uma visão geral OK, mas veja abaixo a resposta de Lodewijk para mais detalhes.

Visão de 1000 pés ...

O TypeScript é um superconjunto de JavaScript que fornece principalmente tipificação, classes e interfaces estáticas opcionais. Um dos grandes benefícios é permitir que os IDEs forneçam um ambiente mais rico para detectar erros comuns à medida que você digita o código .

Para ter uma ideia do que quero dizer, assista ao vídeo introdutório da Microsoft sobre o idioma.

Para um grande projeto JavaScript, adotar o TypeScript pode resultar em um software mais robusto, enquanto ainda está sendo implantado onde um aplicativo JavaScript regular seria executado.

Ele é de código aberto, mas você só obtém o Intellisense inteligente ao digitar, se usar um IDE suportado. Inicialmente, esse era apenas o Visual Studio da Microsoft (também mencionado no post do blog de Miguel de Icaza ). Atualmente, outros IDEs oferecem suporte a TypeScript também .

Existem outras tecnologias como esta?

CoffeeScript , mas isso realmente serve a um propósito diferente. IMHO, o CoffeeScript fornece legibilidade para humanos, mas o TypeScript também fornece uma legibilidade profunda para ferramentas através de sua tipagem estática opcional (veja este post recente para um pouco mais de crítica). Há também o Dart mas é um substituto completo para o JavaScript (embora possa produzir código JavaScript )

Exemplo

Como exemplo, aqui está um pouco de TypeScript (você pode brincar com isso no Playground TypeScript )

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

E aqui está o JavaScript que produziria

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Observe como o TypeScript define o tipo de variáveis ​​de membro e os parâmetros do método de classe. Isso é removido ao traduzir para JavaScript, mas usado pelo IDE e pelo compilador para detectar erros, como passar um tipo numérico para o construtor.

Também é capaz de inferir tipos que não são explicitamente declarados, por exemplo, determinaria que o método greet() retorna uma string.

Depuração de Texto Datilografado

Muitos navegadores e IDEs oferecem suporte direto a depuração através de sourcemaps. Veja esta pergunta sobre estouro de pilha para mais detalhes: Depurando o código TypeScript com o Visual Studio

Quer saber mais?

Originalmente, escrevi essa resposta quando o Typescript ainda era hot-off-the-presses. Confira a resposta de Lodewijk a esta pergunta para alguns detalhes mais atuais.


" Fundamentos do TypeScript " - um curso em vídeo da Pluralsight de Dan Wahlin e John Papa é realmente bom, atualizado (25 de março de 2016) para refletir o TypeScript 1.8, introdução ao Typescript.

Para mim, os recursos realmente bons, além das boas possibilidades para o intellisense, são as classes , interfaces , módulos , a facilidade de implementação do AMD e a possibilidade de usar o depurador do Visual Studio Typescript quando chamado com o IE.

Para resumir : Se usado como pretendido, o Typescript pode tornar a programação JavaScript mais confiável e mais fácil. Pode aumentar a produtividade do programador JavaScript significativamente sobre o SDLC completo.


Embora a resposta aceita seja boa, senti que realmente não faz justiça a TypeScript neste momento. Não são mais os primeiros dias. O TypeScript está encontrando muito mais adoção agora, com vários frameworks populares sendo escritos em TypeScript. As razões pelas quais você deve escolher o TypeScript em vez do JavaScript são muitas agora.

Relação ao JavaScript

O TypeScript é um tipo moderno de JavaScript +. Trata-se de pegar bugs cedo e torná-lo um desenvolvedor mais eficiente, enquanto ao mesmo tempo aproveita a comunidade JavaScript.

JavaScript é padronizado através dos padrões ECMAScript. Os navegadores mais antigos não suportam todos os recursos dos padrões ECMAScript mais recentes (consulte esta table ). O TypeScript suporta novos padrões ECMAScript e os compila para os alvos ECMAScript (mais antigos) de sua escolha (os alvos atuais são 3, 5 e 6 [aka 2015]). Isso significa que você pode usar recursos do ES2015 e posteriores, como módulos, funções lambda, classes, o operador de dispersão e desestruturação, mantendo-se compatível com os navegadores mais antigos.

O suporte ao tipo não faz parte do padrão ECMAScript e provavelmente nunca será devido à natureza interpretada em vez da natureza compilada do JavaScript. O sistema de tipos do TypeScript é incrivelmente rico e inclui: interfaces, enums, tipos híbridos, genéricos, tipos de união / interseção, modificadores de acesso e muito mais. O site oficial do TypeScript fornece uma visão geral desses recursos. O sistema de tipos de datilografia hoje está em comparação com outras linguagens tipificadas e, em alguns casos, indiscutivelmente mais poderoso.

Relação com outros idiomas de segmentação de JavaScript

O TypeScript tem uma filosofia única em comparação com outras linguagens que compilam para JavaScript. O código JavaScript é um código TypeScript válido; O TypeScript é um superconjunto de JavaScript. Você pode quase renomear seus arquivos .js para arquivos .ts e começar a usar o TypeScript (consulte "Interoperabilidade do JavaScript" abaixo). Os arquivos TypeScript são compilados para JavaScript legível, de modo que a migração de volta é possível e entender o TypeScript compilado não é nada difícil. O TypeScript baseia-se nos sucessos do JavaScript, melhorando os seus pontos fracos.

Por um lado, você tem ferramentas de provas futuras que levam os padrões modernos do ECMAScript e compilam-nas em versões mais antigas do JavaScript, sendo o Babel o mais popular. Por outro lado, você tem idiomas que podem diferir totalmente do JavaScript que tem como alvo o JavaScript, como o Coffeescript, o Clojure, o Dart, o Elm, o Haxe, o ScalaJs, e um host inteiro a mais (veja esta list ). Esses idiomas, embora possam ser melhores do que os que o futuro do JavaScript pode levar, correm um risco maior de não encontrar adoção suficiente para que seu futuro seja garantido. Você também pode ter mais problemas para encontrar desenvolvedores experientes em alguns desses idiomas, embora os que você encontrará possam ser mais entusiasmados. A interoperabilidade com o JavaScript também pode ser um pouco mais envolvida, já que eles são mais distantes do que o JavaScript realmente é.

O TypeScript fica entre esses dois extremos, equilibrando assim o risco. O TypeScript não é uma escolha arriscada por nenhum padrão. É preciso muito pouco esforço para se acostumar se você estiver familiarizado com JavaScript, já que não é uma linguagem completamente diferente, tem excelente suporte a interoperabilidade de JavaScript e tem visto muita adoção recentemente.

Opcionalmente, tipagem estática e inferência de tipos

JavaScript é digitado dinamicamente. Isso significa que o JavaScript não sabe o tipo de variável até que seja realmente instanciado em tempo de execução. Isso também significa que pode ser tarde demais. O TypeScript adiciona suporte ao tipo para JavaScript. Erros que são causados ​​por falsas suposições de alguma variável sendo de um certo tipo podem ser completamente erradicados se você jogar suas cartas corretamente (quão rigoroso você digita seu código ou se você digitar seu código é com você).

O TypeScript torna a digitação um pouco mais fácil e muito menos explícita pelo uso da inferência de tipos. Por exemplo: var x = "hello" no TypeScript é o mesmo que var x : string = "hello" . O tipo é simplesmente inferido de seu uso. Mesmo que você não digite explicitamente os tipos, eles ainda estão lá para evitar que você faça algo que, de outra forma, resultaria em um erro de tempo de execução.

O TypeScript é opcionalmente digitado por padrão. Por exemplo, function divideByTwo(x) { return x / 2 } é uma função válida no TypeScript que pode ser chamada com qualquer tipo de parâmetro, mesmo que chamá-lo com uma string resultará obviamente em um erro de tempo de execução. Assim como você está acostumado no JavaScript. Isso funciona, porque quando nenhum tipo foi explicitamente atribuído e o tipo não pôde ser inferido, como no exemplo divideByTwo, o TypeScript implicitamente atribuirá o tipo any . Isto significa que a assinatura do tipo da function divideByTwo(x : any) : any automaticamente se torna function divideByTwo(x : any) : any . Existe um sinalizador de compilador para não permitir este comportamento: --noImplicitAny . Ativar esse sinalizador oferece um grau maior de segurança, mas também significa que você terá que digitar mais.

Tipos têm um custo associado a eles. Primeiro de tudo, há uma curva de aprendizado e, em segundo lugar, é claro, você terá um pouco mais de tempo para configurar uma base de código usando a digitação correta. Na minha experiência, esses custos valem totalmente a pena em qualquer base de código séria que você esteja compartilhando com outras pessoas. Um estudo em larga escala de Linguagens de Programação e Qualidade de Código no Github sugere que "as linguagens estaticamente tipadas em geral são menos propensas a defeitos do que os tipos dinâmicos, e que a tipagem forte é melhor que a tipagem fraca no mesmo sentido".

É interessante notar que este mesmo artigo descobre que o TypeScript é menos propenso a erros do que o JavaScript:

Para aqueles com coeficientes positivos, podemos esperar que a linguagem esteja associada, ceteris paribus, a um maior número de correções de defeitos. Essas linguagens incluem C, C ++, JavaScript , Objective-C, Php e Python. Os idiomas Clojure, Haskell, Ruby, Scala e TypeScript , todos têm coeficientes negativos, o que implica que essas linguagens são menos prováveis ​​do que a média para resultar em confirmações de correção de defeitos.

Suporte IDE aprimorado

A experiência de desenvolvimento com o TypeScript é uma grande melhoria em relação ao JavaScript. O IDE é informado em tempo real pelo compilador do TypeScript em suas informações de tipo rich. Isso dá algumas vantagens importantes. Por exemplo, com o TypeScript você pode fazer refatorações com segurança, como renomear toda a sua base de código. Por meio da complementação de código, você pode obter ajuda em linha sobre quaisquer funções que uma biblioteca possa oferecer. Não há mais necessidade de lembrá-los ou procurá-los em referências on-line. Os erros de compilação são relatados diretamente no IDE com uma linha rabiscada vermelha enquanto você está ocupada codificando. Em suma, isso permite um ganho significativo de produtividade em comparação ao trabalho com JavaScript. Pode-se gastar mais tempo codificando e menos tempo debugando.

Existe uma grande variedade de IDEs que possuem excelente suporte para o TypeScript, como o Visual Studio Code, o WebStorm, o Atom e o Sublime.

Verificações de nulos rigorosos

Erros de tempo de execução do formulário cannot read property 'x' of undefined ou undefined is not a function muito comumente causada por erros no código JavaScript. Fora da caixa, o TypeScript já reduz a probabilidade de ocorrência desses tipos de erros, pois não é possível usar uma variável que não é conhecida pelo compilador do TypeScript (com exceção das propriedades de any variável tipada). Ainda é possível usar por engano uma variável definida como undefined . No entanto, com a versão 2.0 do TypeScript, você pode eliminar todos esses tipos de erros por meio do uso de tipos não anuláveis. Isso funciona da seguinte maneira:

Com as verificações de nulos restritos ativadas ( --strictNullChecks compilador --strictNullChecks ), o compilador do TypeScript não permitirá que o undefined seja atribuído a uma variável, a menos que você declare explicitamente que ele seja do tipo anulável. Por exemplo, se let x : number = undefined resultará em um erro de compilação. Isso se encaixa perfeitamente com a teoria dos tipos, já que o undefined não é um número. Pode-se definir x para ser um tipo de soma de number e undefined para corrigir isso: let x : number | undefined = undefined let x : number | undefined = undefined .

Uma vez que um tipo é anulável, ou seja, de um tipo que também pode ser do valor null ou undefined , o compilador do TypeScript pode determinar através de análise de tipo baseada no fluxo de controle se seu código pode ou não usar uma variável com segurança. Em outras palavras, quando você verifica se uma variável está undefined por exemplo, uma instrução if , o compilador de TypeScript inferirá que o tipo na ramificação do fluxo de controle do seu código não é mais anulável e, portanto, pode ser usado com segurança. Aqui está um exemplo simples:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

Durante o co-designer da conferência build 2016 do TypeScript, Anders Hejlsberg deu uma explicação detalhada e demonstração deste recurso: video (das 44:30 às 56:30).

Compilação

Para usar o TypeScript, você precisa de um processo de compilação para compilar o código JavaScript. O processo de compilação geralmente leva apenas alguns segundos dependendo do tamanho do seu projeto. O compilador do TypeScript suporta compilação incremental ( --watch compilador --watch ), para que todas as alterações subsequentes possam ser compiladas em maior velocidade.

O compilador TypeScript pode inline as informações do mapa de origem nos arquivos .js gerados ou criar arquivos .map separados. As informações do mapa de origem podem ser usadas pelos utilitários de depuração, como o Chrome DevTools e outros IDEs, para relacionar as linhas no JavaScript com as que os geraram no TypeScript. Isso possibilita que você defina pontos de interrupção e inspecione variáveis ​​durante o tempo de execução diretamente no seu código TypeScript. As informações do mapa de origem funcionam muito bem, era muito antes do TypeScript, mas a depuração do TypeScript geralmente não é tão boa quanto ao usar o JavaScript diretamente. Tome a palavra this chave this por exemplo. Devido à semântica alterada da palavra this chave this torno de closures desde ES2015, this pode realmente existir durante o tempo de execução como uma variável chamada _this (veja esta resposta ). Isso pode confundi-lo durante a depuração, mas geralmente não é um problema se você souber ou inspecionar o código JavaScript. Deve-se notar que Babel sofre exatamente o mesmo tipo de problema.

Existem alguns outros truques que o compilador TypeScript pode fazer, como gerar código interceptado baseado em decorators , gerar código de carregamento do módulo para diferentes sistemas de módulos e analisar o JSX . No entanto, você provavelmente precisará de uma ferramenta de compilação além do compilador de Datilografe. Por exemplo, se você quiser compactar seu código, você terá que adicionar outras ferramentas ao seu processo de compilação para fazer isso.

Existem plugins de compilação do TypeScript disponíveis para Webpack , Gulp , Grunt e praticamente qualquer outra ferramenta de criação de JavaScript existente. A documentação do TypeScript tem uma seção sobre integração com ferramentas de construção abrangendo todas elas. Um linter também está disponível para o caso de você precisar de mais tempo na verificação. Há também um grande número de projetos de sementes que ajudarão você a usar o TypeScript em combinação com outras tecnologias, como Angular 2, React, Ember, SystemJs, WebPack, Gulp etc.

Interoperabilidade de JavaScript

Como o TypeScript é tão estreitamente relacionado ao JavaScript, ele tem excelentes recursos de interoperabilidade, mas é necessário algum trabalho extra para trabalhar com bibliotecas JavaScript no TypeScript. As definições de TypeScript são necessárias para que o compilador do TypeScript entenda que chamadas de função como _.groupBy ou angular.copy ou $.fadeOut não são declarações ilegais. As definições para essas funções são colocadas em arquivos .d.ts .

A forma mais simples que uma definição pode tomar é permitir que um identificador seja usado de qualquer forma. Por exemplo, ao usar o Lodash , um único arquivo de definição de linha declare var _ : any permitirá que você chame qualquer função que desejar em _ , mas é claro que você ainda pode cometer erros: _.foobar() seria um erro. chamada legal de TypeScript, mas é claro uma chamada ilegal em tempo de execução. Se você quiser suporte de tipo apropriado e conclusão de código, seu arquivo de definição precisa ser mais exato (veja definições de lodash para um exemplo).

Módulos NPM que vêm pré-empacotados com suas próprias definições de tipo são automaticamente entendidos pelo compilador TypeScript (consulte a documentation ). Para praticamente qualquer outra biblioteca JavaScript semi-popular que não inclua suas próprias definições, alguém já fez definições de tipos disponíveis através de outro módulo npm. Esses módulos são prefixados com "@ types /" e vêm de um repositório do Github chamado DefinitelyTyped .

Há uma ressalva: as definições de tipo devem corresponder à versão da biblioteca que você está usando em tempo de execução. Se não o fizerem, o TypeScript pode impedir que você chame uma função ou desreereça uma variável existente ou permita chamar uma função ou excluir a referência de uma variável que não existe, simplesmente porque os tipos não correspondem ao tempo de execução no tempo de compilação. . Portanto, certifique-se de carregar a versão correta das definições de tipo para a versão correta da biblioteca que você está usando.

Para ser honesto, há um pequeno problema nisso e pode ser uma das razões pelas quais você não escolhe o TypeScript, mas prefere algo como o Babel que não sofre com a necessidade de obter definições de tipo. Por outro lado, se você sabe o que está fazendo, pode facilmente superar qualquer tipo de problema causado por arquivos de definição incorretos ou ausentes.

Convertendo do JavaScript para o TypeScript

Qualquer arquivo .js pode ser renomeado para .ts e executado através do compilador do TypeScript para obter sintaticamente o mesmo código JavaScript de uma saída (se estiver sintaticamente correto em primeiro lugar). Mesmo quando o compilador do TypeScript recebe erros de compilação, ele ainda produzirá um arquivo .js . Ele pode até aceitar arquivos .js como entrada com o sinalizador --allowJs . Isso permite que você comece com o TypeScript imediatamente. Infelizmente, os erros de compilação provavelmente ocorrerão no começo. É preciso lembrar que estes não são erros de parada de exibição, como você pode estar acostumado com outros compiladores.

Os erros de compilação que se tem no começo ao converter um projeto JavaScript em um projeto TypeScript são inevitáveis ​​pela natureza do TypeScript. O TypeScript verifica todo o código quanto à validade e, portanto, precisa saber sobre todas as funções e variáveis ​​que são usadas. Assim, as definições de tipo precisam estar em vigor para todos eles, caso contrário, erros de compilação podem ocorrer. Como mencionado no capítulo acima, para praticamente qualquer framework JavaScript existem arquivos .d.ts que podem ser facilmente adquiridos com a instalação de DefinitelyTyped . No entanto, pode ser que você tenha usado alguma biblioteca obscura para a qual não há definições de TypeScript disponíveis ou que você tenha preenchido algumas primitivas de JavaScript. Nesse caso, você deve fornecer definições de tipo para esses bits para que os erros de compilação desapareçam. Basta criar um arquivo .d.ts e incluí-lo na matriz de files do tsconfig.json, para que seja sempre considerado pelo compilador do TypeScript. Nele declare aqueles bits que o TypeScript não conhece como tipo any . Depois de eliminar todos os erros, você poderá introduzir gradualmente essas partes de acordo com suas necessidades.

Alguns trabalhos sobre (re) configuração do seu pipeline de construção também serão necessários para obter o TypeScript no pipeline de construção. Como mencionado no capítulo sobre compilação, há muitos recursos bons e encorajo-o a procurar projetos-semente que usem a combinação de ferramentas com as quais você quer trabalhar.

O maior obstáculo é a curva de aprendizado. Encorajo-vos a brincar com um pequeno projeto no início. Veja como ele funciona, como ele é construído, quais arquivos ele usa, como ele é configurado, como ele funciona no IDE, como ele é estruturado, quais ferramentas ele usa, etc. É possível converter uma grande base de código JavaScript em TypeScript quando você sabe o que você está fazendo. Leia este blog, por exemplo, na conversão de linhas de 600k para texto datilografado em 72 horas ). Apenas certifique-se de ter uma boa compreensão da linguagem antes de dar o salto.

Adoção

O TypeScript é de código aberto (Apache 2 licenciado, consulte o github ) e é suportado pela Microsoft. Anders Hejlsberg , o principal arquiteto do C # está liderando o projeto. É um projeto muito ativo; A equipe do TypeScript tem lançado muitos novos recursos nos últimos anos e muitos dos melhores ainda estão planejados para vir (veja o roadmap ).

Na pesquisa de desenvolvedores do 2017, o TypeScript foi o transpilador de JavaScript mais popular (9º lugar no geral) e conquistou o terceiro lugar na categoria de linguagem de programação mais amada.


O TypeScript faz algo semelhante ao que menos ou menos faz pelo CSS. Eles são super conjuntos, o que significa que todo código JS que você escreve é ​​um código TypeScript válido. Além disso, você pode usar os outros itens que ele adiciona à linguagem, e o código transpilado será válido js. Você pode até definir a versão JS que você deseja que o seu código resultante.

Atualmente TypeScript é um super conjunto de ES2015, então pode ser uma boa escolha para começar a aprender os novos recursos js e transpilar para o padrão necessário para o seu projeto.







typescript