Kombinera typeof och keyof
Härled exakta typer genom att kedja typoperatorer.
Kombinera typeof och keyof är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Den kraftfulla kombinationen
Var för sig härleder typeof en typ från ett värde och listar keyof en typs nycklar. Tillsammans — keyof typeof value — skapar de en union av ett värdes faktiska nycklar, vilket möjliggör helt typsäker åtkomst.
keyof typeof i praktiken
Börja med ett const-objekt, fånga dess typ med typeof och lista sedan dess nycklar med keyof. Resultatet är en union av objektets bokstavliga nyckelnamn.
const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])Varför det här mönstret finns
Ofta har Ni ett runtime-objekt men inget separat interface. keyof typeof ger Er en nyckeltyp utan att Ni behöver duplicera objektets struktur i en handskriven typ.
const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2Typsäker åtkomst via nyckel
En funktionsparameter av typen keyof typeof obj avvisar ogiltiga nycklar vid kompilering, så den indexerade åtkomsten inuti funktionen är garanterat säker.
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 keyEnum-liknande konstantobjekt
Ett vanligt idiom är att definiera ett as const-objekt som en pseudo-enum och sedan härleda både dess nyckel- och värdetyper från det.
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)Nycklar kontra värden
Observera skillnaden: keyof typeof obj ger nyckelnamnen, medan typeof obj[keyof typeof obj] ger värdetyperna. Välj den variant som API:et behöver.
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)Generisk getProperty
Den klassiska typsäkra getter-funktionen begränsar en nyckelparameter med K extends keyof T och returnerar T[K], så resultattypen exakt motsvarar den uppslagna egenskapen.
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)Returtypen följer nyckeln
Eftersom returtypen är T[K] anpassas resultattypen vid varje anrop efter den specifika nyckel som skickas — ett tal för en nyckel och en sträng för en annan.
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)Ogiltiga nycklar avvisas
Om Ni skickar en nyckel som inte finns på objektet uppstår ett kompileringsfel. Den generiska begränsningen säkerställer detta innan koden körs.
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"))En typsäker setter
Samma mekanism kan bygga en setter: värdeparametern är T[K], så Ni kan bara tilldela ett värde av rätt typ för den nyckeln.
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)Sätt ihop delarna
Mönstret keyof typeof tillsammans med generisk åtkomst via T[K] ger säkra, återanvändbara verktyg för verkliga objekt — grunden för typsäkra konfigurationsläsare, uppslagningar och formulärhjälpare.
const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
return theme[name]
}
console.log(color("danger")) // #f00Snabbtest
Kontrollera förståelsen av hur typeof och keyof kombineras.
Sammanfattning
keyof typeof value härleder en union av ett värdes faktiska nycklar utan att en separat interface behöver skrivas, vilket gör indexerad åtkomst typsäker. Skilj på nyckeltyper (keyof typeof obj) och värdetyper (typeof obj[keyof typeof obj]). Det generiska mönstret getProperty<T, K extends keyof T>(obj, key): T[K] returnerar den exakt uppslagna typen och avvisar ogiltiga nycklar vid kompilering.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”Kombinera typeof och keyof” gratis?
Ja – hela texten till ”Kombinera typeof och keyof” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kombinera typeof och keyof”?
Härled exakta typer genom att kedja typoperatorer. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Kombinera typeof och keyof”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Typoperatorn typeof
- Typoperatorn keyof
- Indexerade åtkomsttyper
- Kombinera typeof och keyof