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 🙂