Merkkijonounionit ja automaattinen täydennys
Saatte editorin automaattisen täydennyksen tunnetuille merkkijonoarvoille.
Merkkijonounionit ja automaattinen täydennys on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.
Unionit tuottavat automaattisen täydennyksen
Merkkijonoliteraalien unioni tekee kaksi asiaa: se rajoittaa sallitut arvot ja tarjoaa editorin automaattisen täydennyksen. Joskus haluat kuitenkin sekä ehdotukset että vapauden välittää minkä tahansa merkkijonon — tähän on olemassa näppärä ratkaisu.
Perusmuotoinen merkkijonoliteraalien unioni
Määrittele sallittujen merkkijonojen unioni. Editori tarjoaa täsmälleen nämä vaihtoehdot, ja virheelliset arvot aiheuttavat käännösvirheen.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // ErrorAutomaattinen täydennys editorissa
Kun parametrin tyyppinä on merkkijonoliteraalien unioni, kutsun sisällä kirjoitettaessa näkyviin tulevat täsmälleen unionin jäsenet. Tämä on yksi TypeScriptin pidetyimmistä käytettävyysominaisuuksista.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueRajoitus
Tiukka unioni kieltää kaikki luettelon ulkopuoliset arvot. Joskus haluat ehdottaa yleisiä arvoja ja sallia samalla mielivaltaiset mukautetut merkkijonot — tavallinen unioni ei pysty tähän.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))Leventäminen poistaa ehdotukset
Jos käytät yksinkertaisesti tyyppiä string, kaikki arvot toimivat, mutta automaattinen täydennys katoaa kokonaan. Olet vaihtanut kaikki vihjeet täydelliseen joustavuuteen — tämä ei ole ihanteellista.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsstring- ja literaaliunionin temppu
Temppu on yhdistää literaalit unioniin string & {}. Literaalit näkyvät edelleen automaattisessa täydennyksessä, kun taas string & {} sallii kaikki muutkin merkkijonot ilman, että unioni supistuu.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)Miksi string ja tyhjä objekti toimivat
Tavallisesti 'red' | string yksinkertaistuu pelkäksi tyypiksi string, jolloin literaalit katoavat. Risteyttäminen tyypin {} kanssa muodostaa hieman erilaisen tyypin, jonka TypeScript pitää erillään. Literaalit säilyvät täydennystä varten, mutta mikä tahansa merkkijono sopii silti.
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)Uudelleenkäytettävä apuri
Paketoimalla tempun geneeriseksi aliakseksi teet sen tarkoituksesta selkeän ja voit käyttää sitä uudelleen koko koodikannassa.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)Soveltaminen funktioon
Käytä apuria rajapinnassa tarjotaksesi kutsujille ehdotuksia yleisistä syötteistä ja hyväksyäksesi samalla mukautettuja arvoja.
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")) // allowedMilloin temppua kannattaa käyttää
Käytä sitä, kun rajapinnalla on tunnettuja arvoja mutta sen on pysyttävä avoimena: esimerkiksi ikonien nimissä, CSS-yksiköissä, teemakoodeissa ja framework-esimäärityksissä. Suljetuissa joukoissa suosi tiukkaa unionia täydellisen turvallisuuden vuoksi.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)Kompromissit
Temppu säilyttää ehdotukset mutta heikentää turvallisuutta — mukautettujen merkkijonojen kirjoitusvirheitä ei enää havaita. Käytä sitä harkiten tilanteissa, joissa avoimuus on ominaisuus, älä oletusratkaisuna.
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)Pikatarkistus
Testaa ymmärryksesi automaattisen täydennyksen tempusta.
Kertaus
Merkkijonoliteraalien unionit mahdollistavat editorin automaattisen täydennyksen ja rajoittavat arvoja, mutta tiukka unioni kieltää mukautetut merkkijonot ja tavallinen string menettää kaikki vihjeet. T | (string & {}) -temppu säilyttää literaalit ehdotuksina ja hyväksyy samalla minkä tahansa merkkijonon. Paketoi se LiteralUnion<T>-apuriksi ja käytä sitä vain silloin, kun avoimuus on tarkoituksellista — se heikentää kirjoitusvirheiden havaitsemista.
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 101
- Oppitunnit
- 352
Usein kysytyt kysymykset
Onko oppitunti ”Merkkijonounionit ja automaattinen täydennys” ilmainen?
Kyllä – oppitunnin ”Merkkijonounionit ja automaattinen täydennys” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Merkkijonounionit ja automaattinen täydennys”?
Saatte editorin automaattisen täydennyksen tunnetuille merkkijonoarvoille. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Merkkijonounionit ja automaattinen täydennys”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?
Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Template literal -tyyppien perusteet
- Rakenteisten merkkijonojen mallintaminen
- Merkkijonounionit ja automaattinen täydennys
- Sisäänrakennetut merkkijononmuokkaustyypit