Tipui saugūs išskleidžiamieji meniu „React with TypeScript“: vykdymo laiko rizikos pašalinimas

Patikimų pasirinkimų sąrašų kūrimas React

Dirbant su formomis React ir TypeScript, itin svarbu užtikrinti duomenų įvesties teisingumą. Išskleidžiamieji meniu arba `` elementai yra plačiai naudojami naudotojams pasirenkant, tačiau jie gali kelti iššūkių, kai reikia išlaikyti tipo saugą. Iš pažiūros nedidelė klaida, kaip ir netikėta reikšmė, gali sukelti vykdymo klaidų. 😟

Pateiktame pavyzdyje kūrėjas bando sukurti išskleidžiamąjį menininkų sąrašą naudodamas „TypeScript“ palaikantį „React“ komponentą. Nors įgyvendinimas naudoja tipo tvirtinimus galimoms reikšmėms apibrėžti, jis vis tiek leidžia pridėti netinkamas parinktis vykdymo metu. Tai pažeidžia „TypeScript“ panaudojimo tikslą kompiliavimo laiko saugumui užtikrinti.

Įsivaizduokite scenarijų, kai į išskleidžiamąjį sąrašą patenka netinkama parinktis, pvz., „NELEGALI VERTĖ“. Nors kuriant tai gali būti nepastebėta, tai gali sukelti gamybos problemų. Tai kelia klausimą: ar yra geresnis būdas užtikrinti, kad išskleidžiamieji sąrašai būtų saugūs, nenaudojant tipo liejimo?

Šiame straipsnyje mes išnagrinėsime patikimą sprendimą, kuris pašalina netinkamų parinkčių riziką kompiliavimo metu. Naudodami galingą TypeScript tipo sistemą, galite rašyti švaresnius, labiau prižiūrimus React komponentus. Pasinerkime ir įsitikinkime, kad jūsų pasirinkti sąrašai yra tokie saugūs, kaip jie gali būti! 🚀

komandą	Naudojimo pavyzdys
as const	Naudojamas kuriant tik skaitomą masyvą arba objektinį literalą. Pavyzdyje jis užtikrina, kad allArtists yra kortelių tipas, o ne bendras masyvas.
typeof	Išskiria kintamojo arba konstantos tipą. Scenarijuje typeof allArtists naudojamas masyvo elementų tipui nustatyti.
[number]	Nurodo elementų tipą sekoje arba masyve. Pavyzdžiui, (visų atlikėjų tipas)[numeris] nustato galiojančias sektos eilutės reikšmes.
extends string	Apibrėžiamas bendro tipo apribojimas, užtikrinantis, kad tipas, perduotas bendrajam, yra eilutė. Išskleidžiamajame komponente užtikrinama, kad visos parinktys būtų pagrįstos eilutėmis.
React.ChangeEvent	Konkretus tipas, kurį teikia „React“, skirtas formos elementų įvykiams tvarkyti. Tai užtikrina, kad e.target.value įvykių tvarkyklėje atitiktų teisingą įvesties tipą.
onChange	Nurodo reakciją, skirtą formos elementų, pvz., , verčių pokyčiams tvarkyti. Jis naudojamas susieti išskleidžiamojo meniu vertę su būsena.
includes()	„JavaScript“ masyvo metodas, kuris patikrina, ar masyve yra konkretus elementas. Naudojama patvirtinti, kad parinkčių sąraše yra išskleidžiamoji reikšmė.
key	Reikalingas „React“ pasiūlymas sąrašo elementams. Pavyzdyje jis užtikrina, kad kiekviena parinktis turėtų unikalų identifikatorių.
React.useState	Reakcijos kabliukas funkcinių komponentų būsenai valdyti. Naudojama sekti pasirinkto atlikėjo vertę išskleidžiamajame meniu.
T | ""	„TypeScript“ sąjungos tipas, leidžiantis naudoti konkretų tipą (pvz., atlikėją) arba tuščią eilutę. Tai leidžia lanksčiai tvarkyti numatytąsias reikšmes.

Sukurkite saugaus tipo išskleidžiamuosius meniu „React“.

Aukščiau pateiktais scenarijais siekiama sukurti patikimą, tipo saugų išskleidžiamojo sąrašo įgyvendinimą Reaguoti naudojant TypeScript. Pirmajame sprendime naudojama „TypeScript“ vykdoma į enum panaši struktūra, naudojant raktinį žodį „as const“. Tai užtikrina, kad atlikėjų vardų masyvas būtų traktuojamas kaip eilutė su pažodiniais tipais. Apibrėždami „Artist“ tipą kaip šių pažodinių žodžių junginį, pašaliname galimybę kompiliavimo metu įvesti netinkamas parinktis. Šis metodas supaprastina kodą, išlaikant griežtą tipo saugą ir išvengiant nereikalingų vykdymo laiko patikrų. 🎯

Antrasis scenarijus taiko šiek tiek kitokį požiūrį, daugiausia dėmesio skiriant pasirinktos vertės patvirtinimui vykdymo metu naudojant metodą „includes()“. Nors tai įveda vykdymo laiko patikrą, ji užtikrina, kad programa nesustrigtų, jei kažkaip įvedama reikšmė už iš anksto nustatyto sąrašo ribų. Šis metodas naudingas tais atvejais, kai gali būti naudojami išoriniai duomenys arba dinamiškai generuojamos parinktys. Tačiau tai paaukoja kai kurias kompiliavimo laiko garantijas, kurias suteikia „TypeScript“. Tai geras saugumo ir lankstumo derinimo pavyzdys. 🚀

Trečiasis sprendimas pristato daugkartinį bendrąjį išskleidžiamąjį komponentą. Šis metodas naudoja „TypeScript“ bendrąsias savybes, kad būtų užtikrintas išskleidžiamojo meniu parinkčių ir verčių tipo saugumas. Apibrėžus „DropdownProps“ tipą su bendruoju apribojimu („T pratęsia eilutę“), komponentas tampa labai lankstus ir gali būti naudojamas pakartotinai įvairiuose kontekstuose. Šis metodas idealiai tinka didelio masto projektams, kuriuose reikalingi išskleidžiamieji meniu su įvairių tipų duomenimis. Tai taip pat skatina modulinį dizainą, sumažina kodo dubliavimą ir pagerina priežiūrą. Bendrasis išskleidžiamasis komponentas parodo, kaip efektyviai rašyti keičiamo dydžio ir pakartotinai naudojamus „React“ komponentus.

Kiekvienas sprendimas sprendžia saugaus tipo išskleidžiamųjų meniu problemą su savo unikaliomis stiprybėmis ir kompromisais. Pirmasis yra optimalus situacijose, kai kompiliavimo laiko saugumas yra svarbiausias, o parinktys yra statinės. Antrasis yra naudingas dirbant su dinaminiais duomenimis arba išoriniais šaltiniais. Trečiasis išsiskiria savo pakartotiniu panaudojimu ir masteliu didesniems projektams. Sujungus „React“ būsenos valdymą su „TypeScript“ tipo sistema, šie scenarijai siūlo praktinius sprendimus, kaip išspręsti dažniausiai pasitaikančias žiniatinklio kūrimo spąstus. Nesvarbu, ar dirbate su maža programa, ar su dideliu projektu, šie metodai gali padėti sukurti patikimus ir prižiūrimus komponentus. 💡

Tinkamo tipo išskleidžiamųjų meniu užtikrinimas „React“ be tipo perdavimo

Šis sprendimas naudoja „React with TypeScript“ priekiniam kūrimui, pabrėžiant kompiliavimo laiko saugumą ir pakartotinį naudojimą.

// Solution 1: Using a TypeScript Enforced Enum
const allArtists = ["elvis", "dr dre"] as const;
type Artist = (typeof allArtists)[number];

function App() {
  const [artist, setArtist] = React.useState<Artist | "">("");

  function handleArtistChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const newArtist = e.target.value as Artist | "";
    setArtist(newArtist);
  }

  return (
    <div>
      <select
        value={artist}
        onChange={handleArtistChange}
      >
        <option value="">Please choose</option>
        {allArtists.map((a) => (
          <option key={a} value={a}>{a}</option>
        ))}
      </select>
    </div>
  );
}

Patobulinta kompiliavimo laiko sauga naudojant pažodinius tipus

Šis metodas sukuria griežtai įvestą išskleidžiamąjį komponentą su „React“ ir „TypeScript“, užtikrinant, kad netinkamos parinktys būtų pažymėtos kompiliavimo metu.

type Artist = "elvis" | "dr dre";
const allArtists: Artist[] = ["elvis", "dr dre"];

function App() {
  const [artist, setArtist] = React.useState<Artist | "">("");

  function handleArtistChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const value = e.target.value;
    if (allArtists.includes(value as Artist) || value === "") {
      setArtist(value as Artist | "");
    }
  }

  return (
    <div>
      <select
        value={artist}
        onChange={handleArtistChange}
      >
        <option value="">Please choose</option>
        {allArtists.map((a) => (
          <option key={a} value={a}>{a}</option>
        ))}
      </select>
    </div>
  );
}

Bendrojo komponento naudojimas maksimaliam lankstumui užtikrinti

Šiame sprendime pateikiamas bendras išskleidžiamojo meniu komponentas, skirtas tvarkyti saugaus tipo sąrašus, užtikrinantis geresnį moduliškumą ir galimybę pakartotinai naudoti React projektuose.

type DropdownProps<T extends string> = {
  options: T[];
  value: T | "";
  onChange: (value: T | "") => void;
};

function Dropdown<T extends string>({ options, value, onChange }: DropdownProps<T>) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value as T | "")}>
      <option value="">Please choose</option>
      {options.map((option) => (
        <option key={option} value={option}>{option}</option>
      ))}
    </select>
  );
}

// Usage
const allArtists = ["elvis", "dr dre"] as const;
type Artist = (typeof allArtists)[number];

function App() {
  const [artist, setArtist] = React.useState<Artist | "">("");

  return (
    <Dropdown
      options={allArtists}
      value={artist}
      onChange={setArtist}
    />
  );
}

„React“ išskleidžiamųjų sąrašų kompiliavimo laiko saugos užtikrinimas

Įveskite sauga Reaguoti išskleidžiamieji meniu yra labai svarbūs siekiant išvengti klaidų, kurias sukelia netinkama įvestis, ypač programose, kuriose duomenų vientisumas yra gyvybiškai svarbus. Dažniausiai nepastebimas išskleidžiamojo meniu aspektas yra užtikrinti, kad kiekviena parinktis atitiktų iš anksto nustatytą tipą tiek kūrimo, tiek vykdymo metu. Nors naudoti masyvus, pvz., „allArtists“, patogu, gali kilti problemų, jei kas nors netyčia prideda netinkamą parinktį. Siekiant tai išspręsti, alternatyvūs metodai, pvz., „Enums“ arba pažangūs „TypeScript“ metodai, gali suteikti daugiau garantijų. Pavyzdžiui, enumai padeda užtikrinti griežtą leistinų reikšmių rinkinį, kuris sklandžiai veikia su TypeScript tipo tikrinimo galimybėmis. 🎯

Kitas naujoviškas būdas užtikrinti kompiliavimo laiko saugą yra gamyklos funkcijos naudojimas išskleidžiamoms parinktims generuoti. Sujungę generinių vaistų galią su šiuo gamykliniu modeliu, galite abstrakčiai kurti išskleidžiamuosius sąrašus ir užtikrinti, kad būtų generuojamos tik tinkamo tipo parinktys. Šis metodas ypač naudingas, kai išskleidžiamojo sąrašo reikšmės gaunamos iš užpakalinės programos API arba kito išorinio šaltinio. Pridėti vykdymo laiko patvirtinimus, pvz., „includes()“, vis tiek gali prireikti dinaminiuose scenarijuose, tačiau to reikėtų vengti vien tik statiniuose duomenų rinkiniuose, kuriuose „TypeScript“ gali užtikrinti saugumą kompiliavimo metu. 🚀

Galiausiai apsvarstykite galimybę ištirti įrankius ir papildinius, kurie pagerina kūrimo patirtį. Įrankiai, tokie kaip ESLint su TypeScript taisyklėmis, gali anksti pastebėti galimas problemas, net prieš paleidžiant kodą. Be to, galite rašyti vienetų testus naudodami tokias sistemas kaip „Jest“, kad įsitikintumėte, jog išskleidžiamoji logika veikia taip, kaip tikėtasi. Derindami kompiliavimo ir vykdymo strategijas, kūrėjai gali sukurti patikimus komponentus, kurie yra ir saugūs, ir prižiūrimi. 💡

Dažnai užduodami klausimai apie saugaus tipo išskleidžiamuosius meniu „React“.

1. Koks yra pagrindinis „React“ tipo saugaus išskleidžiamojo meniu tikslas?
2. Pagrindinis tikslas yra neleisti pasirinkti netinkamų verčių, užtikrinant, kad visos parinktys atitiktų iš anksto nustatytas TypeScript tipo.
3. Kaip galiu užtikrinti, kad mano išskleidžiamasis meniu priimtų tik iš anksto nustatytas vertes?
4. Naudokite as const raktinį žodį, kad sukurtumėte seką, tada nustatykite sąjungos tipą iš eilės reikšmių naudodami (typeof array)[number].
5. Ką daryti, jei mano išskleidžiamojo meniu parinktys gaunamos iš API?
6. Galite patvirtinti API atsakymus vykdymo metu ir susieti juos su a type-safe struktūra, užtikrinanti saugumą dirbant su dinaminiais duomenimis.
7. Ar išskleidžiamoms reikšmėms geriau naudoti Enums arba Tuples?
8. Enums puikiai tinka skaitomumui ir kompiliavimo laiko saugumui, bet gali padidinti daugiažodiškumą. Korpusai yra glaustesni ir puikiai tinka as const.
9. Ar galiu pakartotinai naudoti išskleidžiamąjį komponentą kelių tipų duomenims?
10. Taip! Naudokite bendrąjį komponentą su tipo apribojimu, pvz., T extends string, norėdami tvarkyti skirtingus išskleidžiamuosius duomenų rinkinius.
11. Kaip tvarkyti vykdymo laiko klaidas naudojant išskleidžiamąsias vertes?
12. Sujunkite kompiliavimo laiko saugą su vykdymo laiko patikra, tokia kaip Array.includes() dinamiškai gautoms reikšmėms patvirtinti.
13. Ar „TypeScript“ gali užfiksuoti klaidas dinamiškai sugeneruotose išskleidžiamojo meniu parinktyse?
14. Ne tiesiogiai. Jums reikia dinamiškai sugeneruotų parinkčių vykdymo patikrų ir tinkamo patvirtinimo, kai susiejate API atsakymus.
15. Kokie yra geriausi įrankiai išskleidžiamiesiems komponentams tikrinti?
16. „Jest“ ir „React Testing Library“ puikiai tinka vienetų testams, patvirtinantiems išskleidžiamąjį elgesį, rašyti.
17. Kaip veikia bendrasis išskleidžiamasis komponentas?
18. Tam reikia bendro tipo parametro, užtikrinančio, kad parinktims ir pasirinkimui būtų naudojamos tik to tipo reikšmės.
19. Kodėl yra React.ChangeEvent naudojamas įvykių tvarkyklėje?
20. Tai yra saugus būdas tvarkyti įvykius iš formos elementų, užtikrinant tinkamą spausdinimą e.target.value.
21. Kokie yra realaus tipo saugaus išskleidžiamojo meniu pavyzdžiai?
22. Apsvarstykite šalies parinkiklį, kuriame iš anksto nustatytos tokios parinktys kaip „JAV“ ir „Kanada“. Tinkamo tipo išskleidžiamieji meniu apsaugo nuo neteisingų įrašų, pvz., „Mars“. 🌍

Kurkite patikimus pasirinkimo sąrašus

Tinkamo tipo pasirinkimo sąrašai „React“ yra būtini norint išvengti klaidų, kurias sukelia netinkamos reikšmės. Naudodami „TypeScript“ statinės analizės galimybes, kūrėjai gali išvengti vykdymo laiko strigčių, taikydami griežtus išskleidžiamojo meniu parinkčių reikšmių tipus. Tai pagerina kodo kokybę ir priežiūrą. 🚀

Naudodami tokius metodus kaip generiniai vaistai, daugkartiniai komponentai ir kompiliavimo metu atliekamos saugos patikros, galite sukurti efektyvius išskleidžiamuosius sąrašus bet kokiam naudojimo atvejui. Šių metodų derinimas su tokiais testavimo įrankiais kaip „Jest“ dar labiau užtikrina patikimą veikimą. Suteikdami pirmenybę tipo saugai, suteikiate geresnę patirtį ir naudotojams, ir kūrėjams. 💡

Tipui saugių išskleidžiamųjų sąrašų nuorodos ir ištekliai

1. Išsami informacija apie „React“ būsenos valdymą naudojant „TypeScript“ buvo gauta iš oficialios „React“ dokumentacijos: Reaguoti į dokumentus .
2. Geriausios saugaus tipo programavimo naudojant „TypeScript“ praktikos buvo pateiktos „TypeScript“ vadove: „TypeScript“ dokumentai .
3. Dinaminių ir daugkartinio naudojimo išskleidžiamųjų komponentų kūrimo pavyzdžius įkvėpė straipsniai dev.to: Dev.to .
4. Įžvalgos apie klaidų tvarkymą ir vykdymo laiko patvirtinimą buvo gautos iš Kento C. Doddso mokymo programos: Kento C. Doddso dienoraštis .
5. „React“ komponentų testavimo įrankiai ir metodai buvo peržiūrėti oficialioje „Jest“ svetainėje: Jest Docs .