Techniki Zaawansowane
2 godz. 35 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.
TypeScript umożliwia stosunkowo prostą migrację istniejących projektów JavaScript. W kursie na przykładzie zostały omówione trzy strategie, dzięki którym jesteśmy w stanie dodać statyczne typowanie do istniejącego kodu. W procesie migracji najważniejsze jest to, że przepisywanie kodu jesteśmy w stanie uzależnić również od poziomu naszej wiedzy na temat TypeScriptu i stopniowo dodawać kolejne elementy.
Na pierwszy rzut oka można uznać, że TypeScript tylko dodaje nam pracy, wymuszając dodatkową konfigurację oraz opisywanie typów. Mało tego zwiększa barierę wejścia w projekt dla mniej doświadczonych programistów. Trudno temu zaprzeczyć ALE - korzyści płynące ze statycznego typowania które wpływają na zmniejszenie liczby błędów oraz wykrywanie ich nawet na poziomie pisania kodu, oszczędzają czas który normalnie poświęcilibyśmy na późniejsze debugowanie aplikacji. Poza tym zwiększenie stabilności aplikacji daje szerokie korzyści biznesowe, które wielokrotnie wynagradzają nam czas wymagany na pisanie dodatkowej składni.
JavaScript jest językiem dynamicznie typowanym. W trakcie wykonywania programu, zmienne mogą zmieniać swój typ a my nie zawsze mamy nad tym świadomą kontrolę. Tylko ... po co nam ta kontrola? Główną zaletą statycznego typowania jest to aby uniknąć sytuacji w których przypadkowo przypisujemy tekst do zmiennej która powinna zawierać liczbę lub sytuacji w której przekazujemy do funkcji nieprawidłowe dane. Taki rodzaj pomyłek generuje błędy odniesienia (eng. ReferenceError), które zatrzymują działanie skryptu i są momentami bardzo uciążliwe do wykrycia. Dzięki statycznemu typowaniu, jesteśmy w stanie wykrywać je na etapie pisania kodu.
TypeScript na przestrzeni ostatnich lat zyskuje ogromną popularność w społeczności programistów JavaScript i coraz częściej jest nieodłącznym elementem ofert o pracę. W przypadku firm nastawionych na rozwój rozbudowanych aplikacji JavaScript już teraz jest w zasadzie standardem. Biorąc pod uwagę fakt, że najnowsze frameworki (np. Nest.js) wykorzystują TypeScript domyślnie, nauka tej technologii ma ogromny sens w kontekście rozwoju jako programista. I ostatnim argumentem za tym aby wziąć TypeScript na poważnie jest to, że stoi za nim firma Microsoft a on sam rozwijany jest już niemal 10 lat.
Ten kurs został stworzony z myślą o programistach, którzy podstawy TypeScriptu mają już za sobą i chcą poznać jego zaawansowane techniki. Aby w pełni wykorzystać wiedzę z tego kursu, niezbędna jest również zaawansowana znajomość JavaScriptu a w szczególności jego elementów prowadzonych w wersji ES6+. Zdecydowanie polecamy przerobienie kursu Podstawowego TypeScript, który znajdziesz na eduweb, przed korzystaniem z tego materiału.
3.9+
W tej lekcji pokażę ci kolejne ciekawe
zagadnienie typu skryptu jakim są Queer as.
W skrócie chodzi o to że informacje o typach możemy przekazywać do sklepu i
dodatkowo możemy też liczyć na to że w niektórych sytuacjach będzie świetnie.
Domyślam się o jakie typy nam chodzi.
Natomiast bardzo często potrzebujemy
informacji na temat istniejącego typu aby np.
wykorzystać te informację w innym miejscu.
Zacznijmy tutaj od operatora Tip of który
z pewnością znasz już z samego drzewa skryptu.
I dodam tylko że obecnie znajdujemy się w pliku Java Script a nie tip top.
W odróżnieniu do poprzednich wersji w
każdym razie operator w momencie gdy podamy do niego jakąś
informację zwróci nam informacje o typie tej danej tutaj przekazaliśmy pusty dźwięk
więc otrzymujemy typ String i jest to jak najbardziej zrozumiałe.
Analogicznie też w sytuacji gdy będziemy mieć tutaj np.
obiekt i przekażemy go do operatora off.
No to naturalnie otrzymujemy informację że mamy do czynienia z obiektem.
Dlaczego ci o tym teraz mówię.
Ano dlatego że w sklepie operator w play off w niektórych sytuacjach zachowuje się
nieco inaczej i na czym te różnice polegają.
Opowiem ci już za chwilę przejdźmy tylko
do pliku ZIP ponownie definiujemy tutaj nowy obiekt który będzie posiadał dwie
właściwości z czego pierwsza z nich będzie stypendium a druga liczba.
Na tym etapie skrypt poprawnie już
określił typy tych danych więc nie musimy się tym przejmować.
Ale jeżeli teraz tworzymy nowy alias typu
o nazwie Józef Tip i wykorzystamy operator off przekazując do niego nasz stworzony
obiekt to w JavaScript spodziewaliśmy się obiektu.
Natomiast typ zinterpretował to na nieco inny sposób.
Zwróćcie uwagę że mamy tutaj litera Tip który zawiera dokładnie takie
właściwości jakie kręciliśmy w naszym obiekcie.
I mało tego mamy tutaj poprawne informacje o typach.
Dlatego też jeżeli teraz zdefiniować byśmy tutaj nowy obiekt i pisali do niego nasz
Józef Tip no to od razu mamy tutaj pomoc ze strony skryptu który informuje nas o
tym że ten obiekt musi posiadać dwie właściwości.
To co tutaj widzisz jasno obrazuje różnicę
pomiędzy tym jak działa operator Off w Java a jak działa on w przypadku skryptu
i do tego operatora będziemy jeszcze wracać przy okazji lekcji o tym gadac.
Natomiast na ten moment musisz zapamiętać tyle że jeżeli w tym osobiście korzystamy
z iPada to date of otrzymujemy informację o typie przekazanych danych i ten typ
niekoniecznie musi wskazywać na typy które znamy z Java skryptu.
Natomiast możemy wykorzystywać go również z typami zdefiniowanych w projekcie.
Mam nadzieję że jest to dla ciebie jasne
aczkolwiek tak jak powiedziałem do tego będziemy jeszcze wracać.
W każdym razie poza operatorem type of mamy jeszcze drugi operator o nazwie ki o.
Aby zobaczyć do czego on tak naprawdę
służy definiujemy tutaj interfejs który w zasadzie będzie opisywał nasz obiekt.
W każdym razie wyobraźmy sobie sytuację w
której chciałbym utworzyć nowy typ na podstawie typu tej konkretnej właściwości.
W tej chwili jakoś szczególnie nie mogę
odwołać się do tej właściwości dlatego jeżeli tworzy typ to mógłbym teoretycznie
odwołać się do właściwości Józef nam obiektu Józef a następnie pobrać jej typ
operatorem type of no i to jak najbardziej by funkcjonowało.
Niestety tej samej operacji nie mogę już powtórzyć w przypadku naszego interfejsu.
Mamy tutaj informacja o tym że odwołujemy
się do typu A wykorzystujemy go tak jakby był wartością.
Dlatego też w tym miejscu z pomocą
przychodzi nam operator off i zwróć uwagę że w tym momencie nasz nowy
alias typu został ustawiony jako junior Tip składający się z dwóch
liter Tip czyli albo mamy tutaj nazwę user name albo PIN number.
I chyba nie do końca nam o to chodziło.
Aczkolwiek to również za chwilę będziemy wykorzystywać w każdym razie nas
interesuje to aby pobrać typy tych poszczególnych właściwości.
Dlatego też utworzy nowy typ danych które
nazwę Józef Gibbs a następnie odwołał się do naszego interfejsu przekazując w
nawiasie kwadratowym just kids czyli nazwy naszych właściwości.
Jak myślisz co się teraz stanie do naszego
najnowszego aliansu zostały przypisane dwa typy String oraz number.
Wynika to z faktu że mamy tutaj dwie
właściwości właśnie takiego typu i swoją drogą jeżeli tutaj przekazaliśmy Junior
Tip składający się z Józef name lub PIN Amber no to nic nie stoi na przeszkodzie
aby odczytać również typ pojedynczej właściwości.
Wystarczy zdefiniować nowy alias typu I tutaj weźmiemy np.
Józef name pipe a następnie odwołano się do interfejsu
przekazując już nazwę właściwości jako string.
No i to co teraz otrzymaliśmy to do naszego aliansu Józef nam został
przypisany typ String czyli dokładnie to o co chodziło nam na początku
takie pobieranie informacji o typach przekazanych obiektów czy np.
zdefiniowanych już typów określamy mianem typu QWERTY.
Jeżeli zastanawiasz się nad przykładem wykorzystania operatorów typu Włodarski
off tak jak powiedziałem z jednej strony o tym jeszcze będziemy rozmawiać.
Natomiast weźmy chociażby procesy jak James zamiast tworzyć nowy interfejs
opisujący poszczególne procesy moglibyśmy przekazać obiekt do operatora off.
Dzięki temu szybko otrzymamy.
O typach przekazanych psów natomiast
jeżeli z jakiegoś powodu nasze oczekiwania byłyby nieco wyższe pokażę ci nieco
bardziej zaawansowany przykład wykorzystujący praktycznie całą wiedzę
tutaj nauczyliśmy się do tej pory oraz oczywiście typy genetyczne.
Chodzi konkretnie o funkcję która będzie pobierać informacje o typie konkretnej
właściwości przekazanego obiektu czyli konkretnie ta funkcja będzie przyjmować
obiekt oraz nazwę właściwości czy też klucz.
To właśnie typ tej właściwości będziemy tutaj zwracać.
Dlatego interesuje nas odwołanie do
naszego obiektu a następnie przekazanie klucza.
Teraz gdy będziemy wykonywać tę funkcję i przekażemy do niej nasz obiekt w tym
przypadku jest to user oraz jedną z jego właściwości.
Dobrze by było gdybyśmy tutaj otrzymali typ tej właściwości.
W tej chwili oczywiście
nikt nie posiada informacji o tych typach więc nie jest w stanie tutaj zbyt wiele
zrobić ale wykorzystując typy genetyczne Dodajmy tutaj literę T a tutaj literacka
i teraz aby to wszystko działało musimy te typy określić jeszcze w tym miejscu.
Ostatecznie nadal mamy tutaj błąd informujący nas o tym że typ K czyli nasz
klucz nie może być wykorzystany jako indeks typu T.
My oczywiście wiemy że jest to możliwe ale typ Script nie ma wystarczającej
informacji o tym czy faktycznie typ K zawiera się w typie naszego obiektu.
Dlatego wykorzystamy tutaj słowo kluczowe
Extended i być może pamiętasz z lekcji o ograniczeniach genetycznych.
Słowo kluczowe Extended umożliwia nam ograniczenie typu genetycznego K do
wskazanych przez nas typów więc teoretycznie moglibyśmy tutaj wpisać np.
string. Nas jednak to nie satysfakcjonuje ponieważ
interesują nas wyłącznie typy właściwości znajdujące się w przekazanym obiekcie.
Dlatego jeżeli skorzystamy tutaj z
operatora off a następnie przekażemy typ naszego obiektu.
Nagle zaczyna się dziać tutaj magia.
Okazuje się że w tym miejscu faktycznie otrzymaliśmy poprawny typ.
Jeżeli teraz zmienię tutaj nazwę
właściwości na pin Number otrzymamy tutaj number.
Tak że wszystko tutaj działa.
Pytanie tylko dlaczego tak się dzieje.
Odpowiedź na to pytanie jest stosunkowo
prosta bo wystarczy że powtórzymy sobie co tutaj właściwie się dzieje.
Do naszej funkcji przekazujemy obiekt oraz nazwę właściwości.
Typy zarówno przekazanego obiektu jak i
klucza ustawiamy jako genetyczne także na ten moment.
Skrypt jest w stanie samodzielnie określić
typ zarówno pierwszego jak i drugiego argumentu natomiast nas ostatecznie
interesuje odczytanie wskazanej właściwości obiektu.
Aby to poprawnie działało nikt nie tylko musi posiadać informacje o typie tej danej
bo to już właściwie ma ale również upewnić się że przekazana
tutaj wartość jest nazwą właściwości przekazanego obiektu.
I wiesz informacje o tym jakie mamy
właściwości w obiekcie możemy uzyskać korzystając z operatora off.
Zrobiliśmy to dokładnie w tym miejscu.
Mamy tutaj user nam obraz PIN Number
także aby upewnić się że przekazane tutaj klucz jest częścią przekazanego obiektu.
Wykorzystujemy słowo kluczowe Extended.
Dzięki temu mamy pewność że pod literą K znajdzie się Sterling Federal Tip który
wskazuje na jedną lub drugą właściwość obiektu.
Dlatego w momencie gdy przechodzimy do odczytywania otrzymujemy faktyczny wynik.
No i tutaj jak widzisz otrzymujemy wartość o którą nam chodziło.
Ale w związku z tym co powiedziałem na początku tego filmu Tax Credit jest w
stanie samodzielnie określić typ tych danych.
Dlatego mamy tutaj Typ NUMBER.
Ten cały mechanizm wykorzystujący ograniczenia genetyczne słowo kluczowe ki
OFF oraz type of jak sam zresztą widzisz daje ogromne możliwości.
Zrozumienie tego jak to dokładniej działa
jest naprawdę kluczowe do tego aby sprawnie posługiwać się sklepem.
Natomiast na tym etapie najważniejsze jest
tylko to żebyś wiedział jak działają składowe czyli że operator
pozwala nam wyciągać informacje o typie przekazanych danych.
Dzięki temu możemy na tej podstawie utworzyć nowy typ.
Następnie operator kinowy pozwala nam wyciągnąć klucze np.
interfejsów oraz ostatecznie typy genetyczne oraz ograniczenia genetyczne
pozwalają nam pisać elastyczne i nieużywany KOD.
Na ten moment jeżeli chodzi o gwary i to będzie wszystko.
A mi pozostaje zaprosić cię do kolejnej lekcji.
typeof keyword · 1 min
typeof '' /*?*/
const user = {
name: 'Adam'
}
typeof user /*?*/userType · 2 min
const user = {
username: 'Adam',
pin_number: 1234
}
type userType = typeof user; // object
const obj: userType = {}UserInterface · 5 min
// keyof
interface User {
username: string;
pin_number: number;
}
type userKeys = keyof User;
type userTypes = User[userKeys];
type userName = User['username'];propertyType · 7 min
function propertyType<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
const personName = propertyType(user, 'pin_number'); /*?*/