TypeScript: Asercja typów i aliasy

3.8+

0:00Na ten moment wiemy już w jaki sposób

0:02określać typy danych i jednocześnie wiemy też, że w niektórych sytuacjach TypeScript

0:06jest w stanie określić je samodzielnie. Ale mogą zdarzyć się sytuacje,

0:11w których to my będziemy wiedzieć więcej na temat typów.

0:14Wtedy musimy go w odpowiedni sposób o tym poinformować.

0:17I takie informowanie nazywa się asercją typów.

0:20Jako dodatek do tej lekcji powiemy sobie również o aliasach.

0:24Z kolei w drugiej części lekcji pokażę Ci jeszcze czym są aliasy.

0:30Weźmy sobie pierwszy przykład sytuacji, w której

0:32to my wiemy więcej na temat typu. Stwórzmy

0:35sobie zatem nowy typ, który określi nam strukturę naszego obiektu.

0:38Następnie ten obiekt musimy stworzyć

0:41i załóżmy, że chcemy te informacje gdzieś przesłać,

0:44w związku z tym konwertujemy ten obiekt na jej JSON string.

0:47Następnie po drugiej stronie przechwytujemy

0:49te dane i musimy je ponownie przekształcić na obiekt.

0:53Problem jednak polega na tym, że na ten moment

0:55TypeScript nie wie tutaj nic na temat typu tego obiektu.

0:59W efekcie TypeScript nie jest nam w stanie

1:01również podpowiadać właściwości tego obiektu.

1:04Ale teraz jeżeli poinformujemy go o konkretnym typie tego obiektu, wszystko

1:08powinno wrócić do normy i ku temu mamy dwa sposoby.

1:12Jednym z nich jest następujący zapis.

1:15To jest właśnie zapis charakterystyczny dla asercji typów.

1:18I on właśnie wystarcza do tego, aby poinformować TypeScript o typie danych.

1:23Alternatywnym sposobem wskazania typu jest

1:26wykorzystanie konstrukcji S, czyli stąd usuwamy typ i zapisujemy go w ten sposób.

1:31W tym momencie TypeScript ma już komplet

1:34informacji do tego, aby pomagać nam w zapisie.

1:36Zobacz, że mamy tutaj właściwości naszego obiektu.

1:40Także jak widzisz mamy tutaj naturalną korzyść wynikającą z asercji.

1:44Kolejnym przykładem, w którym asercja

1:46świetnie się sprawdza jest praca z elementami DOM.

1:49Konkretnie spójrzmy teraz na ten fragment.

1:51Pobieramy tutaj element o klasie input i w związku z tym, że wykorzystaliśmy metodę

1:56querySelector, TypeScript jest w stanie określić, że mamy tutaj

2:00do czynienia z elementem. No i być może wszystko byłoby w porządku gdyby nie fakt,

2:04że w przypadku elementu input chciałbym odczytać chociażby jego wartość.

2:09Więc jeżeli teraz się do niego odwołam, TypeScript nie jest w stanie ani mi podpowiedzieć

2:14i co gorsza informuje mnie o tym, że właściwość value nie istnieje.

2:18Wynika to konkretnie z faktu, że ten element powinien być typu HTML input

2:23element i to dokładnie określimy z pomocą asercji.

2:26Teraz TypeScript ma komplet informacji no i nie robi nam problemu o właściwość value.

2:32Na ten moment w kontekście asercji warto

2:34jeszcze, żebyś wiedział jedną rzecz. Mianowicie samą asercję możesz kojarzyć

2:38z rzutowaniem typów w innych językach programowania.

2:41No i faktycznie asercja jest jak

2:43rzutowanie typów, ale w stu procentach rzutowaniem nie jest.

2:47Konkretniej odróżnia ją od tego procesu fakt, że TS nie dokonuje tutaj dodatkowej

2:52weryfikacji tych typów, tylko po prostu ufa nam, że wiemy co robimy.

2:56Dodatkowo asercja w żaden sposób nie modyfikuje samej wartości.

3:01I na tym właśnie się zatrzymamy. Do asercji z pewnością będziemy jeszcze wracać,

3:06ale teraz wyjaśnię Ci czym są aliasy.

3:08Jak sama nazwa wskazuje alias jest

3:11alternatywną nazwą typu. Zobaczmy w jakiej sytuacji może okazać się to przydatne.

3:16Definiuje tutaj zmienną, która

3:18wykorzystując string literal type może przyjmować wartość medium lub large.

3:23Załóżmy teraz, że będziemy chcieli przekazać tą zmienną do funkcji.

3:26Tutaj w przypadku parametru muszę ponownie określić ten typ.

3:30Już na pierwszy rzut oka widzimy, że mamy tutaj powtórzenie.

3:33Oczywiście na to jeszcze moglibyśmy przymknąć oko,

3:36ale możemy zrobić tak: po prostu definiuję nowy typ słowem

3:41kluczowym type, w którym również z pomocą string literal type określam typ danych.

3:46Teraz możemy wykorzystać ten alias w tym miejscu oraz w tym.

3:51Swoją droga nic nie stoi na przeszkodzie, aby w takim

3:53typie znalazły się również odwołania do innych typów, dzięki czemu zyskujemy

3:58większą czytelność i elastyczność naszego kodu.

4:01Dodam tylko jeszcze, że w takiej sytuacji po najechaniu na typ, możesz uzyskać

4:05informację o tym jakie wartości w tym przypadku są dopuszczalne.

4:09W przypadku większej aplikacji ma to szczególne znaczenie.

4:13Na ten moment na temat asercji oraz aliasto już wszystko.

4:17Do usłyszenia za chwilę.