TypeScript Academy · Oppitunti

Monikkomuodot tyyppien avulla

Mallintakaa monikkomuodot tyyppiturvallisesti.

Oppitunti 3/413 vaihetta

Monikkomuodot tyyppien avulla 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.

Tyyppiturvallinen monikkomuodostus

Kielet tarvitsevat monikkomuotoja: ”1 kohde” ja ”2 kohdetta”. Tyyppiturvallinen i18n mallintaa monikkoluokat, kuten one ja other, ja vaatii count-argumentin, joten ette voi unohtaa sitä.

Monikkoluokat

Intl:n monikkosäännöt määrittelevät luokkia, kuten zero, one, two, few, many ja other. Englanti käyttää vain luokkia one ja other, mutta muut kielialueet käyttävät useampia.

type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";

Monikkoviestin rakenne

Esittäkää monikkomuotoinen viesti luokkien mukaan avainoituna objektina. other on pakollinen varavaihtoehto.

type PluralMessage = {
  other: string;
} & Partial<Record<Exclude<PluralCategory, "other">, string>>;

const items: PluralMessage = {
  one: "{count} item",
  other: "{count} items",
};

Monikkoviestin ja tavallisen viestin erottaminen

Luettelo sisältää sekä tavallisia merkkijonoja että monikko-objekteja. Argumenttivaatimukset poikkeavat toisistaan, joten tunnistamme rakenteen tyyppitasolla.

type IsPlural<M> = M extends { other: string } ? true : false;

countin vaatiminen

Kun viesti on monikkomuotoinen, translate-funktion argumenttien on sisällettävä numeerinen count. Laskemme argumenttityypin ehdollisesti.

type PluralArgs<M> = IsPlural<M> extends true
  ? { count: number }
  : {};

type A = PluralArgs<typeof items>; // { count: number }

Tyypitetty t monikkomuodoille

Yhdistäkää luettelohaku ehdollisiin argumentteihin, jotta monikkomuotoiset viestit vaativat count-argumentin ja tavalliset viestit eivät.

declare const cat: {
  items: { one: string; other: string };
  hello: string;
};

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

t("items", { count: 3 }); // ok
t("items", {});           // Error: count required
t("hello", {});           // ok

Muodon valitseminen ajonaikana

Ajonaikana Intl.PluralRules valitsee luokan count-arvon perusteella, minkä jälkeen luemme sitä vastaavan merkkijonon ja käytämme tarvittaessa other-vaihtoehtoa.

function plural(msg: { other: string; [k: string]: string }, count: number, locale: string) {
  const cat = new Intl.PluralRules(locale).select(count);
  return (msg[cat] ?? msg.other);
}

Interpoloinnin yhdistäminen monikkomuotoihin

Monikkomuotoiset merkkijonot sisältävät yleensä myös {count}-paikanvaraajan. Argumenttityyppiin voidaan yhdistää monikkomuotojen vaatimukset ja valitusta muodosta poimitut interpolointimuuttujat.

type FullArgs<M> = PluralArgs<M> & ExtractVars<M>;
// count plus any {placeholders} in the message

Monipuolisemmat muodot eri kielialueilla

Jotkin kielialueet, kuten puola ja venäjä, käyttävät luokkia few ja many. Koska PluralCategory sisältää ne jo, luettelo voi tarjota kyseiset avaimet ja sama mekanismi käsittelee niitä.

const ruItems = {
  one: "{count} товар",
  few: "{count} товара",
  many: "{count} товаров",
  other: "{count} товара",
};

other-varavaihtoehdon pakottaminen

Koska other on pakollinen PluralMessage-tyypissä, tyyppijärjestelmä takaa, että varavaihtoehto on olemassa. Näin estetään ajonaikainen tilanne, jossa mikään monikkomuoto ei vastaa arvoa.

Miksi tällä on merkitystä

Monikkomuotovirheet, kuten ”1 kohdetta”, ja unohtuneet count-arvot ovat yleisiä tyypittämättömässä i18n:ssä. Kun luokat mallinnetaan tyyppeinä ja count vaaditaan, oikeasta monikkomuodosta tulee oletus ja puuttuvasta count-arvosta käännösvirhe.

Pikatarkistus

Tarkistakaa, miten hyvin hallitsette tyyppiturvallisen monikkomuodostuksen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Mallinsitte monikkomuodot monikkoluokkien mukaan avainoituna objekteina, joissa on pakollinen other-varavaihtoehto, tunnistitte monikkomuotoiset viestit tyyppitasolla ja vaaditte numeerisen count-argumentin ehdollisten tyyppien avulla. Intl.PluralRules valitsee muodon ajonaikana, ja sama mekanismi toimii myös monipuolisemmilla kielialueilla.

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 ”Monikkomuodot tyyppien avulla” ilmainen?

Kyllä – oppitunnin ”Monikkomuodot tyyppien avulla” 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 ”Monikkomuodot tyyppien avulla”?

Mallintakaa monikkomuodot tyyppiturvallisesti. 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 ”Monikkomuodot tyyppien avulla”-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