od Podstaw
1 godz. 54 min · Typescript · Full-stack i Programowanie
Adam GospodarczykZacznijmy od tego, że JavaScript jest dynamicznie typowany. Oznacza to, że typy zmiennych mogą się zmieniać w czasie wykonywania programu, a my nie mamy nad nimi kontroli. A po co nam ta kontrola? Między innymi po to, aby przypadkowo nie dodać typu number do string lub przekazać do funkcji nieprawidłowe danych. Ogromną zaletą jest to, że o tego typu błędach dowiadujemy się już na etapie pisania kodu a nie dopiero w trakcie jego wykonywania... na produkcji.
Prawdopodobnie znasz mechanizm intellisense, czyli inteligentnego podpowiadania kodu przez edytor. Pisząc kod w TypeScript, tworzysz definicje typów dotyczących Twojej aplikacji. W ten sposób dostęp do definicji klas i właściwości obiektów masz właściwie na wyciągnięcie myszki. Wystarczy "hover" na funkcji aby uzyskać szczegółowe informacje, które pomogą Ci w pisaniu kodu. Oprócz tego otrzymasz również automatyczne podpowiedzi w trakcie dostępu do właściwości i metod. Nic tylko pisać kod!
Nie musisz przepisywać całego projektu. TypeScript stanowi nadzbiór JavaScriptu. Zatem cały Twój projekt jest z nim w 100% kompatybilny, a Ty możesz stopniowo dodawać definicje typów. Nawet nie będziesz wiedział kiedy typy pojawią się w całej Twojej aplikacji. To daje Ci również możliwość uczenia się TypeScriptu w trakcie jego wdrażania. W tym kursie opanujesz podstawy a później... sam zobaczysz!
Ten kurs został stworzony z myślą o programistach, którzy podstawy JavaScriptu mają już za sobą i chcą poznać zalety statycznego typowania oferowanego przez TypeScript. Na początku Kursu zaczynamy również od krótkiej powtórki najważniejszych elementów samego JS.
3.8+
W tej lekcji kontynuujemy temat klas, a konkretnie poruszymy ważny temat
programowania obiektowego oraz samych klas jakim jest tzw.
enkapsulacja lub też hermetyzacja danych.
Czyli inaczej mówiąc chodzi o kontrolę dostępu do klas oraz metod.
Mamy tutaj przykład, na którym już
pracowaliśmy i jak widzisz znajduje się tutaj słowo kluczowe private.
Dzięki niemu właśnie określamy sposób dostępu do tych danych. I tutaj warto
wiedzieć, że ten dostęp możemy kontrolować na kilka sposobów.
Domyślnie zarówno właściwości, jak i metody posiadają status public, czyli inaczej
mówiąc dostęp do nich jest dowolny zarówno wewnątrz klasy, jak i na zewnątrz.
Drugą opcją jest wykorzystana tutaj przeze mnie opcja private.
Oznacza ona, że właściwość bądź metoda jest dostępna wyłącznie wewnątrz danej klasy.
I swoją drogą za chwilę pokażę Ci jak to działa w praktyce.
Tymczasem mamy jeszcze trzecią opcję: protected. I tej akurat nie omówimy w tej lekcji
ze względu na to, że jest to temat dotyczący dziedziczenia klas.
Powiem tylko, że w skrócie chodzi o to, że klasy mogą po sobie dziedziczyć i zmienna,
która ma ustawiony status protected jest dostępna wewnątrz danej klasy oraz
wewnątrz klas, które dziedziczą po tej klasie.
Wiem, że na ten moment może to być dla
Ciebie niejasne, ale jeżeli masz już pojęcie na temat programowania
obiektywnego z pewnością wiesz co mam na myśli.
Tymczasem ostatnią opcją, którą również
możemy podciągnąć pod kontrolę dostępu jest opcja readonly.
I w niej dokładnie jak nazwa wskazuje
chodzi o to, że wartość takiej właściwości nie może zostać zmodyfikowana.
Tymczasem do naszej dyspozycji jest jeszcze opcja static.
I w niej akurat chodzi o to, że właściwość bądź metoda danej klasy jest dostępna bez
konieczności tworzenia instancji tej klasy,
czyli możemy odwołać się do nich bezpośrednio na klasie.
Jakkolwiek to teraz brzmi obiecuję, że za chwilę stanie się to jasne.
No bo zobaczmy sobie na pierwszy przykład.
Domyślnie zarówno metody, jak i właściwości które dodajemy do klasy są ustawiane jako
publiczne i nawet mogę pokazać to na przykładzie.
Dodajmy nową właściwość do naszej klasy,
czyli będzie to gatunek typu string, którego wartość ustawię z pomocą
konstruktora. Na tym etapie TypeScript od razu przypomina mi, że muszę tutaj
ustawić również drugi argument, więc zrobię to zgodnie z jego zaleceniem.
Teraz, skoro właściwość którą mamy tutaj jest publiczna, mogę uzyskać do niej dostęp
odwołując się do niej w następujący sposób.
Bo zobacz: nieco wyżej mamy tutaj obiekt zawierający te dwie właściwości, więc mogę
teraz po prostu po kropce odwołać się do tej właściwości.
No i oczywiście otrzymaliśmy wartość tej
właściwości pomimo tego, że znajdujemy się poza klasą movie.
Sytuacja jednak zmienia się w momencie
gdybyśmy chcieli w ten sam sposób odczytać drugą właściwość tego obiektu, czyli title.
Zwróć uwagę, że TypeScript
informuje nas o tym, że nie możemy odczytywać prywatnych właściwości klas,
natomiast ostatecznie i tak skrypt został wykonany.
Wynika to z faktu, że prywatne właściwości klas faktycznie nie istnieją w samym
JavaScripcie, ale co ciekawe już wkrótce ma się to zmienić.
Mianowicie w dniu nagrywania tego filmu na trzecim etapie procesu TC 39 znajduje się
proposal dotyczący właśnie między innymi prywatnych właściwości klas.
Tutaj akurat, z tego co widziałem, zapis będzie nieco inny.
Zwróć uwagę, że aktualnie wykorzystujemy tutaj #.
To, kiedy taka opcja będzie dostępna w samym JS trudno jeszcze przewidzieć,
natomiast całkiem możliwe, że w momencie gdy będziesz oglądał ten film
opcja ta będzie już dostępna. W każdym razie
korzystając z TypeScriptu do tej opcji masz dostęp już teraz.
Oczywiście pamiętaj o tym, że to
sprawdzanie jest dostępne na poziomie pisania kodu i w momencie gdy uruchamiamy
ten skrypt on po prostu działa, i dane te są dostępne poza naszą klasą.
Mało tego dostępność ta dotyczy nie tylko odczytywania, ale również modyfikowania
wartości. Przywrócę tutaj opcje public a następnie zmodyfikuje wartość tej
właściwości. Zwróć uwagę, że faktycznie zmiany te zostały zastosowane.
Jeżeli teraz z jakiegoś powodu chciałbym
zablokować zmiany tej właściwości, mógłbym tutaj ustawić ponownie opcję na private
i dzięki temu na zewnątrz tej klasy nie mam
już dostępu do tej właściwości. Ale nadal nic nie stoi na przeszkodzie, abym
zmodyfikował wartość tej właściwości wewnątrz klasy. Czyli teraz jeżeli wywołam
metodę getTitle to otrzymamy zmieniony tytuł.
W przypadku gdyby interesowało mnie zablokowanie modyfikowania tej właściwości
również wewnątrz klasy mógłbym tutaj po prostu dodać słowo kluczowe readonly.
Dzięki temu TypeScript już teraz informuje mnie o tym, że nie mogę zmienić
tej właściwości. W tym wszystkim istotne jest tylko tutaj to, abyś pamiętał o kolejności,
czyli w momencie gdy interesuje Cię dodanie opcji readonly,
dodaj ją dopiero po słowie kluczowym private, protected lub static.
No i właśnie skoro jesteśmy już przy static to dodajmy sobie kolejną właściwość
naszego obiektu, którą właśnie poprzedzimy słowem kluczowym static.
Tak przygotowana właściwość jest dostępna
poza tą klasą, bez konieczności tworzenia nowej instancji.
Zobaczmy co to oznacza w praktyce, tylko usunę tę linię oraz ten cały obiekt.
Teraz wystarczy, że po prostu odwołają się
do naszej klasy a następnie do tej właściwości.
Jak widzisz jej wartość została odczytana
poprawnie i jest to w niektórych przypadkach niesamowicie przydatne.
Odczytanie takiej wartości bez słowa kluczowego static nie jest tutaj możliwe.
Swoją drogą warto dodać, że to słowo kluczowe możemy wykorzystywać zarówno
w przypadku właściwości oraz metod.
Chyba zgodzisz się ze mną, że kontrola dostępu do
właściwości oraz metod klasy jest niesamowicie prosta. Wystarczy tylko
zapamiętać te słowa kluczowe oraz ich znaczenie.
No i warto też pamiętać o tym, aby w ogóle je dodawać.
W tej lekcji to już wszystko co miałem do powiedzenia i zapraszam Cię do kolejnej.
Opcje dostępu · 2 min
// public - anyone can access
// private - available only inside a class
// protected - available inside a class and subclasses
// readonly - property can't be modified
// static - is available directly from class (without instantiation)Movie class · 2 min
class Movie {
genre: string
constructor(private readonly title: string, genre: string) {
this.genre = genre
}
getTitle(): string {
return this.title
}
}Obiekt movie · 3 min
const bestMovieEver = new Movie("Peaceful Warrior", "Drama")
bestMovieEver /*?*/
bestMovieEver.genre /*?*/
bestMovieEver.getTitle() /*?*/
bestMovieEver.getTitle() /*?*/Static properties · 5 min
Movie.type /*?*/