TypeScript: Instanceof

3.9+

0:00W tym filmie kontynuujemy temat type guard a konkretnie przedstawię

0:04ci operator instanceof zanim jednak to zrobimy chciałbym jeszcze krótko

0:08nawiązać do przykładu z poprzedniej lekcji w którym wykorzystaliśmy operator

0:12in aby obsłużyć poszczególne typy okazuje się że w

0:16tym miejscu mamy do dyspozycji pewną alternatywę o której mówiliśmy sobie

0:20w kursie podstawowym konkretnie dotyczy to operatora as który

0:25wykorzystujemy w momencie gdy wiemy o typie więcej niż typescript w

0:29takiej konfiguracji jak teraz to oczywiście nie działa ponieważ musimy zastosować

0:33to nieco inaczej w tym konkretnym przypadku asercji

0:37użyjemy w taki sposób że nasz przekazany argument niejako

0:41potraktujemy jako typ song a następnie sprawdzimy czy wewnątrz

0:46niego znajduje się właściwość title jeżeli tak to w tym miejscu

0:50jesteśmy ją w stanie nawet zwrócić jeżeli tak to w tym miejscu nawet

0:54możemy ją zwrócić problem polega na tym że jeżeli zrobimy teraz

0:58tak pomimo tego że teoretycznie sprawdziliśmy tutaj typ no

1:02to niestety ten mechanizm type guard ponieważ typescript nadal w tym miejscu

1:07nie ma zielonego pojęcia na jakim typie danych pracujemy oczywiście

1:11możemy to naprawić poprzez ponowne wykorzystanie mechanizmu asercji po

1:16prostu podobnie jak wyżej w nawiasie zapisuję media as song

1:20no i teraz w momencie gdy uruchomię ten skrypt wszystko będzie tutaj w

1:24porządku nie zmienia to jednak faktu że w tym momencie trochę skomplikowałem

1:29sobie życie zdecydowanie lepiej było tutaj zwrócić po prostu

1:33właściwość title ale w zamian wykorzystamy tutaj operator instanceof

1:37jak widzisz zdecydowanie wygląda to teraz lepiej i

1:41mało tego jestem w stanie tutaj zwrócić bezpośrednio właściwość name

1:46typescript automatycznie będzie wiedział że jeżeli nawet zrobimy tymczasowo z tego obiektu

1:50playlistę no to otrzymamy właściwy tytuł no to

1:54otrzymamy właściwy tytuł i dowodem na to jest fakt że w tym miejscu

1:59typescript wie że mamy do czynienia z play listą a w tym miejscu że

2:03z utworem mam nadzieję że to jest dla ciebie akurat jasne ale

2:07pozwól że wyjaśnię teraz krótko na czym polega w ogóle działanie operat

2:11instanceof na tym etapie prawdopodobnie doskonale wiesz

2:16że javascript wykorzystuje dziedziczenie oparte o prototypy oznacza

2:20to że jeżeli w javascripcie wykorzystujemy klasy to tak naprawdę nie

2:24mamy tutaj do czynienia z taką klasą którą znamy z innych języków programowania

2:29natomiast jest to po prostu ułatwiający nam programowanie

2:33syntactic sugar dla takiego zapisu pod maską dzieje

2:37się dokładnie coś takiego jest tworzona w funkcjach do której przekazujemy

2:41jakiś argument a następnie ten argument przypisujemy do obiektu this

2:45następnie sama metoda play przypisywana jest po prostu

2:49do prototypu tego obiektu dodam tylko że w tej chwili po prostu zignoruj

2:53błędy które tutaj mamy ten zapis jest jak najbardziej poprawnym

2:57kodem javascript chciałem ci tylko krótko przypomnieć o fakcie w jaki

3:01sposób działają klasy w javascripcie teraz bardziej istotne jest

3:05to że jeżeli na podstawie tak utworzonej klasy utworzymy nowy obiekt

3:09i tutaj przekazuję tytuł no to mam kilka sposobów na to aby sprawdzić

3:14czy ten obiekt jest utworzony na podstawie tej klasy inaczej

3:19mówiąc obiekt który tworzymy na podstawie jakiejś klasy określamy jej

3:23instancją czyli wystąpieniem mógłbym mieć

3:27tutaj wiele takich obiektów i po prostu umówilibyśmy o wielu instancjach

3:31tej samej klasy dlatego też operator instanceof jak sama nazwa

3:35wskazuje sprawdza czy przekazany obiekt jest

3:39instancją określonej klasy dlatego jeżeli ten operator wykorzystamy

3:44w połączeniu z naszym obiektem oraz klasą otrzymamy wartość true

3:48no bo faktycznie obiekt media powstał na podstawie klasy movie

3:52tak się składa że oprócz tego musisz wiedzieć jeszcze kilka małych rzeczy

3:56w związku z tym że media jest tak naprawdę obiektem a

4:01w javascripcie wykorzystujemy dziedziczenie oparte o prototypy no to

4:05nasz obiekt media również jest instancją klasy object jest to

4:09coś czego powinieneś być świadomy ze względu na to że mielibyśmy tutaj

4:13obiekty różnych klas no to przyrównując je do klasy object

4:17z za każdym razem będziemy mieć tutaj true mówiąc jeszcze

4:21o porównywaniu obiektu do jego klasy jesteśmy w stanie również porównać

4:25prototypy tego obiektu no bo ponownie pomimo tego że tutaj

4:29mamy do czynienia z klasą tak jak ci pokazałem przed chwilą nadal dla

4:33tej klasy tworzony jest prototyp więc jeżeli teraz z pomocą metody

4:38getPrototypeOf pobierzemy prototyp obiektu media

4:42jesteśmy w stanie go ściśle porównać do prototypu klasy movie i

4:46tutaj jeżeli wszystko się zgadza otrzymamy true zatem

4:51po raz kolejny otrzymaliśmy tutaj potwierdzenie że obiekt media tworzony

4:55jest na podstawie klasy movie i ostatecznie już do

4:59dyspozycji mamy jeszcze jedną rzecz którą możemy sprawdzić mianowicie

5:03możemy porównać konstruktor tutaj ponownie odwołam się do

5:07faktu że klasa tak naprawdę jest funkcją a konkretnie specjalnym

5:11rodzajem funkcji czyli funkcją konstruktorem na podstawie której możemy

5:15tworzyć nowe obiekty taki konstruktor posiada również obiekt który

5:19tworzymy na podstawie tej klasy więc jeżeli porównamy te funkcje również

5:24otrzymujemy true i tym samym po raz kolejny mamy potwierdzenie

5:29że mamy tutaj do czynienia z instancją wskazanej klasy pamiętaj

5:33jednak że jako type guard możemy wykorzystywać operator instanceof

5:37wtedy typescript jest w stanie samodzielnie domyśli się z jakiego

5:41typu danymi mamy do czynienia domyślam się że to co właśnie powiedziałem

5:46może stanowić dla ciebie masę informacji ale możesz po prostu zapamiętać

5:50fakt że aby sprawdzić czy obiekt jest instalacją danej klasy czyli

5:54czy został na jej podstawie utworzony możesz wykorzystać operator

5:58instanceof i taki operator idealnie sprawdza się jako

6:02type guard dzięki niemu jesteś w stanie obsłużyć różne

6:06rodzaje danych wewnątrz tej samej funkcji temat type guard jest

6:10tematem którymu powinieneś poświęcić więcej uwagi ze względu na to

6:15że jest on nieodłącznym elementem typescriptu na ten moment z mojej

6:19strony to już wszystko i zapraszam cię do kolejnej lekcji