0Pricing
Frontend Academy · Aula

Interfaces e tipos de objetos

Descreva as formas dos objetos com interface e type, estenda interfaces, use propriedades opcionais com ? e readonly para garantir imutabilidade.

Interfaces e tipos de objetos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

interface versus tipo

Tanto interface quanto type descrevem formatos de objetos. A principal diferença é que as interfaces podem ser mescladas (mesclagem de declarações) e geralmente são preferidas para definir formatos de APIs públicas. Os nomes alternativos de tipos são mais flexíveis para tipos complexos.

// interface:
interface User {
  id: number;
  name: string;
}

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

Definindo uma interface

Use interface para definir o formato de um objeto. Todas as propriedades são obrigatórias por padrão. Separe as propriedades com ponto e vírgula.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

Propriedades opcionais e somente leitura

Marque propriedades como opcionais com ?. Use readonly para impedir alterações. readonly impõe imutabilidade no momento da compilação.

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

Estendendo interfaces

Use extends para criar uma nova interface que inclua todas as propriedades de outra. A herança múltipla é compatível.

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

Assinaturas de índice — chaves dinâmicas

Quando os nomes das propriedades não são conhecidos antecipadamente, mas os tipos de seus valores são conhecidos, use uma assinatura de índice.

interface StringMap {
  [key: string]: string;
}

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

Tipos de função em interfaces

Defina assinaturas de métodos dentro de uma interface — tanto a forma abreviada quanto a sintaxe completa de propriedade funcionam.

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

Implementando interfaces em classes

Uma classe pode implement uma ou mais interfaces. O TypeScript verifica se a classe fornece todos os membros obrigatórios.

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

Mesclagem de declarações

Várias declarações de interface com o mesmo nome são mescladas em uma só. Isso é útil para estender tipos de terceiros. Nomes alternativos de tipos não são compatíveis com esse recurso.

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

Tipos de objetos aninhados

As propriedades de uma interface também podem ter tipos de objetos — definidos diretamente ou por meio de uma referência a outra interface.

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

Tipagem estrutural — tipagem por comportamento

O TypeScript usa tipagem estrutural: um valor satisfaz um tipo se tiver pelo menos as propriedades obrigatórias. Não é necessário declarar explicitamente que ele implementa algo. Qualquer objeto com o formato correto é compatível.

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

Uniões discriminadas com interfaces

Adicione uma propriedade discriminadora de tipo literal para diferenciar variantes em uma união. O TypeScript restringe o tipo em switch/if com base no discriminador.

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

Verificação rápida

Qual é a principal diferença entre interface e type no TypeScript?

Recapitulação: interfaces

interface descreve formatos de objetos com propriedades obrigatórias, opcionais e somente leitura. Estenda interfaces com extends. Use assinaturas de índice para chaves dinâmicas. Classes implementam interfaces. A mesclagem de declarações é exclusiva das interfaces. O TypeScript usa tipagem estrutural — o formato é o que importa, não a declaração explícita.

Perguntas Frequentes

A aula “Interfaces e tipos de objetos” é grátis?

Sim — o texto completo de “Interfaces e tipos de objetos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Interfaces e tipos de objetos”?

Descreva as formas dos objetos com interface e type, estenda interfaces, use propriedades opcionais com ? e readonly para garantir imutabilidade. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Interfaces e tipos de objetos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por que TypeScript: tipos detectam erros em tempo de compilação
  2. Tipos primitivos, uniões e aliases de tipos
  3. Interfaces e tipos de objetos
  4. Compilando TS e tsconfig.json
← Voltar para Frontend Academy