Grunderna i template literal-typer
Skapa strängtyper från unioner och platshållare.
Grunderna i template literal-typer ä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.
Strängar på typsnivå
Template literal-typer bygger nya strängliteraltyper genom att kombinera andra strängtyper. De använder samma syntax med backtick och platshållare som template strings vid körning, men arbetar helt på typsnivå.
En enkel template literal-typ
Föreställ Er ett typalias Greeting som definieras som en template literal med texten Hello, följd av en platshållare för typen Name. Om Name är literaltypen 'Ada', blir Greeting literaltypen 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Platshållare bäddar in andra typer
I platshållaren kan Ni placera vilken stränglik typ som helst: en literal, en typparameter eller en union. TypeScript ersätter den i den omgivande texten för att skapa en ny literaltyp.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Kombinerade unioner multiplicerar varianterna
När en platshållare innehåller en union expanderas templaten över varje medlem. En template som kombinerar 'a' | 'b' med ett fast suffix skapar en union av varje kombination.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Flera platshållare multipliceras med varandra
Två unionplatshållare bildar en kartesisk produkt. Om storlekarna 'sm' | 'lg' kombineras med färgerna 'red' | 'blue' via en avgränsare uppstår fyra literaltyper.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Varför detta är användbart
Med template literal-typer kan Ni beskriva familjer av strängar exakt — CSS-klassnamn, händelsenamn och route-sökvägar — så att kompilatorn avvisar felaktiga strängar innan körning.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Tal och booleska värden konverteras
Icke-strängtyper som placeras i en template literal-typ konverteras till sin strängform. En talliteral 42 blir texten 42 i den resulterande strängtypen.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Använda en generisk platshållare
En generisk funktion kan bygga en template literal-returtyp från argumentets literaltyp, så att den exakta strängen är känd vid varje anropsställe.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeBegränsa indata
Ni kan kräva att ett värde matchar en template literal-typ. Endast strängar som följer det beskrivna mönstret accepteras, vilket fångar skrivfel vid kompilering.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignableBreda string bryter mönstret
Om en platshållare är den breda typen string i stället för en literal kollapsar hela templaten till string. Specificitet kräver literalindata, ofta via as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Var de kan användas
Template literal-typer passar perfekt överallt där strängar följer en struktur: CSS-verktygsklasser, prefixförsedda identifierare, frågenycklar och händelsenamn. De omvandlar strängkonventioner till kompilatorkontrollerade kontrakt.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Snabbtest
Kontrollera förståelsen av grunderna i template literal-typer.
Sammanfattning
Template literal-typer bygger strängliteraltyper genom att ersätta platshållare i omgivande text. Unionplatshållare expanderas till varje kombination och flera unioner bildar en kartesisk produkt. Icke-strängliteraler konverteras till sin textform. En bred string-platshållare kollapsar resultatet till string, så literalindata, ofta via as const, behövs för precisa typer. På så sätt blir strängkonventioner kompilatorkontrollerade.
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 ”Grunderna i template literal-typer” gratis?
Ja – hela texten till ”Grunderna i template literal-typer” 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 ”Grunderna i template literal-typer”?
Skapa strängtyper från unioner och platshållare. 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 ”Grunderna i template literal-typer”?
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
- Grunderna i template literal-typer
- Modellera strukturerade strängar
- Strängunioner och autokomplettering
- Inbyggda strängmanipuleringstyper