TypeScript Academy · Aula

Combinando typeof e keyof

Derive tipos precisos encadeando operadores de tipo.

Combinando typeof e keyof é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

A combinação poderosa

Individualmente, typeof deriva um tipo a partir de um valor e keyof lista as chaves de um tipo. Juntos — keyof typeof value — eles produzem uma união das chaves reais de um valor, permitindo um acesso totalmente seguro quanto aos tipos.

keyof typeof em ação

Comece com um objeto const, capture seu tipo com typeof e depois liste suas chaves com keyof. O resultado é uma união dos nomes literais das chaves do objeto.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Por que este padrão existe

É comum ter um objeto em tempo de execução, mas nenhuma interface separada. keyof typeof fornece um tipo de chave sem duplicar a estrutura do objeto em um tipo escrito manualmente.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Acesso seguro por chave

Um parâmetro de função tipado como keyof typeof obj rejeita chaves inválidas em tempo de compilação, portanto o acesso indexado interno é garantidamente seguro.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Objetos constantes semelhantes a enumerações

Um padrão comum: defina um objeto as const como uma pseudoenumeração e derive dele os tipos de chave e de valor.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Chaves versus valores

Observe a distinção: keyof typeof obj fornece os nomes das chaves, enquanto typeof obj[keyof typeof obj] fornece os tipos dos valores. Escolha aquele de que sua API precisa.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

getProperty genérico

O acessador clássico seguro quanto aos tipos restringe um parâmetro de chave com K extends keyof T e retorna T[K], portanto o tipo do resultado corresponde exatamente à propriedade consultada.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

O tipo de retorno acompanha a chave

Como o retorno é T[K], o tipo do resultado de cada chamada se adapta à chave específica fornecida — um número para uma chave, uma cadeia de caracteres para outra.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Chaves inválidas são rejeitadas

Passar uma chave que não existe no objeto gera um erro de compilação. A restrição genérica o impõe antes mesmo de o código ser executado.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Um definidor seguro quanto aos tipos

O mesmo mecanismo cria uma função de atribuição: o parâmetro de valor é T[K], portanto só é possível atribuir um valor do tipo correto para aquela chave.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Reunindo tudo

O padrão keyof typeof mais o acesso genérico T[K] oferecem utilitários seguros e reutilizáveis para objetos reais — a base de leitores de configuração tipados, consultas e auxiliares de formulários.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Verificação rápida

Teste sua compreensão da combinação de typeof e keyof.

Recapitulação

keyof typeof value deriva uma união das chaves reais de um valor sem escrever uma interface separada, tornando o acesso indexado seguro quanto aos tipos. Diferencie os tipos de chave (keyof typeof obj) dos tipos de valor (typeof obj[keyof typeof obj]). O padrão genérico getProperty<T, K extends keyof T>(obj, key): T[K] retorna exatamente o tipo consultado e rejeita chaves inválidas em tempo de compilação.

Perguntas Frequentes

A aula “Combinando typeof e keyof” é grátis?

Sim — o texto completo de “Combinando typeof e keyof” é 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Combinando typeof e keyof”?

Derive tipos precisos encadeando operadores de tipo. Você pratica TypeScript 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 TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript 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 4 de 4.

Quanto tempo leva a aula “Combinando typeof e keyof”?

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 TypeScript Academy?

Sim. Cada aula de TypeScript 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

← Voltar para TypeScript Academy