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 zaczynamy temat funkcji, a konkretnie zaczniemy od parametrów, które
swoją drogą również mogą posiadać swoje typy.
Oprócz tego TypeScript umożliwia nam definiowanie opcjonalnych parametrów, których nie musimy
przekazywać do funkcji oraz parametrów domyślnych, które przyjmują domyślną wartość
w momencie gdy do funkcji nie przekażemy jakiegoś argumentu.
Wszystko spoko, ale zobaczmy jak to wygląda w praktyce.
Na potrzeby przykładu będzie nam potrzebny obiekt a więc definiuje teraz jego typ i będzie
to jak widzisz utwór, zawierający kilka właściwości.
Na podstawie tego typu tworzę nowy obiekt,
który zawiera już dane. I ten obiekt będziemy przekazywać do
funkcji jako parametr, więc aby upewnić się, że przekazane dane w tym miejscu będą
miały strukturę dokładnie taką jak określiliśmy w tym typie,
no to muszę to zasygnalizować i akurat z tej składni już zdarzyło mi się korzystać
w kursie, ale nie miałem okazji żeby trochę dłużej o niej mówić.
W każdym razie największą zaletą, którą tutaj mamy jest fakt, że w momencie gdy
operujemy na tym obiekcie wewnątrz funkcji mamy dostęp do jej właściwości.
Jest to szczególnie przydatne w momencie gdy mamy bardziej rozbudowaną aplikację.
Nie zmienia to jednak faktu, że taki mały
szczegół nie tylko przyśpiesza development, ale zmniejsza ryzyko popełnienia błędu.
Dodatkowo w momencie gdy wywołujemy taką funkcję, po najechaniu mamy od razu
informację o tym jakiego typu dane ona przyjmuje.
Jest to kolejna ważna informacja, która niejednokrotnie może nam się przydać.
Tutaj oczywiście przekazuję nasz obiekt,
natomiast znowu po najechaniu na niego mam
od razu informację jakiego rodzaju dane tutaj przyjmujemy. Ponownie -
w praktyce jest to niesamowicie przydatne.
I tutaj oczywiście ten kod działa poprawnie.
Kolejną istotną kwestią w kontekście parametrów są parametry opcjonalne,
czyli dokładnie jak nazwa wskazuje: takie, których nie musimy podawać.
W tej sytuacji mamy funkcję która przyjmuje nasz utwór.
I tutaj dodam jeszcze typ oraz drugi
parametr który jak widzimy zakończony jest znakiem zapytania.
Oznacza to że właśnie ten parametr jest
opcjonalny i nie musimy go podawać w kontekście parametrów opcjonalne musisz
pamiętać tylko tyle że muszą znajdować się one na samym końcu parametrów funkcji tzn.
Tych opcjonalne parametrów może być kilka.
Natomiast tak jak powiedziałem muszą znajdować się one na końcu.
Teraz wystarczy że wewnątrz naszej funkcji
dodatkowy warunek sprawdzający czy Play lista została podana.
I jeżeli nie to ustawiamy ją na domyślną.
Dopiero wtedy mogę zwrócić właściwe
informacje do użytkownika podczas gdy można sobie wyobrazić wiele
sytuacji w której opcjonalne parametry mogą okazać się przydatne.
Tak w tej konkretnej sytuacji istnieje lepsze rozwiązanie czyli tutaj dokonujemy
specjalnego sprawdzania tylko po to aby ustawić wartość na domyślną.
Dlatego też mogę to zrobić od razu tutaj w
ten sposób ten parametr nie musi już być opcjonalny.
Chociaż nadal możemy go po prostu nie
podawać ponieważ wtedy jego wartość zostanie ustawiona na Bedford.
Dzięki temu mogę już usunąć z tego iPhone'a bo nie będzie nam już potrzebne
i w momencie gdy wywołany tą funkcję i mało tego nie przekaże do niej żadnej
tej listy to dalej będziemy mieli odpowiedni wynik.
Jak widzisz określanie typów parametrów
oraz praca opcjonalne parametrami i domyślne mi jest niesamowicie prosta.
Pamiętaj tylko proszę o tym co powiedziałem w kontekście opcjonalne
parametrów że muszą znajdować się na końcu.
No i oczywiście miej na uwadze fakt że
określanie typów parametrów jest szczególnie istotne ze względu na to że po
prostu lepiej opisuje nam funkcje i ułatwia pisanie kodu.
To jest zdecydowanie niesamowita zaleta z której będziesz czerpał.
Na każdym kroku na tym właśnie kończymy naszą lekcję i słyszymy się za chwilę.
Opcjonalne parametry · 3 min
// Optional parameters
function addToPlaylist(song, playlist?: string) {
if (!playlist) playlist = "Default"
return `Added ${song.title} to playlist: ${playlist}`
}
addToPlaylist(song) /*?*/Typy parametrów · 2 min
// Parameter types
type Song = { title: string; duration: number; genre: string }
const song = { title: "Eye of the tiger", duration: 213, genre: "rock" }
function play(song: Song) {
return `Playing now: ${song}`
}
play(song) /*?*/Domyślne parametry · 3 min
// Default parameters
function addToPlaylist(song, playlist = "Default") {
return `Added ${song.title} to playlist: ${playlist}`
}
addToPlaylist(song) /*?*/