TypeScript Academy · Oppitunti

Interpoloinnin tyyppiturvallisuus

Poimikaa merkkijonoista interpolointimuuttujat ja vaatikaa ne.

Oppitunti 2/413 vaihetta

Interpoloinnin tyyppiturvallisuus 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.

Tyypitysturvallinen interpolointi

Viestit sisältävät usein paikkamerkkejä, kuten "Hello, {name}". Tyypitysturvallinen i18n poimii paikkamerkkien nimet viestin merkkijonotyypistä ja edellyttää vastaavien argumenttien välittämistä.

Tavoite

Kun viestin literaalityyppi on annettu, haluamme laskea sen tarvitsemien muuttujien objektin. Näin t("greet", { name: "Ada" }) vaaditaan ja puuttuva name aiheuttaa käännösvirheen.

Yhden paikkamerkin poimiminen

Template literal -ehtotyyppi poimii muuttujan nimen yksittäisen paikkamerkin sisältävästä merkkijonosta. Oikeassa koodissa kuvio kirjoitetaan backtick-merkeillä muodossa: merkkijono, aaltosulje auki, infer V, aaltosulje kiinni, merkkijono. Merkitsemme tätä tunnistinta alla muodolla BraceMatch.

// Real TS pattern (backtick template literal):
//   matches any text, then {V}, then any text; infers V.

type Var<S extends string> =
  S extends BraceMatch<infer V> ? V : never;

type A = Var<"Hello, {name}">; // "name"

Useiden paikkamerkkien poimiminen

Kerätkää kaikki paikkamerkit unioniin rekursion avulla. Kuvio poimii yhden muuttujan ja jäljelle jäävän loppuosan, minkä jälkeen loppuosa käsitellään rekursiivisesti.

// Pattern: any text, {V}, then Rest tail -- infer V and Rest.

type Vars<S extends string> =
  S extends BraceMatchRest<infer V, infer Rest>
    ? V | Vars<Rest>
    : never;

type B = Vars<"Hi {first} {last}!">; // "first" | "last"

Nimistä args-objektiksi

Muutakaa nimien unioni vaadituksi objektityypiksi mapped-tyypin avulla.

type ArgsOf<S extends string> = {
  [K in Vars<S>]: string | number;
};

type G = ArgsOf<"Hello, {name}">;
// { name: string | number }

Ei paikkamerkkejä, ei argumentteja

Kun viestissä ei ole paikkamerkkejä, Vars on never, joten args-objekti on tyhjä. Tällöin args-parametri voidaan tehdä valinnaiseksi.

type C = Vars<"Goodbye">;       // never
type D = ArgsOf<"Goodbye">;     // {} (empty)

Tyypitetty käännösfunktio

Määrittäkää args-parametri valitun avaimen perusteella hakemalla viestin literaali ja laskemalla sen argumentit.

declare const messages: {
  greet: "Hello, {name}";
  invite: "Join {count} others";
};

declare function t<K extends keyof typeof messages>(
  key: K,
  args: ArgsOf<(typeof messages)[K]>
): string;

Käytännön toiminta

Kääntäjä vaatii nyt täsmälleen ne muuttujat, jotka kukin viesti määrittelee.

t("greet", { name: "Ada" });   // ok
t("greet", {});                 // Error: name is missing
t("invite", { count: 3 });      // ok
t("invite", { name: "x" });     // Error: count missing, name unexpected

Valinnaiset args-parametrit tavallisille viesteille

Käyttäkää ehdollista ylikuormitusta, jotta paikkamerkittömät viestit eivät vaadi lainkaan toista argumenttia.

type MaybeArgs<S extends string> =
  Vars<S> extends never ? [] : [args: ArgsOf<S>];

declare function t2<K extends keyof typeof messages>(
  key: K,
  ...rest: MaybeArgs<(typeof messages)[K]>
): string;

Mukautetut erottimet

Jos luettelonne käyttää muotoa {{name}} tai %{name}, muokatkaa kohteen Vars template literal -kuviota vastaavasti. Tekniikka on sama, vain ympäröivä literaali muuttuu.

Miksi tällä on merkitystä

Puuttuvat tai väärin kirjoitetut interpolointimuuttujat aiheuttavat usein käyttöliittymän merkkijonojen rikkoutumisen ("Hello, undefined"). Kun muuttujat poimitaan tyyppitasolla, virheistä tulee käännösvirheitä ja jokaisen viestin sopimus dokumentoituu.

Pikatarkistus

Testatkaa ymmärrystänne interpoloinnin tyyppiturvallisuudesta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Sovittamalla viestien literaalityyppejä template literalien ja infer-avainsanan avulla poimitte paikanvaraajien nimet unioniksi, yhdistätte ne vaadittuun args-objektiin ja saatte translate-funktion vaatimaan täsmälleen kyseiset muuttujat sekä olemaan valinnaisen, kun niitä ei ole.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Interpoloinnin tyyppiturvallisuus” ilmainen?

Kyllä – oppitunnin ”Interpoloinnin tyyppiturvallisuus” 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 ”Interpoloinnin tyyppiturvallisuus”?

Poimikaa merkkijonoista interpolointimuuttujat ja vaatikaa ne. 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 ”Interpoloinnin tyyppiturvallisuus”-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

← Takaisin: TypeScript Academy