</>Codding
TypeScript0/19 lições

Módulo 1 • Tipos básicos

Interfaces e type aliases

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Interfaces e type aliases com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Interfaces e type aliases com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Entrada

Reconheça os dados e condições disponíveis.

2

Processamento

Use Interfaces e type aliases para transformar a entrada.

3

Saída

Confira o resultado e os casos que podem falhar.

0/6 atividades
1

Entenda o problema

O que é Interfaces e type aliases

TypeScript adiciona tipos ao JavaScript e checa tudo antes de rodar. O ganho não é digitar mais: é o editor avisando o erro enquanto você escreve, não o usuário descobrindo em produção.

Cheque seu entendimento

Qual a diferença prática entre any e unknown?

1 de 5

O que você aprendeu

  • TypeScript adiciona tipos ao JavaScript e checa tudo antes de rodar. O ganho não é digitar mais: é o editor avisando o erro enquanto você escreve, não o usuário descobrindo em produção.
  • status: "aprovado" nem compila — o union type só aceita os três valores previstos. O generic devolve number, não any.
  • Evite: Espalhar any e perder toda a segurança.
  • Evite: Tipar tudo manualmente onde a inferência já acerta.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Interfaces e type aliases" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de TypeScriptCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Tipos básicos".

Quiz rápido

0/2 • 0 certas

1. Qual a diferença prática entre any e unknown?

2. O que acontece com os tipos quando o código roda?

Laboratório

1/4

1. Faça funcionar

Laboratório de Interfaces e type aliases: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Escreva sua solução e clique em Verificar.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Interfaces e type aliases

TypeScript • Módulo 1: Tipos básicos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Interfaces e type aliases com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Interfaces e type aliases com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Interfaces e type aliases

TypeScript adiciona tipos ao JavaScript e checa tudo antes de rodar. O ganho não é digitar mais: é o editor avisando o erro enquanto você escreve, não o usuário descobrindo em produção.

Checkpoint: Qual a diferença prática entre any e unknown? — Resposta: unknown obriga a checar o tipo antes de usar; any desliga a checagem

2. Como pensar antes de fazer

type e interface descrevem a forma dos dados. Prefira tipos precisos ('pendente' | 'pago' em vez de string): o compilador passa a barrar estados impossíveis.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Interfaces e type aliases” resolve.

3. Exemplo completo, do início ao resultado

Evite any — ele desliga a verificação. Quando o tipo é desconhecido de verdade, use unknown e faça o narrowing (checagem) antes de usar.

type Status = "pendente" | "pago" | "cancelado";

interface Pedido {
  id: number;
  total: number;
  status: Status;
  cupom?: string;      // opcional
}

function resumo(p: Pedido): string {
  const extra = p.cupom ? " com cupom " + p.cupom : "";
  return `#${p.id} — R$ ${p.total.toFixed(2)} (${p.status})${extra}`;
}

function primeiro<T>(lista: T[]): T | undefined {
  return lista[0];
}

console.log(resumo({ id: 1, total: 54, status: "pago" }));
console.log(primeiro<number>([10, 20]));
TrechoO que faz
type Status = "pendente" | "pago" | "cancelado";Contribui para a transformação principal mostrada neste exemplo.
interface Pedido {Contribui para a transformação principal mostrada neste exemplo.
id: number;Contribui para a transformação principal mostrada neste exemplo.
total: number;Contribui para a transformação principal mostrada neste exemplo.
status: Status;Contribui para a transformação principal mostrada neste exemplo.
cupom?: string; // opcionalContribui para a transformação principal mostrada neste exemplo.
}Contribui para a transformação principal mostrada neste exemplo.
function resumo(p: Pedido): string {Cria uma estrutura reutilizável para organizar comportamento.

Dica: status: "aprovado" nem compila — o union type só aceita os três valores previstos. O generic devolve number, não any.

Checkpoint: O que acontece com os tipos quando o código roda? — Resposta: Somem: existem só na compilação

4. Do detalhe para o todo

Generics permitem funções que preservam o tipo de entrada na saída: identidade<T>(v: T): T. É assim que Array<T>, Promise<T> e bibliotecas inteiras mantêm o autocomplete correto.

5. Erros comuns e como corrigi-los

1. Espalhar any e perder toda a segurança. 2. Tipar tudo manualmente onde a inferência já acerta. 3. Confundir erro de tipo (compilação) com erro de execução: TypeScript some ao rodar.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Faça funcionar

Laboratório de Interfaces e type aliases: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

type Status = "pendente" | "pago" | "cancelado";

interface Pedido {
  id: number;
  total: number;
  status: Status;
  cupom?: string;      // opcional
}

function resumo(p: Pedido): string {
  const extra = p.cupom ? " com cupom " + p.cupom : "";
  return `#${p.id} — R$ ${p.total.toFixed(2)} (${p.status})${extra}`;
}

function primeiro<T>(lista: T[]): T | undefined {
  return lista[0];
}

console.log(resumo({ id: 1, total: 54, status: "pago" }));
console.log(primeiro<number>([10, 20]));

Dica: Volte ao exemplo resolvido e compare a estrutura. Espalhar any e perder toda a segurança.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Interfaces e type aliases deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Interfaces e type aliases, identifique um risco citado na aula e registre ou implemente a correção.

type Status = "pendente" | "pago" | "cancelado";

interface Pedido {
  id: number;
  total: number;
  status: Status;
  cupom?: string;      // opcional
}

function resumo(p: Pedido): string {
  const extra = p.cupom ? " com cupom " + p.cupom : "";
  return `#${p.id} — R$ ${p.total.toFixed(2)} (${p.status})${extra}`;
}

function primeiro<T>(lista: T[]): T | undefined {
  return lista[0];
}

console.log(resumo({ id: 1, total: 54, status: "pago" }));
console.log(primeiro<number>([10, 20]));

Dica: Espalhar any e perder toda a segurança.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Interfaces e type aliases. Mude os dados ou o cenário e demonstre que o resultado continua correto.

type Status = "pendente" | "pago" | "cancelado";

interface Pedido {
  id: number;
  total: number;
  status: Status;
  cupom?: string;      // opcional
}

function resumo(p: Pedido): string {
  const extra = p.cupom ? " com cupom " + p.cupom : "";
  return `#${p.id} — R$ ${p.total.toFixed(2)} (${p.status})${extra}`;
}

function primeiro<T>(lista: T[]): T | undefined {
  return lista[0];
}

console.log(resumo({ id: 1, total: 54, status: "pago" }));
console.log(primeiro<number>([10, 20]));

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • TypeScript adiciona tipos ao JavaScript e checa tudo antes de rodar. O ganho não é digitar mais: é o editor avisando o erro enquanto você escreve, não o usuário descobrindo em produção.
  • status: "aprovado" nem compila — o union type só aceita os três valores previstos. O generic devolve number, não any.
  • Evite: Espalhar any e perder toda a segurança.
  • Evite: Tipar tudo manualmente onde a inferência já acerta.

Exemplo comentado

type Status = "pendente" | "pago" | "cancelado";

interface Pedido {
  id: number;
  total: number;
  status: Status;
  cupom?: string;      // opcional
}

function resumo(p: Pedido): string {
  const extra = p.cupom ? " com cupom " + p.cupom : "";
  return `#${p.id} — R$ ${p.total.toFixed(2)} (${p.status})${extra}`;
}

function primeiro<T>(lista: T[]): T | undefined {
  return lista[0];
}

console.log(resumo({ id: 1, total: 54, status: "pago" }));
console.log(primeiro<number>([10, 20]));

status: "aprovado" nem compila — o union type só aceita os três valores previstos. O generic devolve number, não any.

Erros comuns

  • Espalhar any e perder toda a segurança.
  • Tipar tudo manualmente onde a inferência já acerta.
  • Confundir erro de tipo (compilação) com erro de execução: TypeScript some ao rodar.

Quiz e gabarito completo

  1. 1. Qual a diferença prática entre any e unknown?

    • a) Nenhuma
    • b) unknown obriga a checar o tipo antes de usar; any desliga a checagem
    • c) any é mais novo
    • d) unknown só serve para objetos

    Gabarito: b) unknown obriga a checar o tipo antes de usar; any desliga a checagem — unknown mantém a segurança exigindo narrowing.

  2. 2. O que acontece com os tipos quando o código roda?

    • a) São verificados em tempo de execução
    • b) Somem: existem só na compilação
    • c) Viram classes
    • d) Viram comentários no navegador

    Gabarito: b) Somem: existem só na compilação — TypeScript compila para JavaScript puro sem tipos.

Codding • TypeScript • Interfaces e type aliases • Prova final e certificado em codding.lovable.app/cursos/typescript/prova