TypeScript Academy · Lektion

Indexerade åtkomsttyper

Slå upp egenskapstyper med syntaxen T[K].

Lektion 3 av 413 steg

Indexerade åtkomsttyper är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 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.

Slå upp egenskapstyper

Typer med indexerad åtkomst låter dig slå upp typen för en egenskap med hakparentessyntax i en typ-position: Obj['prop']. Det motsvarar att läsa ett värde, men på typenivå.

Grundläggande indexerad åtkomst

Indexera en typ med en literalnyckel för att extrahera egenskapens typ. User['name'] ger string.

interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)

Varför inte bara skriva typen

Indexerad åtkomst håller typer synkroniserade. Om User.name ändras från string till något annat uppdateras varje User['name'] automatiskt – inga manuella ändringar behövs.

interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)

Åtkomst med en union av nycklar

Indexera med en union av nycklar för att få en union av deras värdetyper. User['id' | 'name'] ger number | string.

interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)

Obj[keyof Obj] för alla värden

Indexera med keyof Obj för att få en union av alla värdetyper i objektet – hela uppsättningen av värdetyper.

interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)

Arrayelementtyp med [number]

För en arraytyp indexerar du med number för att få dess elementtyp. string[][number] är string.

type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)

Elementtyp för en tupel

Om du indexerar en tupel med number får du unionen av alla dess elementtyper – användbart när du vill härleda en värdetyp från en fast lista.

type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)

Kombinera med typeof

Slå upp en värdetyp med typeof. Tillsammans med [number] på en as const-array härleder detta en union av arrayens literalvärden.

const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)

Nästad indexerad åtkomst

Kedja uppslagningar för att tränga in i nästlade typer. Varje hakparentes går ner en nivå i strukturen.

interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)

Indexerad åtkomst i generiska typer

Mönstret T[K] tillsammans med K extends keyof T ligger bakom typsäkra getter-funktioner: returtypen är exakt den uppslagna egenskapens typ.

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number

En praktisk härledning

Indexerad åtkomst undviker duplicerade typer: härled en funktionsargumenttyp direkt från ett domänobjekt i stället för att skriva om den.

interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)

Snabbtest

Kontrollera förståelsen av indexerade åtkomsttyper.

Sammanfattning

Indexerade åtkomsttyper (Obj['prop']) slår upp en egenskaps typ och hålls därmed synkroniserade med källan. Indexera med en union av nycklar för att få en union av värdetyper, med keyof Obj för alla värden och med number för elementtyper i arrayer eller tupler. Kedja hakparenteser för nästlade uppslagningar och kombinera med typeof och generiska typer (T[K]) för typsäkra härledningar.

Gratis att börja

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 ”Indexerade åtkomsttyper” gratis?

Ja – hela texten till ”Indexerade åtkomsttyper” 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 ”Indexerade åtkomsttyper”?

Slå upp egenskapstyper med syntaxen T[K]. 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 3 av 4.

Hur lång tid tar lektionen ”Indexerade åtkomsttyper”?

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

  1. Typoperatorn typeof
  2. Typoperatorn keyof
  3. Indexerade åtkomsttyper
  4. Kombinera typeof och keyof
← Tillbaka till TypeScript Academy