TypeScript: Klasy

3.8+

0:00Przechodzimy teraz do kolejnego tematu jakim są klasy.

0:03One same są już dostępne w JavaScripcie i jak zapewne wiesz pełnią rolę tzw.

0:08Syntactic Sugar dla składni konstruktorów oraz prototypów.

0:12To co jest jednak istotne to fakt, że

0:15TypeScript dodaje do nich kilka użytecznych rzeczy,

0:17na które w samym JavaScripcie będziemy musieli

0:19jeszcze poczekać. Ale zanim Ci to wszystko pokaże zacznijmy sobie od małej powtórki.

0:25Zacznijmy od tego że po zdefiniowaniu

0:27funkcji w JavaScripcie możemy ją po prostu wywołać.

0:29W tym konkretnym przypadku niczego wprost

0:32nie zwracamy z tej funkcji, zatem otrzymujemy wartość udefined.

0:36Natomiast do naszej dyspozycji jest

0:38również słowo kluczowe new, które umożliwia wywołanie tej funkcji jako konstruktora.

0:43Wtedy otrzymujemy tutaj jak widzisz nową instancję obiektu movie.

0:47Teraz nic nie stoi na przeszkodzie abyśmy

0:49do tego konstruktora przekazali jakąś wartość.

0:52Może to być np. tytuł filmu.

0:54Następnie możemy przypisać tę wartość jako właściwość tego obiektu.

0:58Teraz taką właściwość oczywiście możemy

1:00odczytywać. I w tym celu przypiszę wywołanie naszego konstruktora do zmiennej

1:05a następnie zobaczmy co mamy wewnątrz tego obiektu.

1:08Oczywiście do samego konstruktora musimy

1:11przekazać tytuł. Faktycznie w naszym obiekcie pojawiła się właściwość title.

1:16Myślę, że nie ma tutaj żadnego zaskoczenia.

1:18Teraz aby ją odczytać moglibyśmy to zrobić

1:21bezpośrednio, ale zrobimy to z pomocą innej właściwości a konkretnie metody, która

1:26będzie zwracać tytuł. Jeżeli ją teraz wywołamy to otrzymamy tytuł filmu.

1:31Problem jednak polega na tym, że metody zapisane w ten sposób są dołączone

1:36bezpośrednio do każdej instancji utworzonego obiektu.

1:40Nie muszę chyba podkreślać, że z punktu

1:42widzenia wydajności ma to ogromne znaczenie.

1:44Może nie w tym przypadku, ale chyba wiesz co mam na myśli.

1:47W każdym razie zdecydowanie lepszym rozwiązaniem jest tutaj wykorzystanie tzw.

1:51prototypu. Czyli jeżeli teraz odwołam

1:54się do naszego konstruktora to mamy tutaj dostęp do właściwości prototype.

1:58Jest to obiekt, do którego możemy przypisywać inne właściwości np.

2:03tą naszą metodę.

2:04Dzięki temu zwróć uwagę, że w naszym

2:06obiekcie znajduje się już tylko właściwość title.

2:08I jest to oczywiście prawda,

2:10natomiast metoda getTitle nadal jest

2:13dla nas dostępna, ponieważ znajduje się w prototypie tego obiektu.

2:17Bez wątpienia składnia, którą tutaj widzisz

2:19jest dość skomplikowana a przecież przykład jest stosunkowo prosty.

2:23Dlatego do naszej dyspozycji mamy teraz

2:25klasy, które zasadniczo robią dokładnie to samo, ale w zdecydowanie prostszy sposób.

2:30Zobaczmy jak ten przykład wygląda w momencie, gdy wykorzystamy tutaj klasy.

2:35Z pomocą nowej składni klasy tworzymy wykorzystując słowo kluczowe class.

2:39Następnie, jak widzisz, nie mamy tutaj na was do których możemy przekazać dane,

2:44ale możemy to zrobić bezpośrednio w konstruktorze.

2:47Konstruktor jest metodą, która jest

2:49uruchamiana w momencie gdy tworzymy instancje tej klasy.

2:52W związku z tym to do niej trafi tytuł

2:54naszego filmu, który musimy do tej klasy jakoś przypisać.

2:58I aby to zrobić musimy dodać właściwość do naszej klasy.

3:02Teraz wystarczy, że przypiszemy przekazaną wartość do naszej właściwości

3:06i osiągniemy w ten sposób taki sam efekt jak mieliśmy przed chwilą.

3:10Teraz aby skorzystać z tej klasy wystarczy,

3:12że utworzy jej nową instancje i robię to dokładnie tak jak robiłem przed chwilą.

3:17Do konstruktora przekazuję oczywiście tytuł naszego filmu.

3:20No i efekt końcowy jest taki sam.

3:22Teraz jeżeli chciałbym dodać kolejną

3:25metodę, czyli getTitle to wystarczy, że zrobię to w taki sposób.

3:29Ta metoda zwraca tytuł filmu, więc oczywiście mamy tutaj string, więc

3:33dodatkowo sygnalizuję, że takich właśnie danych się spodziewamy.

3:37No i teraz, podobnie jak ostatnio, po prostu wywołuje tą metodę na naszym obiekcie.

3:41Zwróć uwagę, że w przeciwieństwie do ostatniego razu pomimo tego, że

3:45zdefiniowałem tę metodę wewnątrz naszej klasy, nie została ona dołączona

3:49bezpośrednio do instancji tego obiektu, tylko trafiła do jego prototypu.

3:54Wynika to po prostu z tego jak działa nowa składnia class.

3:58Swoją drogą możemy to teraz nawet podejrzeć, kompilując ten plik do JavaScriptu.

4:04Zobacz, że mamy tutaj niemal dokładnie taką

4:06samą składnię jak w poprzednim przykładzie.

4:09Metoda getTitle została automatycznie dołączona do prototypu klasy movie.

4:14Nie ma jednak wątpliwości, że ta składnia jest zdecydowanie bardziej czytelna i poza

4:19tym jest to również spójna z tym jak to wygląda w innych językach programowania.

4:23Ostatnią rzeczą, którą chciałbym tutaj poruszyć jest fakt, że w przypadku

4:27konstruktora możemy wykorzystać pewien skrót.

4:30Mianowicie zwróć uwagę, że tutaj, tutaj

4:33oraz tutaj bardzo powtarzamy kod tylko po to, aby ustawić jedną właściwość.

4:39W przypadku TypeScriptu możemy zastosować taki oto skrót, czyli usuwamy tutaj

4:44przypisanie tej właściwości oraz usuwamy samą właściwość.

4:48W tej chwili mam tutaj informację o tym, że ta właściwość nie istnieje, ale wystarczy

4:52że ustawę tę zmienną prywatną i wszystko będzie OK.

4:56O tym co oznacza słowo kluczowe private opowiem Ci już w kolejnej lekcji.

5:01Do usłyszenia za chwilę.