Tisztább TypeScript a Null Assertion Operatorral

Nemrégiben megtudtam egy hasznos TypeScript operátort: ​​A nem null állítás operátort. Megtagadja a változók null és undefined típusait.

Ebben a bejegyzésben elmagyarázom, hogyan és mikor kell használni ezt az operátort, és néhány példát hozok arra, hogy hol segíthet Önnek.

TL; DR: Ha egy változó után felkiáltójelet vesz fel, a nem definiált vagy null típusok figyelmen kívül maradnak.

A Null Assertion Operator használata

A nem null állítás operátor felvesz egy beírt változót, és eltávolítja belőle a definiálatlan és a null típusokat.

Az operátor használata olyan egyszerű, mint egy felkiáltójel hozzáadása.

2. A funkció végrehajtásakor figyelmen kívül hagyja a undefined típust:

3. Amikor az operátor állítása futás közben kudarcot vall, a kód normál JavaScript-kódként működik. Ez váratlan viselkedést okozhat. Példák az üzemeltető nem biztonságos használatára:

Felhívjuk figyelmét: Ez az operátor csak akkor lép életbe, ha be van kapcsolva a strictNullChecks zászló. Ha a jelző ki van kapcsolva, a fordító nem ellenőrzi a undefined és a null típusú hozzárendeléseket.

Most már tudom, mire gondolsz …

Miért akarom ezt megtenni?

Nézzünk meg néhány valós forgatókönyvet, amelyekben a nem null állítás operátora segíthet:

Eseménykezelők React refs-sel

A reagálási hivatkozások egy elem aktuális HTML-csomópontjának elérésére szolgálnak. Ref-ek használata esetén az aktuális érték null lehet (abban az esetben, ha a hivatkozott elem nincs leválasztva).

Sok esetben biztosak lehetünk abban, hogy az aktuális elem be van kapcsolva, így a null típus nem releváns.

A következő példában egy bemeneti elem görget a nézetbe, amikor egy gombra kattint:

Tudjuk, hogy a goToInput végrehajtásakor a bemeneti elem csatlakoztatva van. Nyugodtan feltételezhetjük, hogy a ref.current nem nulla:

A fordítási hiba az állítás operátor nélkül is megoldható. Használhatjuk a Logical AND :

parancsot

Ez egy kicsit részletesebb.

Különösen nehézkessé válik, ha láncolt opcionális tulajdonságokhoz használják. Lásd ezt a szélsőséges példát:

Tegyen javaslatot a React injekciós tesztjeire

A következő példa a prop tesztelésének közös mintáját tartalmazza. Két összetevőnk lesz.

Az első egy újrafelhasználható összetevő, amely harmadik féltől származó könyvtár-összetevő lehet. Visszahívást kap, és felhívja, amikor a bemeneti érték megváltozott. A visszahívás argumentumként egy űrlapeseményt kap.

A második komponens neve SpecificField , és a SpecificInput -ot tartalmazza. A SpecificField tudja, hogyan kell kibontani az aktuális értéket és átadni a visszahívásnak:

Szeretnénk tesztelni, hogy a SpecificField megfelelően hívja-e meg a onChange visszahívást.
Ez azt jelenti, hogy a SpecificField egy onFieldChanged visszahívást kap, amely kibontja az esemény értékét:

Fordítási hiba lép fel, mivel a onFieldChanged javaslat opcionális és nem definiálható.

Mégis tudjuk, hogy a injectedCallback meghatározása azon a soron történik, ahol a hiba bekövetkezik – teszteltük.

Itt segíthet a nem null állítás operátor:

Összehasonlításképpen, az operátort nem használó lehetséges megoldás az if-else utasítás használata:

Ez sokkal részletesebb.

A két lehetőség között inkább a nem null állítás operátort használom. Rövidebb, tömörebb és kevesebb a kazántábla.

SZERKESZTÉS: Mi van az opcionális láncolással?

Néha megkérdezik, hogy mi a különbség a Null Assertion operátor és a Javascript opcionális láncolása között.
Míg az Opcionális láncolás csodálatosan hasznos eszköz, használata és célja kissé eltér. Vegyünk egy olyan esetet, amikor az Array.find függvényt használja, ahol tudja , hogy egy elem megtalálható. Vegyük a túlegyszerűsített példát:

Az Opcionális láncolás használatával ugyanazt a hibát fogja felvetni – a item? .value még mindig valószínűleg undefined , és fordítási hiba lép fel. Ha azonban a Null Assertion Operator programot használja, akkor a hiba érvényét veszti. A teljes példát itt láthatja.

Következtetés

A nem null állítás operátor hasznos kis eszköz. Használatakor ne felejtse el óvatosan bánni. A visszaélések váratlan viselkedést okoznak.

Az előnyök azonban rengetegek: Csökkenti a kognitív terhelést bizonyos esetekben, amelyek futás közben nem fordulhatnak elő. Ezenkívül kevésbé bőbeszédűvé teszi a kódot a többi alternatívához képest. Ráadásul úgy érzi, mintha kiabálna a fordítóval, ami mindig szórakoztató.

Az üzemeltető már néhányszor segített nekem. Remélem, ugyanolyan hasznosnak találja, mint én.