Arrays e objetos tipados
Uma lista de números não deveria aceitar um texto no meio, e um objeto tem um formato esperado. O TypeScript garante os dois.
Estudar esta lição interativa →Até aqui você tipou variáveis com um único valor: um texto, um número, um booleano. Mas a maior parte dos dados de um programa real não vem sozinha: vem em listas (as notas de uma turma, os itens de um carrinho) e em objetos (um produto com nome, preço e estoque). O TypeScript tipa os dois.
Para um array, a anotação é o tipo dos itens seguido de colchetes, tipo[]. number[] é "um array em que todo item é number"; string[] é "um array em que todo item é string". Rode o exemplo e repare no comentário da linha barrada:
// Arrays tipados: todo item precisa ser do mesmo tipo.
let notas: number[] = [8.5, 7, 9.2];
let nomes: string[] = ["Ana", "Bruno", "Carla"];
notas.push(10); // ok, é number
// notas.push("dez"); // erro: "dez" não é number
console.log(notas, nomes);Perceba o ganho: sem essa anotação, nada impediria alguém de, seis meses depois, dar um notas.push("dez") por engano, misturando texto no meio de uma lista de números, e só descobrir o estrago quando algum cálculo com a lista desse um resultado sem sentido. Com o array tipado, esse erro nem chega a existir: o diagnóstico aparece na hora.
Para um objeto, a ideia é parecida: você descreve, propriedade por propriedade, qual o tipo de cada uma, entre chaves. É a mesma sintaxe que você já viu de relance na primeira lição do curso, com { nome: string }, só que agora com mais propriedades:
// Um objeto também pode ter seu formato descrito, propriedade por
// propriedade. Isso é o que chamamos de "type inline" (sem dar nome a ele):
let produto: { nome: string; preco: number; emEstoque: boolean } = {
nome: "Mouse sem fio",
preco: 89.9,
emEstoque: true,
};
console.log(`${produto.nome}: R$ ${produto.preco}`);Pense num objeto tipado como um formulário impresso: cada campo já vem etiquetado ("nome: preencha com texto", "preço: preencha com número"), e o formulário recusa ser considerado "completo" se um campo estiver vazio ou preenchido com o tipo de informação errado. É o mesmo contrato que uma interface vai formalizar, com nome próprio, lá no Módulo 5; por enquanto, este formato "solto" já resolve bem casos simples.
Dentro de um tipo de objeto, cada propriedade é separada por ponto e vírgula (ou vírgula, as duas formas são aceitas): { nome: string; preco: number }. Não confunda com a sintaxe de um objeto de verdade (com valores), que sempre usa vírgula entre propriedades.
// Sua vez! Anote "precos" como array só de números e "cliente" com nome (string)
// e ativo (boolean). Depois da anotação, uma linha vai ficar vermelha: corrija-a.
let precos = [];
precos.push(19.9, 29.9);
precos.push("grátis");
let cliente = { nome: "Diego", ativo: true };
console.log(precos, cliente);Complete a anotação do array e rode.