TypeScript Academy · Lektion

Typoperatorn typeof

Hämta typen för ett körningsvärde med typeof.

Lektion 1 av 413 steg

Typoperatorn typeof är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 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.

Typer från värden

Typoperatorn typeof härleder en statisk typ från ett värde vid körning. Den låter dig skriva ett värde en gång och återanvända dess struktur som en typ, så att de alltid hålls helt synkroniserade.

Två olika typeof

Blanda inte ihop dem: JavaScript:s typeof returnerar en sträng vid körning; TypeScripts typeof förekommer i en typ-position och producerar en typ. Samma nyckelord, olika världar.

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

Fånga en variabels typ

Placera typeof före ett värde i en typannotering för att fånga värdets härledda typ. Här blir T string.

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

Fånga ett objekts struktur

På ett const-objekt ger typeof hela den härledda strukturen – du behöver inte skriva gränssnittet för hand.

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

Inferens breddar typer som standard

Utan hjälp breddar TypeScript literalvärden: port: 8080 blir number, inte literalvärdet 8080. Det är ofta bra, men ibland vill du bevara det exakta värdet.

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

typeof med as const

Lägg till as const för att låsa ett värde till dess snävaste literaltyp. Nu fångar typeof exakta literalvärden och markerar allt som readonly.

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

Literaltyper från arrayer

Med as const ger typeof på en array en readonly-tupel med literaltyper – en byggsten för att härleda unioner av värden.

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

Härleda en union av värden

Kombinera typeof med indexerad åtkomst via [number] för att omvandla en array med konstanter till en unionstyp av dess värden.

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

typeof på funktioner

Du kan även fånga typen för en funktion. Det är praktiskt när du typbestämmer wrappers eller återanvänder en signatur på annat håll.

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

Hålla typer synkroniserade

Den stora fördelen är att definiera konfiguration eller konstanter en gång som värden och sedan härleda typer med typeof. Ändra värdet, så uppdateras typen automatiskt – ingen duplicering.

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

Fungerar bara på identifierare

Typoperatorn typeof tar en identifierare eller en egenskapssökväg, inte ett godtyckligt uttryck. typeof (a + b) är inte tillåtet.

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

Snabbtest

Testa din förståelse av typoperatorn typeof.

Sammanfattning

Typoperatorn typeof (i en typ-position) härleder en typ från ett värde – en variabel, ett objekt, en array eller en funktion. Som standard breddas literalvärden; lägg till as const för att fånga exakta literaltyper som readonly. I kombination med indexerad åtkomst (typeof arr[number]) ger den unioner av värden. Att härleda typer från värden ger en enda källa till sanning och undviker duplicerade strukturer.

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 ”Typoperatorn typeof” gratis?

Ja – hela texten till ”Typoperatorn typeof” 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 ”Typoperatorn typeof”?

Hämta typen för ett körningsvärde med typeof. 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 1 av 4.

Hur lång tid tar lektionen ”Typoperatorn typeof”?

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