Nesta lição, você aprenderá como adicionar tipos para objetos e arrays. Vamos dar uma olhada nos arrays primeiro. Aqui está um exemplo de um array de linguagens de programação:

const programmingLanguages = ["Java", "C++", "Python"];

Se você quiser tipar explicitamente esse array como um array de strings, então você pode tipá-lo como string[]:

const programmingLanguages:string[] = ["Java", "C++", "Python"];

Como você aprendeu anteriormente, o TypeScript será inteligente o suficiente para inferir o tipo como um array de strings se você apenas escrever isto:

const programmingLanguages = ["Java", "C++", "Python"];

Mas digitar explicitamente ajudará em situações se você tentar adicionar outro tipo ao array assim:

// Type 'number' is not assignable to type 'string'.(2322)
const programmingLanguages:string[] = ["Java", 9, "Python"];

Outra forma de digitar arrays é usar esta sintaxe:

const programmingLanguages:Array<string> = ["Java", "C++", "Python"];

Fundamentalmente, essas duas sintaxes são as mesmas e a escolha entre as duas geralmente é uma questão de preferência. Agora, vamos dar uma olhada em como digitar objetos. Aqui está um exemplo de um literal de object:

const developer = {
  firstName: "Jessica",
  isEmployed: true
}

Para tipar explicitamente as propriedades do objeto, você pode usar esta sintaxe:

const developer: { firstName: string, isEmployed: boolean } = {
  firstName: "Jessica",
  isEmployed: true
}

Se você tentar adicionar ou remover propriedades do objeto, então você receberá um erro como este:

// Property 'isEmployed' is missing in type '{ firstName: string; }' but required in type '{ firstName: string; isEmployed: boolean; }'
const developer: { firstName: string, isEmployed: boolean } = {
  firstName: "Jessica",
}

Você pode tornar propriedades de objeto opcionais usando o ? após o nome da propriedade assim:

const developer: { firstName: string, isEmployed?: boolean } = {
  firstName: "Jessica",
}

O TypeScript não exibirá mais um erro porque a propriedade isEmployed foi marcada como opcional. Até agora, todos os exemplos de objeto tiveram propriedades restritivas. Isso significa que listamos explicitamente cada propriedade que o objeto pode ter:

const developer: { firstName: string, isEmployed: boolean } = {
  firstName: "Jessica",
  isEmployed: true
}

Mas e se você não souber todos os nomes das propriedades antecipadamente? E se você quiser um objeto que possa ter qualquer número de propriedades mas todos os valores devem seguir um tipo específico? Bem, existem duas maneiras de realizar isso. A primeira maneira é usar um Record, que é um tipo utilitário genérico embutido no TypeScript. Aqui está a sintaxe básica:

Record<Keys, ValueType>

O primeiro tipo representa o tipo das chaves enquanto o segundo tipo representa o tipo dos valores. Aqui está um exemplo de usar um Record para um userRoles objeto:

const userRoles: Record<string, string> = {
  admin: "full-access",
  editor: "limited-access",
  viewer: "read-only"
};

Este userRoles objeto pode ter quaisquer chaves do tipo string e todos os valores devem ser strings. Se você tentar atribuir um valor que não seja string, receberá um erro:

// Type 'number' is not assignable to type 'string'
const userRoles: Record<string, string> = {
  admin: 1
};

A segunda forma de escrever a mesma ideia é com uma assinatura de index:

const obj: { [key: string]: string } = {};

A sintaxe acima diz que qualquer propriedade com uma chave string deve ter um valor string. Aqui está um exemplo para um settings objeto:

const settings: { [key: string]: string } = {
  theme: "dark",
  language: "en",
  layout: "grid"
};

Assim como antes, se você tiver tipos de value incorretos, o TypeScript exibirá uma mensagem de erro:

// Type 'boolean' is not assignable to type 'string'
const settings: { [key: string]: string } = {
  darkMode: true
};

Tanto Record quanto assinaturas de índice são fundamentalmente iguais. Então escolher entre eles é principalmente uma questão de preferência.