{"id":20096,"date":"2023-03-13T05:00:00","date_gmt":"2023-03-13T04:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=20096"},"modified":"2024-07-22T15:26:34","modified_gmt":"2024-07-22T13:26:34","slug":"type-guard-w-typescript-porzadek-w-typach","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/type-guard-w-typescript-porzadek-w-typach\/","title":{"rendered":"Type Guard w Typescript \u2013 porz\u0105dek w typach"},"content":{"rendered":"\n<p>J\u0119zyk Typescript cieszy si\u0119 coraz wi\u0119ksz\u0105 popularno\u015bci\u0105 zar\u00f3wno w\u015br\u00f3d projekt\u00f3w front-end jak i back-end, gdzie do tej pory wykorzystywany by\u0142 Javascript. Nie ma w tym nic dziwnego \u2013 j\u0119zyk ten oferuje nam du\u017co wi\u0119ksz\u0105 przewidywalno\u015b\u0107, stabilno\u015b\u0107 oraz poprawia jako\u015b\u0107 kodu i projektu. Jedn\u0105 z technik potrzebnych do organizacji kodu i jego lepszego zrozumienia, kt\u00f3r\u0105 przybli\u017c\u0119 w artykule, jest korzystanie z Type Guard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Type Guard<\/strong><\/h2>\n\n\n\n<p>Type Guard to<strong> blok kodu, kt\u00f3ry wykorzystuj\u0105c zawarte w nim warunki, zwr\u00f3ci informacje o typie przekazanej zmiennej.<\/strong> Pozwala nam to zaw\u0119zi\u0107 typ zmiennej i poprawne wykorzystanie jej w\u0142a\u015bciwo\u015bci w dalszych cz\u0119\u015bciach kodu. Aby zobrazowa\u0107 ten problem, przyjrzyjmy si\u0119 poni\u017cszemu fragmentowi kodu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-1.png\"><img decoding=\"async\" width=\"362\" height=\"122\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-1.png\" alt=\"Trzy typy u\u017cytkownik\u00f3w\" class=\"wp-image-20097\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-1.png 362w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-1-300x101.png 300w\" sizes=\"(max-width: 362px) 100vw, 362px\" \/><\/a><figcaption>Ryc. 1 Trzy typy u\u017cytkownik\u00f3w<\/figcaption><\/figure><\/div>\n\n\n\n<p>Nasza aplikacja pozwala na zalogowanie si\u0119 3 typom u\u017cytkownik\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Super admin,<\/li><li>Admin,<\/li><li>User.<\/li><\/ul>\n\n\n\n<p>Ka\u017cdy z nich posiada wsp\u00f3lny typ <strong>Account<\/strong> oraz dedykowany i z unikaln\u0105 metod\u0105 typ makeOrder, removeUser i removeAdmin:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-1.png\"><img decoding=\"async\" width=\"333\" height=\"443\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-1.png\" alt=\"Account Type cd.\" class=\"wp-image-20099\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-1.png 333w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-1-226x300.png 226w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/a><figcaption>Ryc. 2 Account Type cd.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Wygl\u0105da na to, \u017ce ma to r\u0119ce i nogi. Teraz u\u017cytkownik loguje si\u0119 do naszej aplikacji i ma 3 \u015bcie\u017cki:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>z\u0142o\u017cenie zam\u00f3wienia,<\/li><li>usuni\u0119cie u\u017cytkownika,<\/li><li>usuni\u0119cie admina.<\/li><\/ul>\n\n\n\n<p>Stw\u00f3rzmy wi\u0119c funkcj\u0119, kt\u00f3ra zadecyduje o tym, jaka metoda ma zosta\u0107 odpalona:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-1.png\"><img decoding=\"async\" width=\"644\" height=\"119\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-1.png\" alt=\"Funkcja makeAction\" class=\"wp-image-20101\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-1.png 644w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-1-300x55.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/a><figcaption>Ryc. 3 Funkcja makeAction<\/figcaption><\/figure><\/div>\n\n\n\n<p><strong>Funkcja makeAction<\/strong> przyjmuje parametr account o unii User, Admin i SuperAdmin. Jak wida\u0107, <strong>Typescript informuje nas o polach dost\u0119pnych na tym obiekcie, <\/strong>wynikaj\u0105cych z cz\u0119\u015bci wsp\u00f3lnej typ\u00f3w TUser, TAdmin oraz TSuperAdmin<strong>.<\/strong> Co z metodami, kt\u00f3re s\u0105 dost\u0119pne na ka\u017cdym z tych typ\u00f3w? Tutaj Typescript chroni nas przed b\u0142\u0119dnym wywo\u0142aniem metody, kiedy typ u\u017cytkownika b\u0119dzie inny ni\u017c zak\u0142adamy.<\/p>\n\n\n\n<p>Naszym zadaniem jest rozpoznanie tego typu i na jego podstawie, wywo\u0142anie odpowiedniej metody, kt\u00f3ra nie wywo\u0142a b\u0142\u0119du w runtime.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sposoby wyci\u0105gni\u0119cia typu zmiennej<\/strong><\/h2>\n\n\n\n<p>Istnieje 5 sposob\u00f3w na wyci\u0105gni\u0119cie typu zmiennej:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>u\u017cycie <em>in<\/em> w celu sprawdzenia istnienia property i okre\u015blenia typu,<\/li><li>u\u017cycie <em>instanceof<\/em> do okre\u015blenia typu,<\/li><li>u\u017cycie <em>typeof<\/em> do okre\u015blenia typu,<\/li><li>zaw\u0119\u017canie poprzez por\u00f3wnanie,<\/li><li>niestandardowe, w\u0142asne type guard.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>In type guard<\/strong><\/h3>\n\n\n\n<p>In type guard <strong>dostarcza informacji, czy obiekt, kt\u00f3ry sprawdzamy, ma w sobie okre\u015blone property<\/strong>. Nale\u017cy pami\u0119ta\u0107, \u017ce property znajduj\u0105ca si\u0119 w naszym warunku, powinna by\u0107 unikalna dla jednego konkretnego typu, aby zaw\u0119zi\u0107 wyboru dla Typescripta do jednej opcji (chyba, \u017ce cel jest inny). Je\u015bli warunek zostanie spe\u0142niony, Typescript zaw\u0119\u017ca wyb\u00f3r z 3 r\u00f3\u017cnych typ\u00f3w do jednego, co spowoduje mo\u017cliwo\u015b\u0107 wywo\u0142ania konkretnej metody, na konkretny typie obiektu.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/4.png\"><img decoding=\"async\" width=\"646\" height=\"255\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/4.png\" alt=\"In type guard\" class=\"wp-image-20103\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/4.png 646w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/4-300x118.png 300w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/a><figcaption>Ryc. 4 In type guard<\/figcaption><\/figure><\/div>\n\n\n\n<p>Warto przypomnie\u0107, \u017ce property musi by\u0107 unikalne dla danego typu. Na przyk\u0142ad, je\u015bli warunkiem do wywo\u0142ania metody makeOrder jest posiadanie property name, Typescript napotka b\u0142\u0105d, poniewa\u017c name wyst\u0119puje na ka\u017cdym mo\u017cliwym typie na obiekcie account.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Instanceof type guard<\/strong><\/h3>\n\n\n\n<p>Instanceof jest wbudowanym w Javascript operatorem, <strong>sprawdzaj\u0105cym czy nasza zmienna jest instancj\u0105 wybranej przez nas klasy.<\/strong> Dzi\u0119ki temu jeste\u015bmy w stanie zweryfikowa\u0107, czy nasz parametr pokrywa si\u0119 z wybran\u0105 przez nas klas\u0105 i zaw\u0119zi\u0107 go do interesuj\u0105cego nas typu. Na pocz\u0105tku zadeklarujemy klasy, kt\u00f3re implementuj\u0105 nasze typy:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/5.png\"><img decoding=\"async\" width=\"507\" height=\"465\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/5.png\" alt=\"\" class=\"wp-image-20105\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/5.png 507w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/5-300x275.png 300w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/a><figcaption>Ryc. 5 Instanceof type guard<\/figcaption><\/figure><\/div>\n\n\n\n<p>Nast\u0119pnie w warunku if sprawdzamy, czy nasz parametr jest instancj\u0105 danej klasy. Metoda ta opiera si\u0119 na por\u00f3wnaniu \u0142a\u0144cuch\u00f3w prototyp\u00f3w (prototype chain) dla zmiennej account oraz klasy np. User. W przypadku, gdy warunek b\u0119dzie spe\u0142niony i \u0142a\u0144cuchy b\u0119d\u0105 si\u0119 pokrywa\u0107, Typescript pozwoli nam na skorzystanie z metod i p\u00f3l dost\u0119pnych tylko na tym konkretnym typie.<\/p>\n\n\n\n<p>Efekt jest nast\u0119puj\u0105cy:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/6.png\"><img decoding=\"async\" width=\"649\" height=\"252\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/6.png\" alt=\"Instanceof type guard cd.\" class=\"wp-image-20107\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/6.png 649w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/6-300x116.png 300w\" sizes=\"(max-width: 649px) 100vw, 649px\" \/><\/a><figcaption>Ryc. 6 Instanceof type guard cd.<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The typeof type guard<\/strong><\/h3>\n\n\n\n<p><em>Typeof<\/em>, tak jak <em>instanceof<\/em>, jest wbudowanym operatorem Javascript. W tym przypadku nie por\u00f3wnujemy obiektu do instancji danej klasy, ale <strong>por\u00f3wnujemy typ na jego konkretnym polu i o wyniku informujemy Typescript.<\/strong> Aby zilustrowa\u0107 ten przyk\u0142ad, dodajmy nowe pole na typie TAccount o nazwie <strong>email,<\/strong> kt\u00f3re mo\u017ce przyj\u0105\u0107 warto\u015b\u0107 string lub null, je\u015bli u\u017cytkownik nie wprowadzi\u0142 jeszcze swojego maila do bazy danych.<\/p>\n\n\n\n<p>Po wej\u015bciu na konkretny widok u\u017cytkownik ma mo\u017cliwo\u015b\u0107 wys\u0142ania maila z aktualn\u0105 ofert\u0105 na swoj\u0105 skrzynk\u0119 internetow\u0105. Stw\u00f3rzmy zatem funkcj\u0119 <strong>sendEmail,<\/strong> kt\u00f3ra przyjmuje parametr o warto\u015bci string oraz funkcj\u0119, kt\u00f3ra wywo\u0142a t\u0119 metod\u0119. Jak wida\u0107, Typescript s\u0142usznie nie pozwoli nam na odpalenie kodu, poniewa\u017c na tym etapie nie wiemy, czy przekazana przez nas warto\u015b\u0107 na pewno jest stringiem i program wyrzuci\u0142by b\u0142\u0105d w runtime.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/7.png\"><img decoding=\"async\" width=\"647\" height=\"130\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/7.png\" alt=\"Funkcja sendEmail\" class=\"wp-image-20109\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/7.png 647w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/7-300x60.png 300w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><\/a><figcaption>Ryc. 7 Funkcja sendEmail<\/figcaption><\/figure><\/div>\n\n\n\n<p>Nale\u017cy zatem doda\u0107 warunek sprawdzaj\u0105cy, czy typ na polu email jest r\u00f3wny string.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/8.png\"><img decoding=\"async\" width=\"636\" height=\"118\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/8.png\" alt=\"Funkcja sendEmail cd.\" class=\"wp-image-20111\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/8.png 636w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/8-300x56.png 300w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/a><figcaption>Ryc. 8 Funkcja sendEmail cd.<\/figcaption><\/figure><\/div>\n\n\n\n<p>W ten spos\u00f3b mamy pewno\u015b\u0107, \u017ce pole email zawiera email u\u017cytkownika (podlegaj\u0105cy wcze\u015bniejszej walidacji w aplikacji) i Typescript b\u0119dzie zadowolony.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Zaw\u0119\u017canie poprzez por\u00f3wnanie<\/strong><\/h3>\n\n\n\n<p>W przypadku, kiedy jedno z p\u00f3l na naszym obiekcie \u015bci\u015ble okre\u015bla jego typ, warto zastosowa\u0107 <strong>zaw\u0119\u017cenie typu poprzez por\u00f3wnanie jego warto\u015bci<\/strong>. W naszym przypadku por\u00f3wnamy property type do ka\u017cdej z warto\u015bci enuma AccountType. W ten spos\u00f3b jeste\u015bmy w stanie zaw\u0119zi\u0107 typ obiektu do jednego konkretnego, kt\u00f3ry nas interesuje.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/9.png\"><img decoding=\"async\" width=\"647\" height=\"252\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/9.png\" alt=\"Zaw\u0119\u017canie poprzez por\u00f3wnanie\" class=\"wp-image-20113\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/9.png 647w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/9-300x117.png 300w\" sizes=\"(max-width: 647px) 100vw, 647px\" \/><\/a><figcaption>Ryc. 9 Zaw\u0119\u017canie poprzez por\u00f3wnanie<\/figcaption><\/figure><\/div>\n\n\n\n<p>Po spe\u0142nieniu warunk\u00f3w, Typescript daje nam dost\u0119p do wybranych metod dla ka\u017cdego z trzech typ\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Niestandardowe type guards<\/strong><\/h3>\n\n\n\n<p>Ciekawym rozwi\u0105zaniem na zaw\u0119\u017canie typ\u00f3w jest <strong>pisanie w\u0142asnych type guards<\/strong>. Zalet\u0105 tej techniki, jest mo\u017cliwo\u015b\u0107 stworzenia w\u0142asnej metody, kt\u00f3ra nie narzuca nam \u017cadnych ogranicze\u0144 i pozwala sprawdzi\u0107 kilka interesuj\u0105cych nas warunk\u00f3w, a nast\u0119pnie zaw\u0119zi\u0107 typ do jednego konkretnego, kt\u00f3ry nas interesuje. Niestety, jest tutaj pewne <strong>ryzyko pope\u0142nienia b\u0142\u0119du<\/strong> podczas pisania takiego kodu i otrzymania b\u0142\u0119du w runtime.<\/p>\n\n\n\n<p>Przejd\u017amy zatem przez konkretny case, kiedy mo\u017cemy tej techniki u\u017cy\u0107. Dodajemy nowe pole, kt\u00f3re przyjmuje warto\u015b\u0107 boolean o nazwie <strong>isAdult,<\/strong> na type TUser. Nast\u0119pnie dodajemy kolejny typ Tadult, kt\u00f3ry musi posiada\u0107 warto\u015b\u0107 <strong>isAdult<\/strong> r\u00f3wn\u0105 true, oraz metod\u0119 <strong>adultAction<\/strong> dost\u0119pn\u0105 tylko na tym typie.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/10.png\"><img decoding=\"async\" width=\"280\" height=\"242\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/10.png\" alt=\"Pole isAdult\" class=\"wp-image-20115\"\/><\/a><figcaption>Ryc. 10 Pole isAdult<\/figcaption><\/figure><\/div>\n\n\n\n<p>Nast\u0119pnie stw\u00f3rzmy metod\u0119 <strong>makeOnlyAdultAction, <\/strong>kt\u00f3ra ma za zadanie wywo\u0142a\u0107 metod\u0119 adultAction, tylko dla osoby pe\u0142noletniej.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/11.png\"><img decoding=\"async\" width=\"741\" height=\"128\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/11.png\" alt=\"mekOnlyAdultAction\" class=\"wp-image-20117\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/11.png 741w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/11-300x52.png 300w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/a><figcaption>Ryc. 11 mekOnlyAdultAction<\/figcaption><\/figure><\/div>\n\n\n\n<p>Jak wida\u0107, Typescript wyrzuca nam b\u0142\u0105d, poniewa\u017c nie ka\u017cdy zalogowany u\u017cytkownik, mo\u017ce by\u0107 doros\u0142y i nie jest w stanie wywo\u0142a\u0107 tej metody.<\/p>\n\n\n\n<p>Aby sprawdzi\u0107, czy dana osoba jest pe\u0142noletnia, oraz aby Typescript wiedzia\u0142, \u017ce mo\u017ce wywo\u0142a\u0107 wy\u017cej wymienion\u0105 metod\u0119, stw\u00f3rzmy wi\u0119c now\u0105 metod\u0119, kt\u00f3ra zaw\u0119zi nam typ TUser do typu TAdult.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/12.png\"><img decoding=\"async\" width=\"789\" height=\"89\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/12.png\" alt=\"\" class=\"wp-image-20119\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/12.png 789w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/12-300x34.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/12-768x87.png 768w\" sizes=\"(max-width: 789px) 100vw, 789px\" \/><\/a><figcaption>Ryc. 12 isAdultUser<\/figcaption><\/figure><\/div>\n\n\n\n<p>Wy\u017cej umieszczony kod zawiera 2 warunki:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>czy property type jest r\u00f3wne User,<\/li><li>czy flaga isAdult jest r\u00f3wna true.<\/li><\/ul>\n\n\n\n<p>Je\u015bli warunek zostanie spe\u0142niony, typ, kt\u00f3ry przekazali\u015bmy do metody, zostanie przez Typescript zaw\u0119\u017cony do typu TAdult. Sprawd\u017amy, jak to wygl\u0105da w praktyce.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/13.png\"><img decoding=\"async\" width=\"745\" height=\"170\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/13.png\" alt=\"makeOnlyAdultAction cd.\" class=\"wp-image-20121\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/13.png 745w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/13-300x68.png 300w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><\/a><figcaption>Ryc.13 makeOnlyAdultAction cd.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podsumowanie<\/strong><\/h2>\n\n\n\n<p>W artykule przedstawi\u0142em kilka metod na zabezpieczenie swojego kodu i wzmocnienie bezpiecze\u0144stwa typ\u00f3w w naszym kodzie, dzi\u0119ki czemu jest on bardziej stabilny, przewidywalny i cz\u0119\u015bciowo przetestowany.<\/p>\n\n\n\n<p>Nale\u017cy pami\u0119ta\u0107, \u017ce ka\u017cda linijka ma swoj\u0105 cen\u0119. Dodanie type guards w wielu miejscach naszej aplikacji z pewno\u015bci\u0105 przyniesie liczne korzy\u015bci w przysz\u0142o\u015bci, ale czas po\u015bwi\u0119cony na pokrycie naszego kodu type guardami b\u0119dzie odczuwalny i wymaga dobrego przemy\u015blenia i zaprojektowania typ\u00f3w\/interfejs\u00f3w. Projekt projektowi nier\u00f3wny, lecz uwa\u017cam, \u017ce gra jest warta \u015bwieczki.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;20096&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;7&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 7)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Type Guard w Typescript \u2013 porz\u0105dek w typach&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 7)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>J\u0119zyk Typescript cieszy si\u0119 coraz wi\u0119ksz\u0105 popularno\u015bci\u0105 zar\u00f3wno w\u015br\u00f3d projekt\u00f3w front-end jak i back-end, gdzie do tej pory wykorzystywany by\u0142 &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/type-guard-w-typescript-porzadek-w-typach\/\">Continued<\/a><\/p>\n","protected":false},"author":486,"featured_media":20126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[2427,1646,1647,113,202,333],"class_list":["post-20096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-digital","tag-type-guard","tag-backend","tag-frontend","tag-javascript","tag-typescript"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/Type-Guard-w-Typescript-\u2013-porzadek-w-typach.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20096"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/486"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=20096"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20096\/revisions"}],"predecessor-version":[{"id":20125,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/20096\/revisions\/20125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/20126"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=20096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=20096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=20096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}