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 poprzednim kursie dotyczącym podstaw co prawda omawialiśmy typowanie obiektów
natomiast tym razem chciałbym ci opowiedzieć o tym nieco szerzej w
kontekście również tego co nauczyliśmy się w tym kursie.
Jest to temat wyjątkowo ważny ponieważ jak
doskonale wiesz obiekty odgrywają ogromną rolę w krypcie.
Mało tego w samym krypcie można powiedzieć że mamy trzy typy obiektów.
Pierwszy z nich jest doskonale znany i
jest to po prostu typ obiekt który pochodzi bezpośrednio z JavaScript.
Jak widzisz tutaj od razu mamy informację
o tym abyśmy tego typu Peskovicia nie używali.
W zamian możemy wykorzystać obiekt litery
L który w zasadzie oferuje dokładnie to samo co typ obiekt.
Natomiast jego wykorzystanie w takiej formie jak widzisz jest już dozwolone.
Ostatecznie jednak papieskiej wprowadził dodatkowy typ obiektu pisany małą literą.
I to jest właśnie rekomendowany sposób wykorzystania typu obiektu.
Pytanie Na czym polega różnica pomiędzy jednym a drugim i trzecim.
Tak jak już powiedziałem różnicy pomiędzy tym zapisem a tym w zasadzie nie ma.
Musisz jednak wiedzieć tyle że do tak
zdefiniowanego obiektu możemy przypisać dowolne prymitywne typ.
Zatem możemy tutaj przypisać liczbę String
bądź wartość logiczną natomiast nie możemy już przypisać wartości and fine oraz
sam fakt że do tak zdefiniowanego obiektu możemy przypisywać wartości prymitywne
takie jak liczby tekst lub wartości logiczne.
Wynika z faktu że są one opracowywane
obiektem który daje nam dostęp do wbudowanej właściwości.
Na przykład Jeżeli definiujemy tutaj String no to uzyskamy bez problemu dostęp
do wszystkich metod które możemy na tym ciągu znaków wykonać a w końcu te metody
są częścią jakiegoś obiektu czyli konkretnie obiektu
za pomocą którego została opracowana wartość prymitywna 1 2 3 4.
Jeżeli teraz chcielibyśmy zrobić to samo z
tym obiektem no to zwrócić uwagę że wyglądałoby to trochę inaczej.
Zauważ że mamy tutaj za każdym razem błąd
ponieważ tak informuje nas o tym że do naszego obiektu możemy przypisać wyłącznie
typy które nie są prymitywne a takimi typami jak już wiesz są np.
tablice bądź oczywiście obiekty.
I przy okazji trzecim prymitywnym typem w krypcie są wydarzenia regularne.
Ostatecznie alternatywą dla takiego zapisu czyli wykorzystania typu Object pisanego
małą literą jest odwołanie do konstruktora obiekt i metody Create.
Tutaj możemy przypisać zarówno obiekt ale
uwaga możemy tutaj przypisać również wartość Noll i jest to w pełni zgodne ze
specyfikacją ale już wszystkie pozostałe wartości np.
and file zostaną potraktowane jako błąd i
to samo tyczy się liczb podczas ciągów znaków.
Oczywiście w wielu przypadkach bardziej
preferowanym metodą tworzenia obiektów jest wykorzystanie właśnie takiego zapisu.
Jeżeli w tym momencie wydaje ci się że to już wszystko jesteś niestety w błędzie.
Jeżeli chcemy być baza lekcyjne możemy
również zadeklarować obiekt w następujący sposób.
Konkretnie definiuje tutaj nową zmienną której typ definiuje jako obiekt.
Następnie bardzo konkretnie określa że kluczem tego obiektu może być wyłącznie
ciąg znaków oraz wartością ale również ciąg znaków.
W takiej sytuacji do tej zmiennej możemy
przypisać wyłącznie obiekt pasujący do ściśle określonej strukturę.
Jeżeli tutaj piszę nawet tablicę czyli
nasz nie prymitywny typ otrzymamy jasny błąd i swoją drogą jeżeli
zastanawiacie się dlaczego teraz mieliśmy błąd wynikał on wyłącznie z faktu że
element informuje mnie o tym żeby użył tutaj słowa kluczowego.
Ponieważ wartość tej zmiennej się nie zmienia teraz wartość zmiennej już się
zmienia i otrzymujemy konkretny już interesujący nas błąd mówiące o tym że
faktycznie spodziewamy się tutaj innej struktury obiekt to
takie zabezpieczenie zadziała również w przypadku pozostałych wartości.
Dlatego też można powiedzieć że w tej
wspólnocie mamy następujące sposoby definiowania obiektu.
Moglibyśmy zdefiniować obiekt wykorzystując zapis pisane wielką literą.
Moglibyśmy wykorzystać lata obiektu i
takie zdefiniowanie obiektu niesie za sobą konsekwencję polegającą na tym że do
takiej zmiennej możemy przypisać praktycznie każdą prymitywną wartość.
Z tego też powodu raczej nie warto z tego korzystać.
W zamian możemy wykorzystać zapis wykorzystujący typ pisane małą literą
i on już rozwiązuje ten główny problem natomiast mieli to na uwadze fakt że do
takiego obiektu możesz również przypisać tablicę bądź też wspomniane w ECS.
Alternatywnie do tego sposobu tworzenia obiektów możemy wykorzystać obiekt.
I tutaj miej tylko na uwadze fakt że możemy przekazać obiekt równie dobrze
mogłaby być ta tablica ale również możemy przekazać tutaj wartość Noll.
Pozostałe wartości dalej są postrzegane jako błąd i ostatecznie możemy bardzo
precyzyjnie określić jaki styl obiektu się spodziewamy i wykluczyć wszystkie
pozostałe nawet złożone tp było na tyle jeżeli chodzi o takie niuanse
wynikające z tego w jaki sposób pracujemy z obiektami w krypcie.
Chciałem to po prostu zaznaczyć ponieważ w praktyce często możesz się z tym spotkać.
Wszystkie pozostałe techniki i sposoby typowanie obiektów o mówiłem już kursie
podstawowym więc nie będę tego ponownie powtarzał a jeżeli jesteś zainteresowany
tym materiałem gorąco zachęcam Cię do obejrzenia lekcji na ten temat.
Tymczasem dziękuję Ci za uwagę w tej lekcji i zapraszam do kolejnej.
object · 1 min
let upperCase: Object
let literal: {}
let lowerCase: objectupperCase · 2 min
upperCase = 123
upperCase = '1234'
upperCase = false
upperCase = undefined
upperCase = nulllowerCase · 2 min
lowerCase = 123
lowerCase = '1234'
lowerCase = false
lowerCase = undefined
lowerCase = null
lowerCase = []
lowerCase = {}Object.create · 2 min
Object.create({})
Object.create(null)
Object.create(undefined)
Object.create(123)
Object.create('123')strict · 4 min
let strict: { [key: string]: string }
strict = { foo: 'bar' }
strict = []
strict = true
strict = null