String-unions en automatisch aanvullen
Krijg in de editor automatisch aanvullen voor bekende stringwaarden
String-unions en automatisch aanvullen is een gratis TypeScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.
Unies sturen automatische aanvulling
Een unie van letterlijke tekenreeksen heeft twee functies: ze beperkt de toegestane waarden en voedt de automatische aanvulling van je editor. Soms wil je echter zowel suggesties als de vrijheid om elke tekenreeks door te geven — een slimme truc maakt dat mogelijk.
Een eenvoudige unie van letterlijke tekenreeksen
Declareer een unie van toegestane tekenreeksen. De editor biedt precies deze opties aan en ongeldige waarden worden compileerfouten.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // ErrorAutomatische aanvulling in de editor
Wanneer een parameter een unie van letterlijke tekenreeksen is, verschijnen tijdens het typen in de aanroep precies de leden ervan. Dit is een van de meest gewaardeerde aspecten van het gebruiksgemak van TypeScript.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueDe beperking
Een strikte unie verbiedt elke waarde buiten de lijst. Soms wil je veelgebruikte waarden voorstellen en toch willekeurige aangepaste tekenreeksen toestaan — met een gewone unie kun je niet beide doen.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))Verbreden laat suggesties verdwijnen
Als je simpelweg string gebruikt, werkt elke waarde, maar de automatische aanvulling verdwijnt volledig. Je ruilt alle aanwijzingen in voor totale flexibiliteit — niet ideaal.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsDe truc met string en een letterlijke unie
De truc: combineer je letterlijke waarden met string & {} in een unie. De letterlijke waarden verschijnen nog steeds in de automatische aanvulling, terwijl string & {} elke andere tekenreeks toestaat zonder de unie tot één type te laten instorten.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)Waarom string en een leeg object werken
Normaal gesproken vereenvoudigt 'red' | string tot alleen string, waardoor de letterlijke waarden verdwijnen. Het kruisen met {} maakt een iets ander type dat TypeScript apart houdt, zodat de letterlijke waarden voor de aanvulling behouden blijven terwijl elke tekenreeks nog steeds past.
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)Een herbruikbare hulpalias
Verpak de truc in een generieke alias, zodat de bedoeling duidelijk is en je deze in je hele codebase kunt hergebruiken.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)Toepassen op een functie
Gebruik de hulpalias in een API om aanroepers suggesties voor veelgebruikte invoer te geven en toch aangepaste waarden te accepteren.
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedWanneer je de truc gebruikt
Gebruik de truc wanneer een API bekende waarden heeft maar open moet blijven: namen van pictogrammen, CSS-eenheden, thematokens en voorinstellingen van frameworks. Kies voor gesloten verzamelingen een strikte unie voor volledige veiligheid.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)Afwegingen
De truc behoudt suggesties maar maakt de veiligheid minder strikt — typefouten in aangepaste tekenreeksen worden niet meer gevonden. Gebruik de truc bewust wanneer openheid een functie is, niet standaard.
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)Korte toets
Toets je begrip van de truc voor automatische aanvulling.
Samenvatting
Unies van letterlijke tekenreeksen zorgen voor automatische aanvulling in de editor en beperken waarden, maar een strikte unie verbiedt aangepaste tekenreeksen terwijl een gewone string alle aanwijzingen verliest. De truc T | (string & {}) behoudt de letterlijke waarden als suggesties en accepteert toch elke tekenreeks. Verpak dit als een hulpalias LiteralUnion<T> en gebruik hem alleen wanneer openheid de bedoeling is — de bescherming tegen typefouten wordt minder strikt.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 101
- Lessen
- 352
Veelgestelde vragen
Is de les “String-unions en automatisch aanvullen” gratis?
Ja — de volledige tekst van “String-unions en automatisch aanvullen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.
Wat leer ik in “String-unions en automatisch aanvullen”?
Krijg in de editor automatisch aanvullen voor bekende stringwaarden Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met TypeScript Academy te beginnen?
Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “String-unions en automatisch aanvullen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?
Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Basisprincipes van template literal types
- Gestructureerde strings modelleren
- String-unions en automatisch aanvullen
- Intrinsieke typen voor stringmanipulatie