Modellere strukturerte strenger
Håndhev formater som hendelsesnavn og rutestier.
Modellere strukturerte strenger er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.
Håndheve strengformater
Mange strenger i virkelige apper følger en struktur: navn på hendelsesbehandlere, API-rutestier og CSS-variabler. Template literal-typer lar Dem modellere disse formatene, slik at kompilatoren håndhever dem.
Modellere navn på hendelsesbehandlere
Et navn på en hendelsesbehandler ser ofte ut som on etterfulgt av en hendelse med stor forbokstav. Ved å bruke den innebygde hjelpefunksjonen Capitalize i en template, blir hendelsen 'click' til behandlernavnet 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Hvorfor Capitalize er viktig her
Uten Capitalize ville template-en gitt 'onclick'. Den innebygde typen gjør den første bokstaven i literalen stor, slik at resultatet blir idiomatiske camelCase-navn på hendelsesbehandlere.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Generere et behandlerkart
Kombiner template literal-nøkler med en mapped type for å generere en objekttype med behandlere — én typet funksjon per hendelse, med riktig bruk av store og små bokstaver i navnene.
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)Modellere rutestier
API-ruter har en felles form med en innledende skråstrek, en ressurs og et id-segment. En template som kombinerer fast tekst med en plassholder, fanger opp gyldige stier.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Parameteriserte stier
Legg til en plassholder for en dynamisk id. En template med en skråstrek, en ressurs, en ny skråstrek og deretter et generisk id-segment modellerer stier som en users-sti etterfulgt av en numerisk id.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Håndheve formater ved kompilering
Ved å skrive en parameter som en template literal-type avviser De alle strenger som ikke passer strukturen — en beskyttelse mot feilformaterte ruter eller nøkler.
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")Sette sammen CSS-variabelnavn
CSS-egendefinerte egenskaper følger en navnekonvensjon. En template med to innledende bindestreker og en token-plassholder modellerer navn som en variabel for et fargetoken.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)Dele opp med inferens
Template literal-typer kan også analysere strenger: Med conditional types og infer trekker De ut deler av en strukturert streng på typenivå — for eksempel metoden fra en endpoint-streng.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Gevinsten i praksis
Typer for strukturerte strenger fanger hele klasser av feil: et feilstavet behandlernavn, en ukjent rute eller et feil CSS-token — alt blir kompileringsfeil i stedet for lydløse feil ved kjøring.
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))Hold dem lesbare
Selv om nestede template-typer er kraftige, går det ut over lesbarheten. Gi mellomliggende typealiaser navn, slik at strukturen forblir tydelig for neste leser.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Kunnskapssjekk
Test forståelsen av modellering av strukturerte strenger.
Oppsummering
Template literal-typer modellerer strukturerte strenger — behandlernavn (on + Capitalize av en hendelse), rutestier og CSS-variabler — og håndhever formatene ved kompilering. Kombinert med mapped types kan de generere behandlerkart, og sammen med conditional types og infer kan de analysere strenger. Gi mellomliggende aliaser navn for å holde komplekse mønstre lesbare.
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 101
- Leksjoner
- 352
Ofte stilte spørsmål
Er leksjonen «Modellere strukturerte strenger» gratis?
Ja – hele teksten i «Modellere strukturerte strenger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Modellere strukturerte strenger»?
Håndhev formater som hendelsesnavn og rutestier. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med TypeScript Academy?
Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Modellere strukturerte strenger»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?
Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grunnleggende template literal-typer
- Modellere strukturerte strenger
- String-unioner og autofullføring
- Innebygde typer for strengmanipulering