Você pode descrever qual é a linguagem TypeScript?

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

Originalmente, escrevi essa resposta quando o TypeScript ainda estava fora do ar. Cinco anos depois, esta é uma boa visão geral, mas veja a resposta de Lodewijk abaixo para obter mais detalhes

Visualização de 1000 pés ...

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

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

Para um grande projeto JavaScript, a adoção do TypeScript pode resultar em software mais robusto, embora ainda seja implementável onde um aplicativo JavaScript comum seria executado.

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

Existem outras tecnologias como essa?

Há o CoffeeScript , mas isso realmente serve a um propósito diferente. IMHO, o CoffeeScript fornece legibilidade para os seres humanos, mas o TypeScript também fornece legibilidade profunda para as ferramentas por meio da digitação estática opcional (consulte esta publicação recente no blog para um pouco mais de crítica). Há também o Dart, mas esse é um substituto completo do JavaScript (embora possa produzir código JavaScript )

Exemplo

Como exemplo, veja alguns 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 parâmetros de método de classe. Isso é removido durante a tradução 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 declarados explicitamente, por exemplo, determinaria que o greet()método retornasse uma string.

Depurando TypeScript

Muitos navegadores e IDEs oferecem suporte direto à depuração por meio de mapas de origem. Consulte esta pergunta sobre estouro de pilha para obter mais detalhes: Depurando código TypeScript com o Visual Studio

Quer saber mais?

Originalmente, escrevi essa resposta quando o TypeScript ainda estava fora do ar. Confira a resposta de Lodewijk a esta pergunta para obter alguns detalhes mais atuais.

Relação do TypeScript com JavaScript

TypeScript é um superconjunto digitado de JavaScript que é compilado para JavaScript simples - typescriptlang.org .

JavaScript é uma linguagem de programação desenvolvida pelo Comitê Técnico da EMCA 39 , que é um grupo de pessoas compostas por diferentes partes interessadas. O TC39 é um comitê hospedado pela ECMA : uma organização de padrões internos. O JavaScript tem muitas implementações diferentes por muitos fornecedores diferentes (por exemplo, Google, Microsoft, Oracle, etc.). O objetivo do JavaScript é ser a língua franca da web.

O TypeScript é um superconjunto da linguagem JavaScript que possui um único compilador de código aberto e é desenvolvido principalmente por um único fornecedor: a Microsoft. O objetivo do TypeScript é ajudar a detectar erros desde o início de um sistema de tipos e tornar o desenvolvimento do JavaScript mais eficiente.

Essencialmente, o TypeScript atinge seus objetivos de três maneiras:

1. Suporte para recursos modernos de JavaScript - A linguagem JavaScript (não o tempo de execução) é padronizada pelos padrões ECMAScript . Nem todos os navegadores e tempos de execução do JavaScript são compatíveis com todos os recursos de todos os padrões do ECMAScript (consulte esta visão geral ). O TypeScript permite o uso de muitos dos recursos mais recentes do ECMAScript e os converte em destinos ECMAScript mais antigos de sua escolha (consulte a lista de destinos de compilação na --targetopção do compilador). Isso significa que você pode usar com segurança novos recursos, como módulos, funções lambda, classes, operador de propagação e desestruturação, mantendo a compatibilidade retroativa com navegadores mais antigos e tempos de execução do JavaScript.

2. Sistema de tipos avançados - O suporte a tipos 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, enumerações, 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 do TypeScript está a par da maioria das outras linguagens digitadas e, em alguns casos, sem dúvida mais poderoso.

3. Suporte às ferramentas do desenvolvedor - o compilador do TypeScript pode ser executado como um processo em segundo plano para oferecer suporte à compilação incremental e à integração do IDE, para que você possa navegar mais facilmente, identificar problemas, inspecionar possibilidades e refatorar sua base de código.

Relação do TypeScript com outras linguagens de destino JavaScript

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

Por um lado, você tem ferramentas à prova do futuro que adotam os padrões modernos do ECMAScript e o compilam nas 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 são direcionados ao JavaScript, como CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js e mais um host inteiro (consulte esta lista) Essas linguagens, embora possam ser melhores do que o futuro do JavaScript, correm um risco maior de não encontrar adoção suficiente para garantir seu futuro. Você também pode ter mais problemas para encontrar desenvolvedores experientes para alguns desses idiomas, embora os que você encontrará frequentemente sejam mais entusiasmados. A interoperabilidade com JavaScript também pode ser um pouco mais envolvente, pois eles são mais afastados do que realmente é o JavaScript.

O TypeScript fica entre esses dois extremos, equilibrando o risco. O TypeScript não é uma opção 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, possui excelente suporte à interoperabilidade de JavaScript e teve muita adoção recentemente.

Digitação estática opcional e inferência de tipo

JavaScript é digitado dinamicamente. Isso significa que o JavaScript não sabe que tipo de variável é até que seja realmente instanciada no tempo de execução. Isso também significa que pode ser tarde demais. O TypeScript adiciona suporte ao tipo ao JavaScript. Os erros causados ​​por suposições falsas de algum tipo de variável podem ser completamente erradicados se você jogar suas cartas da maneira certa (quão rigoroso você digita seu código ou se você digita seu código depende de você).

O TypeScript torna a digitação um pouco mais fácil e muito menos explícita pelo uso da inferência de tipo. 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 em 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á-la com uma sequência obviamente ocorra um erro de tempo de execução. Assim como você está acostumado em JavaScript. Isso funciona, porque quando nenhum tipo foi explicitamente designado e o tipo não pôde ser inferido, como no exemplo de divideByTwo, o TypeScript atribui implicitamente o tipo any. Isso significa que a assinatura de tipo da função divideByTwo se torna automaticamente function divideByTwo(x : any) : any. Há um sinalizador do compilador para impedir esse comportamento: --noImplicitAny. A ativação desse sinalizador oferece um maior grau de segurança, mas também significa que você precisará digitar mais.

Os tipos têm um custo associado a eles. Primeiro, existe uma curva de aprendizado e, segundo, é claro, vai custar um pouco mais de tempo para configurar uma base de código usando a digitação estrita adequada. Na minha experiência, esses custos valem totalmente a pena em qualquer base de código séria que você está compartilhando com outras pessoas. Um estudo em larga escala de linguagens de programação e qualidade de código no Github sugere que "linguagens estaticamente tipadas, em geral, são menos propensas a defeitos do que os tipos dinâmicos, e que a digitação forte é melhor que a digitação fraca na mesma consideração".

É interessante notar que este mesmo artigo conclui que o TypeScript é menos suscetível a erros que o JavaScript:

Para aqueles com coeficientes positivos, podemos esperar que o idioma esteja associado, ceteris paribus, a um número maior 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 têm menos probabilidade que a média de 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 TypeScript em suas informações de tipo avançado. Isso oferece 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. Através do preenchimento de código, você pode obter ajuda embutida em quaisquer funções que uma biblioteca possa oferecer. Não há mais necessidade de lembrá-los ou procurá-los em referências online. Os erros de compilação são relatados diretamente no IDE com uma linha ondulada vermelha enquanto você está ocupado 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 depurando.

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

Verificações nulas rigorosas

Erros de tempo de execução do formulário cannot read property 'x' of undefinedou undefined is not a functiongeralmente são causados ​​por erros no código JavaScript. O TypeScript pronto para uso já reduz a probabilidade de ocorrência desses tipos de erros, pois não é possível usar uma variável desconhecida pelo compilador TypeScript (com exceção das propriedades das anyvariáveis ​​digitadas). Ainda é possível utilizar 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 com o uso de tipos não anuláveis. Isso funciona da seguinte maneira:

Com as verificações nulas estritas ativadas ( --strictNullCheckssinalizador do compilador), o compilador TypeScript não permitirá undefinedque seja atribuído a uma variável, a menos que você declare explicitamente que é do tipo anulável. Por exemplo, let x : number = undefinedresultará em um erro de compilação. Isso se encaixa perfeitamente com a teoria dos tipos, pois undefinednão é um número. Pode-se definir xa ser um tipo de soma de numbere undefinedpara corrigir este: let x : number | undefined = undefined.

Quando se sabe que um tipo é anulável, o que significa que é do tipo que também pode ser do valor nullou undefined, o compilador TypeScript pode determinar, por meio da análise de tipo baseada no fluxo de controle, se seu código pode ou não usar com segurança uma variável. Em outras palavras, quando você verifica se uma variável é submetida, undefinedpor exemplo, a uma ifdeclaração, o compilador TypeScript inferirá que o tipo nessa 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 a compilação, o co-designer da conferência de TypeScript Anders Hejlsberg em 2016 deu uma explicação e demonstração detalhadas desse recurso: vídeo (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 TypeScript oferece suporte à compilação incremental ( --watchsinalizador do compilador), para que todas as alterações subseqüentes possam ser compiladas em maior velocidade.

O compilador TypeScript pode incorporar 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 por utilitários de depuração, como o Chrome DevTools e outros IDEs, para relacionar as linhas no JavaScript àquelas que as geraram no TypeScript. Isso permite definir pontos de interrupção e inspecionar variáveis ​​durante o tempo de execução diretamente no seu código TypeScript. As informações do mapa de origem funcionam muito bem, já existiam muito antes do TypeScript, mas a depuração do TypeScript geralmente não é tão boa quanto quando se usa JavaScript diretamente. Pegue a thispalavra - chave, por exemplo. Devido à semântica alterada da thispalavra-chave em torno de fechamentos desde o ES2015, thispode realmente existir durante o tempo de execução como uma variável chamada _this(consulte 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. Note-se que Babel sofre exatamente o mesmo tipo de problema.

Existem alguns outros truques que o compilador TypeScript pode fazer, como gerar código de interceptação com base em decoradores , gerar código de carregamento de módulo para diferentes sistemas de módulo e analisar JSX . No entanto, você provavelmente precisará de uma ferramenta de construção além do compilador Typescript. Por exemplo, se você deseja compactar seu código, precisará adicionar outras ferramentas ao processo de compilação para fazer isso.

Existem plugins de compilação TypeScript disponíveis para Webpack , Gulp , Grunt e praticamente qualquer outra ferramenta de criação de JavaScript disponível no mercado . A documentação do TypeScript possui uma seção sobre integração com ferramentas de construção, cobrindo todas elas. Um linter também está disponível, caso você queira ainda mais verificação do tempo de compilação. Também há um grande número de projetos iniciais que o ajudarão a iniciar o TypeScript em combinação com várias outras tecnologias como Angular 2, React, Ember, SystemJS, Webpack, Gulp, etc.

Interoperabilidade JavaScript

Como o TypeScript está tão intimamente relacionado ao JavaScript, ele possui ótimos recursos de interoperabilidade, mas é necessário algum trabalho extra para trabalhar com bibliotecas JavaScript no TypeScript. Definições typescript são necessários para que o compilador original datilografado entende que as chamadas de função como _.groupByou angular.copyou $.fadeOutnão estão em declarações ilegais fatos. As definições para essas funções são colocadas em .d.tsarquivos.

A forma mais simples que uma definição pode assumir é permitir que um identificador seja usado de qualquer maneira. Por exemplo, ao usar o Lodash , um arquivo de definição de linha única declare var _ : anypermitirá que você chame qualquer função desejada _, mas, é claro, você também poderá cometer erros: _.foobar()seria uma chamada TypeScript legal, mas é claro , uma chamada ilegal em tempo de execução. Se você deseja suporte adequado ao tipo e conclusão de código, seu arquivo de definição precisa ser mais exato (consulte as definições do lodash para obter um exemplo).

Os módulos Npm fornecidos com suas próprias definições de tipo são automaticamente compreendidos pelo compilador TypeScript (consulte a documentação ). Para praticamente qualquer outra biblioteca JavaScript semi-popular que não inclua suas próprias definições, alguém já disponibilizou definições de tipo por meio 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 no tempo de execução. Caso contrário, o TypeScript pode impedir que você chame uma função ou desreferencie uma variável que existe ou permita que você chame uma função ou desreferenciar 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 aborrecimento nisso e pode ser um dos motivos pelos 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ê souber o que está fazendo, poderá facilmente superar qualquer tipo de problema causado por arquivos de definição incorretos ou ausentes.

Convertendo de JavaScript para TypeScript

Qualquer .jsarquivo pode ser renomeado para um .tsarquivo e executado no compilador TypeScript para obter sintaticamente o mesmo código JavaScript que uma saída (se estivesse sintaticamente correto em primeiro lugar). Mesmo quando o compilador TypeScript obtém erros de compilação, ele ainda produz um .jsarquivo. Pode até aceitar .jsarquivos como entrada com a --allowJsbandeira. Isso permite que você comece com o TypeScript imediatamente. Infelizmente, é provável que ocorram erros de compilação no início. É preciso lembrar que estes não são erros de interrupção de exibição, como você pode estar acostumado com outros compiladores.

Os erros de compilação que se obtém no início ao converter um projeto JavaScript em um projeto TypeScript são inevitáveis ​​pela natureza do TypeScript. O TypeScript verifica a validade de todo o código e, portanto, ele precisa saber sobre todas as funções e variáveis ​​usadas. Assim, as definições de tipo precisam estar em vigor para todas elas, caso contrário, erros de compilação provavelmente ocorrerão. Como mencionado no capítulo acima, para praticamente qualquer estrutura JavaScript, há .d.tsarquivos que podem ser adquiridos facilmente com a instalação dos pacotes DefinitelyTyped. No entanto, pode ser que você tenha usado alguma biblioteca obscura para a qual não há definições TypeScript disponíveis ou que tenha preenchido polifonicamente algumas primitivas do 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 .d.tsarquivo e incluí-lo na filesmatriz do tsconfig.json , para que seja sempre considerado pelo compilador TypeScript. Nele declare os bits que o TypeScript não conhece como tipo any. Depois de eliminar todos os erros, você pode gradualmente introduzir a digitação nessas partes de acordo com suas necessidades.

Também serão necessários alguns trabalhos sobre a (re) configuração do seu pipeline de construção para inserir o TypeScript no pipeline de construção. Como mencionado no capítulo sobre compilação, existem muitos recursos bons por aí e eu encorajo você a procurar projetos iniciais que usem a combinação de ferramentas com as quais você deseja 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 constrói, quais arquivos ele usa, como é configurado, como funciona no seu IDE, como é estruturado, quais ferramentas ele usa etc. A conversão de uma grande base de código JavaScript em TypeScript é possível quando você sabe o que você está fazendo. Leia este blog, por exemplo, sobre como converter 600k linhas em texto datilografado em 72 horas ). Apenas certifique-se de ter uma boa compreensão do idioma antes de fazer o salto.

Adoção

O TypeScript é de código aberto (licenciado para Apache 2, consulte GitHub ) e suportado pela Microsoft. Anders Hejlsberg , arquiteto principal do C #, está liderando o projeto. É um projeto muito ativo; a equipe do TypeScript está lançando muitos recursos novos nos últimos anos e ainda existem muitos ótimos planejados (veja o roteiro ).

Alguns fatos sobre adoção e popularidade:

• Na pesquisa de desenvolvedores StackOverflow de 2017, o TypeScript foi o transpilador JavaScript mais popular (9º lugar no geral) e conquistou o terceiro lugar na categoria de linguagem de programação mais amada.
• Na pesquisa de 2018 do estado de js, o TypeScript foi declarado como um dos dois grandes vencedores na categoria de sabores JavaScript (com o ES6, o outro).
• Na pesquisa de dever de operação StackOverlow de 2019, o TypeScript chegou ao 9º lugar das linguagens mais populares entre os desenvolvedores profissionais, ultrapassando C e C ++. Mais uma vez, ficou em terceiro lugar entre as línguas mais amadas.

O TypeScript faz algo semelhante ao que less ou sass faz pelo CSS. Eles são superconjuntos, 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 ao idioma, e o código transpilado será js válido. Você pode até definir a versão JS na qual deseja o código resultante.

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

" Fundamentos do TypeScript " - um vídeo-curso do Pluralsight de Dan Wahlin e John Papa é realmente bom, atualmente (25 de março de 2016) atualizado 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 implementar a AMD e a possibilidade de usar o depurador do Visual Studio Typescript quando invocado no IE.

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

Script de ecma 5 (ES5), compatível com todos os navegadores e pré-compilado. ES6 / ES2015 e ES / 2016 vieram este ano com muitas mudanças. Portanto, para exibir essas mudanças, há algo entre o qual deve haver cuidado com o TypeScript.

• TypeScript é Types -> Significa que precisamos definir o tipo de dados de cada propriedade e métodos. Se você conhece C #, o Typecript é fácil de entender.

• A grande vantagem do TypeScript é identificar problemas relacionados ao tipo antes da produção. Isso permite que os testes de unidade falhem se houver algum tipo de incompatibilidade.