Rakenteisten merkkijonojen mallintaminen
Varmistakaa tapahtumanimien ja reittipolkujen kaltaiset muodot.
Rakenteisten merkkijonojen mallintaminen on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Merkkijonomuotojen pakottaminen
Monet oikeiden sovellusten merkkijonot noudattavat rakennetta: tapahtumankäsittelijöiden nimet, rajapintareittien polut ja CSS-muuttujat ovat tästä esimerkkejä. Template literal -tyyppien avulla voit mallintaa nämä muodot, jolloin kääntäjä valvoo niitä.
Tapahtumankäsittelijöiden nimien mallintaminen
Käsittelijän nimi on usein muotoa on ja isolla alkukirjaimella kirjoitettu tapahtuma. Kun templatessa käytetään sisäänrakennettua Capitalize-aputyyppiä, tapahtuma 'click' muunnetaan käsittelijän nimeksi 'onClick'.
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)Miksi Capitalize on tässä tärkeä
Ilman Capitalize-tyyppiä template tuottaisi arvon 'onclick'. Sisäänrakennettu tyyppi muuttaa literaalin ensimmäisen merkin isoksi ja tuottaa tavanomaiset camelCase-muotoiset käsittelijänimet.
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)Käsittelijäkartan muodostaminen
Yhdistä template literal -avaimet mapped type -tyyppiin muodostaaksesi käsittelijöiden objektityypin — jokaiselle tapahtumalle tulee yksi oikein tyypitetty funktio oikeanlaisella nimellä.
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)Reittipolkujen mallintaminen
Rajapintareiteillä on yhteinen rakenne: alussa kauttaviiva, resurssi ja id-segmentti. Kiinteän tekstin ja paikanvaraajan yhdistävä template kuvaa kelvolliset polut.
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)Parametrisoidut polut
Lisää dynaamiselle id:lle paikanvaraaja. Template, joka koostuu kauttaviivasta, resurssista, kauttaviivasta ja geneerisestä id-segmentistä, mallintaa esimerkiksi users-polun, jota seuraa numeerinen id.
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42Muotojen pakottaminen käännösaikana
Kun parametri tyypitetään template literal -tyypiksi, kaikki rakennetta vastaamattomat merkkijonot hylätään — tämä estää virheelliset reitit ja avaimet.
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")CSS-muuttujien nimien muodostaminen
CSS:n mukautetut ominaisuudet noudattavat nimeämiskäytäntöä. Kahdesta aloitusviivasta ja token-paikanvaraajasta koostuva template mallintaa esimerkiksi väritokenia vastaavia muuttujanimiä.
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)Osien erottaminen infer-avainsanalla
Template literal -tyypit voivat myös jäsentää merkkijonoja: ehdollisten tyyppien ja infer-avainsanan avulla voit poimia rakenteisen merkkijonon osia tyyppitasolla — esimerkiksi erottaa metodin päätepisteen merkkijonosta.
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)Hyöty käytännössä
Rakenteisten merkkijonojen tyypit havaitsevat kokonaisia virheluokkia: väärin kirjoitettu käsittelijän nimi, tuntematon reitti tai väärä CSS-tokeni muuttuu hiljaisen ajonaikaisen virheen sijaan käännösvirheeksi.
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"))Pidä ne luettavina
Vaikka template literal -tyypit ovat tehokkaita, syvästi sisäkkäiset tyyppimääritykset heikentävät luettavuutta. Nimeä välissä olevat tyyppialiakset, jotta rakenne pysyy selkeänä seuraavalle lukijalle.
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)Pikatarkistus
Testaa ymmärryksesi rakenteisten merkkijonojen mallintamisesta.
Kertaus
Template literal -tyypeillä mallinnetaan rakenteisia merkkijonoja — esimerkiksi käsittelijänimiä (on + tapahtuman Capitalize), reittipolkuja ja CSS-muuttujia — ja niiden muodot tarkistetaan käännösaikana. Yhdessä mapped type -tyyppien kanssa niillä voidaan muodostaa käsittelijäkarttoja, ja ehdollisten tyyppien sekä infer-avainsanan avulla merkkijonoja voidaan jäsentää. Nimeä välissä olevat aliakset, jotta monimutkaiset kaavat pysyvät luettavina.
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 ”Rakenteisten merkkijonojen mallintaminen” ilmainen?
Kyllä – oppitunnin ”Rakenteisten merkkijonojen mallintaminen” 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 ”Rakenteisten merkkijonojen mallintaminen”?
Varmistakaa tapahtumanimien ja reittipolkujen kaltaiset muodot. 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 2/4.
Kuinka kauan ”Rakenteisten merkkijonojen mallintaminen”-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