Aprenda o TypeScript em 5 minutos

Um rápido tutorial de introdução sobre como escrever JavaScript estático

 

O TypeScript é um superconjunto digitado de JavaScript, destinado a tornar a linguagem mais escalonável e confiável.

É open-source, e foi mantido pela Microsoft desde que o criou em 2012. No entanto, o TypeScript teve seu primeiro avanço como a principal linguagem de programação do Angular 2. Ele continua crescendo desde então, também nas comunidades React e Vue.

Neste tutorial, você aprenderá os fundamentos do TypeScript com a ajuda de exemplos práticos.

Também estamos prestes a lançar um curso de TypeScript gratuito de 22 partes no Scrimba. Deixe seu email aqui se você quiser acesso antecipado!

Vamos começar.

Instalando o TypeScript

Antes de começarmos a codificar, precisamos instalar o TypeScript em nosso computador. Usaremos o npm para isso, basta abrir o terminal e digitar o seguinte comando:

 npm install -g typescript

Uma vez instalado, podemos verificá-lo executando o comando tsc -v que exibirá a versão do TypeScript instalada.

Escrevendo algum código

Vamos criar nosso primeiro arquivo TypeScript e escrever algum código dentro dele. Abra o seu IDE ou Editor de Texto favorito e crie um arquivo com o nome de first.ts – Para arquivos TypeScript, usamos a extensão .ts

Por enquanto, vamos apenas escrever algumas linhas de JavaScript simples, já que todo código JavaScript também é um código TypeScript válido:

 seja um = 5; 
 seja b = 5; 
 seja c = a + b;
 console.log (c);

O próximo passo é compilar nosso TypeScript em JavaScript simples, como os navegadores querem que os arquivos .js leiam.

Compilando o TypeScript

Para compilar, vamos executar o comando tsc filename.ts , que cria um arquivo JavaScript com o mesmo nome de arquivo, mas com uma extensão diferente, e que eventualmente podemos passar para nossos navegadores.

Então abra o terminal no local do arquivo e execute o seguinte comando:

 tsc first.ts

Dica : Se você deseja compilar todos os arquivos TypeScript dentro de qualquer pasta, use o comando: tsc *.ts

Tipos de dados

TypeScript – como o próprio nome sugere – é a versão digitada do JavaScript. Isso significa que podemos especificar tipos para diferentes variáveis ??no momento da declaração. Eles sempre manterão o mesmo tipo de dados nesse escopo.

A digitação é um recurso muito útil para garantir confiabilidade e escalabilidade. A verificação de tipos ajuda a garantir que nosso código funcione conforme o esperado. Além disso, ajuda na busca de erros e erros, e documentando adequadamente nosso código.

A sintaxe para atribuir um tipo a qualquer variável é escrever o nome da variável seguido de um sinal : e, em seguida, o nome do tipo seguido por um sinal = e o valor da variável.

Existem três tipos diferentes no TypeScript: o tipo any , o Built-in types e o User-defined types. Vamos dar uma olhada em cada um deles.

qualquer tipo

O tipo de dados any é o superconjunto de todos os tipos de dados no TypeScript. Dar a qualquer variável o tipo de any é equivalente a sair da verificação de tipo para uma variável.

 let myVariable: any = 'Esta é uma string'

Tipos embutidos

Esses são os tipos criados no TypeScript. Eles incluem number , string , boolean , void , null e undefined .

 let num: number = 5; 
 deixe o nome: string = 'Alex'; 
 deixe isPresent: boolean = true;

Tipos definidos pelo usuário

Os tipos User-defined incluem enum , class , interface , array e tuple . Vamos discutir alguns deles mais adiante neste artigo.

Programação orientada a objetos

O TypeScript suporta todos os recursos da programação orientada a objetos, como classes e interfaces. Esse recurso é um grande impulso para o JavaScript – ele sempre tem lutado com sua funcionalidade de OOP, especialmente porque os desenvolvedores começaram a usá-lo para aplicativos de grande escala.

Classe

Na programação orientada a objetos, uma classe é o modelo de objetos. Uma classe define como um objeto seria semelhante em termos de recursos e funcionalidades desse objeto. Uma classe também encapsula dados para o objeto.

O TypeScript tem um suporte interno para classes, que não eram suportadas pelo ES5 e versões anteriores. Isso significa que podemos usar a palavra-chave class para declarar facilmente uma.

 classe carro {
 // Campos 
 model: String; 
 portas: Number; 
 isElectric: Boolean;
 construtor (modelo: String, portas: Number, isElectric: Boolean) { 
 this.model = modelo; 
 this.doors = portas; 
 this.isElectric = isElectric; 
 }
 displayMake (): void { 
 console.log (`Este carro é $ {this.model}`); 
 }
 }

No exemplo acima, declaramos uma classe Car , juntamente com algumas de suas propriedades, que estamos inicializando no constructor . Também temos um método que exibe algumas mensagens usando sua propriedade.

Vamos ver como podemos criar uma nova instância dessa classe:

 const Prius = carro novo ('Prius', 4, true); 
 Prius.displayMake (); // Este carro é Prius

Para criar um objeto de uma classe, usamos a palavra-chave new e chamamos o construtor da classe e passamos as propriedades. Agora este objeto Prius tem suas próprias propriedades de model , doors e isElectric . O objeto também pode chamar o método de displayMake , que teria acesso às propriedades do Prius .

Interface

O conceito de interfaces é outro recurso poderoso do TypeScript, que permite definir a estrutura das variáveis. Uma interface é como um contrato sintático ao qual um objeto deve obedecer.

Interfaces são melhor descritas através de um exemplo real. Então, suponha que tenhamos um objeto de Car :

 carro const = { 
 modelo: 'Prius', 
 make: 'Toyota', 
 display () => {console.log ('oi'); } 
 }

Se olharmos para o objeto acima e tentarmos extrair sua assinatura, seria:

 { 
 modelo: String, 
 make: String, 
 display (): void 
 }

Se quisermos reutilizar essa assinatura, podemos declará-la na forma de uma interface. Para criar uma interface, usamos a interface palavras-chave.

 interface ICar { 
 modelo: String, 
 make: String, 
 display (): void 
 }
 carro const: ICar = { 
 modelo: 'Prius', 
 make: 'Toyota', 
 display () => {console.log ('oi'); } 
 }

Aqui, declaramos uma interface chamada ICar e criamos um objeto Car . Car agora é vinculado à interface do ICar , garantindo que o objeto Car defina todas as propriedades que estão na interface.

Conclusão

Então, espero que isso tenha lhe dado um rápido vislumbre de como o TypeScript pode tornar seu JavaScript mais estável e menos propenso a bugs.

O TypeScript está ganhando muito impulso no mundo do desenvolvimento da web. Há também uma quantidade crescente de desenvolvedores do React que estão adotando. O TypeScript é definitivamente algo que qualquer desenvolvedor de front-end em 2018 deve estar ciente.

Se você quiser aprender profundamente sobre o TypeScript, deixe seu e-mail aqui e avisaremos assim que liberarmos o curso!

Codificação feliz 🙂

Texto original em inglês.