TypeScript vs. JavaScript: Understand the differences

the world wide web basicamente roda em JavaScript, HTML e CSS. Infelizmente, o JavaScript não possui vários recursos que ajudariam os desenvolvedores a usá-lo para aplicações de grande escala. Indique O Script.O que é JavaScript?

JavaScript started out as a scripting language for the Netscape Navigator web browser; Brendan Eich wrote the prototype over a period of 10 days in 1995. O nome JavaScript é um aceno à linguagem Java Sun Microsystem, embora as duas linguagens sejam bastante diferentes, e a semelhança de nomes tem levado a uma confusão significativa ao longo dos anos. JavaScript, que evoluiu significativamente, é agora suportado em todos os navegadores modernos da web.

JavaScript language

JavaScript is a multi-paradigm language. Tem sintaxe curly-bracket e semicolons, como a família C de línguas. Ele tem escrita fraca e dinâmica e é interpretado ou (mais frequentemente) apenas no tempo compilado. Em geral, JavaScript é de simples threaded, embora haja uma API de trabalhadores da Web que faz multithreading, e há eventos, chamadas de funções assíncronas, e callbacks.

JavaScript suporta programação orientada a objetos usando protótipos ao invés da herança de classe usada em C++, Java e C#, embora uma sintaxe class foi adicionada ao JavaScript ES6 em 2015. JavaScript também suporta programação funcional, incluindo fechamentos, recursão e lambdas (funções anônimas).

Antes de JavaScript ES6 a linguagem não tinha otimização de chamadas de cauda; agora ele faz, embora você precise ligar o modo restrito ('use strict') para habilitá-lo, e a implementação varia de navegador para navegador. Strict mode also changes the semantics of JavaScript, and changes some normally silent errors to throw errors.O que se passa com a designação “ES6”? O nome para a linguagem JavaScript padronizada é ECMAScript (ES), após o ECMA International standards body; ES6 também é chamado ECMAScript 2015 (ES2015). ES2020 é atualmente um projeto de norma.

Como um exemplo simples para dar-lhe o sabor da linguagem JavaScript, aqui está o código para decidir se é dia ou noite e dinamicamente colocar a saudação apropriada para uma chamada web elemento encontrado no browser de objeto de documento:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript ecossistema

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

Browser APIs include the document object model (DOM) and browser object model (BOM), Geolocation, Canvas (graphics), WebGL (GPU-accelerated graphics), HTMLMediaElement (audio and video), and WebRTC (real-time communications).

APIs de terceiros abundam. Algumas são interfaces para aplicações completas, como o Google Maps. Outros são utilitários que tornam a programação Javascript HTML5 e CSS mais fácil, como jQuery. Alguns, como o Express, são frameworks de aplicação para fins específicos; para o Express, o propósito é construir servidores de aplicações web e móveis no nó.js. Vários outros quadros foram construídos em cima do Express. Em 2016, discuti 22 frameworks JavaScript em um esforço para fazer sentido do que estava se tornando algo de um zoológico; muitos desses frameworks ainda existem de uma forma ou de outra, mas vários foram pelo caminho.

existem muitos mais módulos JavaScript, mais de 300.000. Para lidar com isso, usamos gerentes de pacotes, como npm, o Gerenciador de pacotes padrão para Node.js.Uma alternativa para npm é o fio, que veio do Facebook, e alega a vantagem de instalações determinísticas. Ferramentas similares incluem Bower (do Twitter), que gerencia componentes front-end em vez de Módulos de nó; Ender, que se chama irmã mais nova do npm; e jspm, que usa módulos ES (o mais recente padrão ECMA para módulos), ao invés de Módulos CommonJS, o mais antigo padrão de facto suportado pelo npm.

Webpack agrupa módulos JavaScript em ativos estáticos para o navegador. O navegador permite aos programadores escrever o nó.módulos de estilo js que compilam para uso no navegador. Grunt é um Executador de Tarefas JavaScript orientado a arquivos, e gulp é um sistema de compilação de streaming e execução de Tarefas JavaScript. A escolha entre grunt e gulp não é decisiva. Eu tenho instalado e usar qualquer um 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 de lint de linguagem C, que era um utilitário Unix padrão. JavaScript “linters” incluem JSLint, JSHint, e ESLint. Você pode automatizar a execução de linters após alterações de código usando um Executador de tarefas ou a sua IDE. Mais uma vez, a escolha entre os linters não é clara, e eu uso qualquer um que foi criado para um determinado projeto.Falando de editores e IDEs, revi 6 IDEs JavaScript e 10 editores JavaScript, mais recentemente em 2019. Minhas melhores escolhas foram Texto Sublime (editor muito rápido), Visual Studio Code (editor/IDE configurável) e WebStorm (IDE).

Transpilers permitem que você traduza algumas outras línguas, como CoffeeScript ou TypeScript para JavaScript, e traduzir JavaScript moderno (como o código ES2015) para um JavaScript básico que corre em (quase) qualquer navegador. (Todas as apostas estão fora para as primeiras versões do Internet Explorer. O transpilador mais comum para JavaScript moderno é Babel.

What is TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript (ES3 or higher; it’s configurable). O compilador de linha de comandos open source TypeScript pode ser instalado como um nó.pacote js. O suporte de TypeScript vem com Visual Studio 2017 e Visual Studio 2019, Visual Studio Code, e WebStorm, e pode ser adicionado ao Texto Sublime, Atom, Eclipse, Emacs e Vim. The TypeScript compiler/transpiler tsc is written in TypeScript.

TypeScript adiciona tipos opcionais, classes e módulos ao JavaScript, e suporta ferramentas para aplicações JavaScript de grande escala para qualquer navegador, para qualquer host, em qualquer so. Entre muitas outras vitórias para TypeScript, o popular framework Angular foi renovado em TypeScript.

tipos permitem aos desenvolvedores JavaScript usar ferramentas e práticas de desenvolvimento altamente produtivas, como verificação estática e refactoração de código ao desenvolver aplicações JavaScript.

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

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

TypeScript language

The TypeScript language accepts JavaScript as valid, but offers the additional options of type annotations, type checking at compile time, classes, and modules. Todos estes são tremendamente úteis quando você está tentando produzir software robusto. JavaScript simples gera erros apenas no tempo de execução, e então só se o seu programa acontece para chegar a um caminho com erros.

The TypeScript in 5 minutes tutorial makes the benefits clear. O ponto de partida é JavaScript puro com um .extensão ts:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

se compilar isto com tsc irá produzir um ficheiro idêntico com A.extensão js.

o tutorial tem que alterar este código de forma gradual, adicionando uma anotação de tipo person:string na definição da função, compilando, testando verificação de tipo pelo compilador, adicionando uma interface para um tipo person e, finalmente, adicionando uma classe para Student. O código final é:

class Student {
fullName: string;
constructor(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.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

quando você compila isso e olha para o JavaScript emitido, você verá que as classes em TypeScript são apenas uma estenografia para a mesma herança baseada em protótipos que é usada em javascript simples ES3. Note que as propriedades person.firstName e person.lastName são geradas automaticamente pelo compilador quando este vê os seus atributos public no construtor de classe Student, e também são transferidas para a interface Person. Um dos melhores benefícios do tipo de anotações em TypeScript é que eles são reconhecidos pelas ferramentas, como o Visual Studio Código:

IDG

Se houver erros no código como você editar no VS Código, você verá as mensagens de erro na aba Problemas, por exemplo, se você excluir o final da linha com a instanciação de Student:

IDG

a migração do tutorial JavaScript entra em detalhes sobre como atualizar um projeto JavaScript existente. Saltando sobre os passos de configuração ,o ponto crucial do método é renomear o seu.JS files to .um de cada vez. (Se o seu ficheiro usar o JSX, uma extensão usada pelo React, terá de o Renomear para .tsx em vez de .ts.) Em seguida, aperte a verificação de erro e corrigir os erros.

entre outras coisas, terá de alterar as declarações baseadas em módulos require() ou define() para escrever declarações de importação e adicionar ficheiros de declaração para quaisquer módulos de biblioteca que use. Você também deve reescrever as exportações do seu módulo usando a declaração TypeScript export. TypeScript suporta módulos CommonJS, como Node.o js tem.

se você obter erros sobre o número errado de argumentos, você pode escrever as assinaturas de sobrecarga da função TypeScript. É uma característica importante que falta ao JavaScript. Finalmente, você deve adicionar tipos às suas próprias funções e, quando apropriado, usar interfaces ou classes.

normalmente não precisa de escrever os seus próprios ficheiros 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.

uma vez que você tenha convertido todos os seus arquivos JavaScript para digitar, aprimorar os tipos e eliminar os erros, você terá uma base de código muito mais robusta. Em vez de corrigir constantemente os erros de tempo de execução relatados por testadores ou usuários, você será capaz de detectar os erros mais comuns estaticamente.

vale a pena ver Anders Hejlsberg discutir Dactilografia. Como você vai ouvir dele, escrito é JavaScript que balança.

Deixe uma resposta

O seu endereço de email não será publicado.