Skip to main content

Typeof e Keyof | Typescript

  • Typeof e Keyof | Typescript

Introdução​

No TypeScript, os operadores keyof e typeof são ferramentas poderosas para trabalhar com tipos dinâmicos e extração de informações de objetos. Eles são fundamentais para escrever código genérico e seguro em relação a tipos, especialmente ao lidar com interfaces, tipos derivados e funções utilitárias.

1. O operador typeof​

Conceito​

O operador typeof em TypeScript serve para obter o tipo de uma variável ou valor existente. É diferente do typeof do JavaScript em tempo de execução — no TypeScript, ele atua em tempo de compilação, permitindo reutilizar tipos existentes.

Exemplo básico​

const user = {
  name: "Ana",
  age: 30,
};

// Criamos um tipo baseado no objeto 'user'
type User = typeof user;

// O mesmo que:
// type User = {
//   name: string;
//   age: number;
// };

Agora o tipo User tem a mesma estrutura do objeto user.

2. O operador keyof​

Conceito​

O operador keyof cria um tipo literal de união com todas as chaves (keys) de um tipo ou interface. Ele é útil para garantir que você só use propriedades válidas de um objeto em tipos e funções.

Exemplo básico​

interface User {
  name: string;
  age: number;
}

type UserKeys = keyof User;
// Resultado: "name" | "age"

Ou seja, UserKeys é um tipo que pode ser "name" ou "age".

3. Combinando keyof e typeof​

Esses operadores se tornam especialmente poderosos quando usados juntos.

Exemplo prático​

const colors = {
  primary: "#0000FF",
  secondary: "#00FF00",
  danger: "#FF0000",
};

type ColorKeys = keyof typeof colors;
// Resultado: "primary" | "secondary" | "danger"

Aqui:

  • typeof colors cria um tipo com base no objeto.
  • keyof typeof colors cria um tipo literal com as chaves desse objeto.

Isso é muito útil para criar funções genéricas seguras:

function getColor(key: keyof typeof colors) {
  return colors[key];
}

getColor("primary"); // ✅ funciona
getColor("unknown"); // ❌ erro de compilação

4. Exemplo mais avançado: acesso dinâmico com segurança de tipos​

const user = {
  name: "Carlos",
  age: 25,
  active: true,
};

function getValue<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const nameValue = getValue(user, "name"); // string
const ageValue = getValue(user, "age");   // number

Aqui, o TypeScript sabe que getValue(user, "name") retorna uma string e getValue(user, "age") retorna um number.

5. Quando usar keyof e typeof​

Caso de usoOperador
Criar tipos baseados em objetos existentestypeof
Obter as chaves de um tipokeyof
Garantir acesso seguro a propriedadeskeyof typeof
Criar funções genéricas que aceitam apenas propriedades válidaskeyof (com genéricos)

6. Resumo visual​

const obj = { a: 1, b: 2 };

// typeof → extrai o tipo do objeto
type T = typeof obj; // { a: number; b: number; }

// keyof → extrai as chaves do tipo
type K = keyof T; // "a" | "b"

// keyof typeof → extrai as chaves diretamente do objeto
type KK = keyof typeof obj; // "a" | "b"