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 🙂