TypeScript: Typowanie this

3.9+

0:00Na tym etapie wiemy już w jaki sposób działa słowo kluczowe this i jak zachowuje się

0:04w różnych sytuacjach oraz jak możemy sobie z tym radzić.

0:07Jednak w tej lekcji chciałbym pokazać Ci jak możemy dodawać typy do słowa

0:12kluczowego this, ponieważ nie jest to do końca oczywiste.

0:15Na potrzeby przykładu utworzę tutaj

0:17obiekt zawierający właściwość oraz metodę.

0:20Metoda ta będzie zwracać nową funkcję a z

0:23kolei ta funkcja informację o naszej właściwości.

0:27Teoretycznie wszystko powinno być w porządku.

0:29W związku z tym że metoda introduce

0:32zwraca nam nową funkcję przypisuję ją to zmiennej a następnie wywołuję.

0:36No i okazuje się, że mamy błąd ale na tym

0:39etapie wiemy już doskonale z czego ten błąd wynika.

0:42Chodzi tutaj konkretnie o fakt że słowo

0:44kluczowe this w tym miejscu wskazuje faktycznie na nasz obiekt user.

0:48Ale już wewnątrz tej funkcji wskazuje na undefined.

0:52Dlatego w momencie gdy odwołujemy się do

0:54właściwości name undefined otrzymujemy jasny komunikat o błędzie.

0:59W poprzedniej lekcji mówiłem Ci, że z takim

1:01błędem możemy sobie poradzić korzystając na przykład z arrow function.

1:05Dzięki temu nie gubimy tutaj kontekstu.

1:07No i wszystko działa poprawnie.

1:09Dodam jeszcze że całkiem popularną praktyką szczególnie w czasach gdy nie

1:13mieliśmy jeszcze dostępu do arrow function było przypisanie this do jakiejś zmiennej np.

1:18self.

1:19Dzięki temu w danej funkcji mogliśmy się do niego odwołać.

1:22I znowu wszystko działało poprawnie.

1:25TypeScript jednak w takiej sytuacji informuje nas o błędzie mówiąc, że dodawanie aliasów

1:30do słowa kluczowego this nie jest tutaj wskazane.

1:33No i faktycznie ja się z nim zgadzam w

1:35związku z tym wracamy do rozwiązania z wykorzystaniem arrow function.

1:39Na tym etapie wszystko wydaje się być w porządku ale nie do końca tak jest w

1:44momencie gdy najedziemy na słowo kluczowe this, okazuje się że jest ono typu any.

1:49A jak wiesz typu any raczej chcemy unikać w TypeScripcie, w związku z tym musimy coś z tym zrobić.

1:54Mało tego w tej chwili TypeScript w żaden

1:56sposób nie informuje nas o tym że istnieje tutaj jakiś problem a dzieje się to z

2:01takiego powodu że w naszym pliku konfiguracyjnym wyłączyłem tryb strict.

2:06W momencie gdy go włączy i wrócę do naszego pliku.

2:09Okazuje się że nic się nie stało, ale tak naprawdę to tylko pozory.

2:13W momencie gdy najadę kursorem na słowo

2:16kluczowe this, nagle okazuje się że w tym momencie TypeScript już nie wskazuje typu

2:21any yylko rzeczywiście wskazuje na nasz obiekt.

2:24Ta sytuacja wyglądałaby inaczej w momencie gdybyśmy nie mieli tutaj arrow function.

2:28W tym momencie TypeScript informuje nas o błędzie mówiącym o tym że słowo kluczowe this

2:33posiada typ any. A wynika to z faktu że TypeScript na tym etapie nie jest w stanie

2:38samodzielnie domyślić się no właśnie jakiego typu jest this.

2:42Przywróćmy więc teraz tutaj funkcję strzałkową aby ponownie uzyskać poprawne typowanie słowa

2:47kluczowego this bo teraz chciałbym pokazać Ci coś jeszcze.

2:50Załóżmy teraz że nasz obiekt user będzie posiadał typ, który zdefiniujemy w

2:55interfejsie. Czyli musimy teraz określić typ właściwości name.

2:58I będzie to String oraz typ właściwości introduce.

3:02Tak właściwie jest to metoda która zwraca nową funkcję.

3:06Zatem na tym etapie możemy po prostu przypisać tutaj typ user.

3:10I teraz okazuje się że TypeScript

3:12ponownie poprawnie określił typ naszego słowa kluczowego this.

3:16No ale w tym momencie nie chciałbym abyś mnie źle zrozumiał typowanie słowa kluczowego this w TypeScripcie

3:22nie sprowadza się wyłącznie do przestawienia opcji w pliku konfiguracji.

3:27Są sytuacje w których

3:28TypeScript nie jest w stanie samodzielnie określić typu słowa kluczowego this.

3:32I wtedy musimy mu w tym pomóc.

3:34Zobaczmy teraz jak to wygląda na drugim przykładzie.

3:38Załóżmy teraz że w naszej aplikacji

3:40pojawia się jakiś link i chcemy zareagować na jego kliknięcie.

3:44W związku z tym tworzę funkcję która będzie blokować domyślne zachowanie tego

3:48przycisku a następnie w konsol logu wyświetlać atrybut href.

3:53Jak widzisz od razu mamy tutaj dwa błędy informujące nas o tym że zarówno argument

3:57event jak i słowo kluczowe this posiadają typ any.

4:01Musimy teraz o to samodzielnie zadbać.

4:04Jeżeli chodzi o argument event nie ma

4:06tutaj filozofii ponieważ jest to właśnie event.

4:09Teraz jednak pytanie brzmi w jaki sposób

4:11możemy zadbać o to aby this również posiadało swój typ.

4:15No i akurat możemy zająć się w taki sposób

4:18że w tym miejscu jako pierwszy parametr określamy właśnie słowo kluczowe this.

4:23Dzięki temu na tym etapie możemy określić jego typ.

4:27I tutaj mamy do dyspozycji kilka różnych

4:29opcji w tym przypadku wiemy że jest to link.

4:32Zatem mamy tutaj do dyspozycji HTMLAnchorElement.

4:35No i na tym etapie wszystko zaczyna być tutaj w porządku.

4:40TypeScript nie tylko przestał nam wyświetlać błędy ale w momencie gdy odwołujemy się do

4:44właściwości this od razu mamy podpowiedzi charakterystyczne właśnie dla elementu anchor.

4:49I w ten sposób wygląda właśnie typowanie this.

4:53Po prostu chcąc dodać do niego typ

4:55umieszczamy go jako pierwszy parametr funkcji wewnątrz którego chcemy

5:00ten typ dodać. I właśnie do tego to wszystko się sprowadza.

5:03Warto też dodać że takie typowanie nie ma

5:05żadnego wpływu na argumenty które przekazujemy do tej funkcji.

5:09Jak widzisz normalnie w tego typu funkcji.

5:11Pierwszym argumentem jest oczywiście event.

5:14Natomiast pomimo tego że umieściliśmy

5:16tutaj słowo kluczowe this dalej mamy do niego dostęp i wszystko jest w porządku.

5:20Podsumowując typowanie słowa kluczowego this mówimy tutaj o dwóch sytuacjach.

5:25Pierwszą z nich jest moment w którym TypeScript automatycznie określa jego typ na

5:29podstawie samego kontekstu i często jest to dokładnie to o co nam chodzi.

5:34A w momencie gdy sobie z tym nie radzi mamy możliwość określenia samodzielnie

5:38typu słowa kluczowego this przekazując je jako pierwszy parametr w naszej funkcji.

5:43W tym wszystkim najważniejsze jest jednak to aby słowo kluczowe this nie posiadało

5:48typu any. I przedtem akurat możemy się ochronić włączając opcję strict w pliku

5:53konfiguracji TypeScriptu lub jeżeli z jakiegoś powodu nie chcemy korzystać z tej opcji.

5:58Mamy do dyspozycji jeszcze flagę noImplicitAny

6:01którą również możemy ustawić na true. Po prostu chodzi o to że ta opcja jest

6:06uwzględniona automatycznie w tej. Razem zresztą z kilkoma innymi opcjami które

6:12również możesz włączać i wyłączać indywidualnie. Na ten moment dziękuję Ci za

6:16uwagę i słyszymy się za chwilę w kolejnej lekcji.