0:00 / 0:00

TypeScript: Czym jest Type Guard?

Techniki Zaawansowane

2 godz. 35 min · Typescript · Full-stack i Programowanie

Adam Gospodarczyk

Czego się nauczysz

Jak typować "this" w TypeScript?
Typy generyczne i ograniczenia generyczne
Przeciążenia funkcji i Type Queries (Utility Types)
Typowanie obiektów i Mapped Types
Wszystko o typie enum oraz Type Guards
Wszystko o pliku tsconfig.json
Strategie migracji istniejących projektów
Dobre praktyki pracy z TypeScript

Po co nam statyczne typowanie?

Zacznijmy 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.

Co z istniejącymi projektami JavaScript?

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.

Dodatkowa składnia = więcej pracy?

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.

Dlaczego TypeScript?

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.

Czy warto uczyć się TypeScript’u?

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.

Dla kogo jest ten kurs?

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+

0:00W tej lekcji chciałbym przedstawić ci koncepcję jaką type guard

0:04o niej już akurat wspomniałem przy okazji ograniczeń generycznych

0:08natomiast tym razem chciałbym ten temat nieco zastrzeżyć jeżeli

0:12chodzi o samą definicję type guard to mówi ona o tym że jest to mechanizm

0:16umożliwiający zawężanie typów domyślam się że

0:20na ten moment niewiele ci to mówi więc po prostu przejdźmy do przykładu zdefiniuję tutaj

0:25funkcjię którą zresztą wykorzystaliśmy przy okazji organiczneń generycznych

0:30której to zadaniem jest przekonwertowanie przekazanego tekstu bądź

0:34też tablicy ciągów znaków w taki sposób aby zamienić małe

0:38litery na wielkie zatem tutaj mamy jasną sytuację pokazującą

0:42nam że jedna funkcja jest w stanie przyjąć dwa różne rodzaje danych i

0:47oczywiście my musimy zrobić tak aby obsłużyć zarówno jeden jak i

0:51drugi przypadek inaczej mówiąc musimy w jakiś sposób ograniczyć typ

0:55przekazanych danych i zachować się adekwatnie do tego z jakim typem

0:59mamy do czynienia to w jaki sposób możemy sprawdzić typ danych

1:03już oczywiście wiemy wykorzystujemy w tym celu operator typeof

1:07przekazując do niego nasz argument jestem w stanie sprawdzić czy jest on typu string i

1:13tutaj zwracam twoją uwagę na wykorzystanie operatora ścisłego porównania

1:17dzięki temu mamy pewność że jeżeli do naszej funkcji trafi string

1:21będziemy mogli wykonać na nim operacje toUpperCase na

1:25ten moment typescript informuje nas o tym że mamy tutaj błąd ponieważ w

1:29niektórych przypadkach może zdarzyć się tak że nasza funkcja nie zwróci

1:33żadnej wartości i swoją drogą to ostrzeżenie pochodzi bezpośrednio z

1:38eslint w każdym razie możemy sobie poradzić z tym w następujący

1:42sposób w momencie gdy przekazany argument nie będzie stringiem

1:46to mamy w zasadzie pewność że będzie tablicą stringów dlatego

1:50też bez przeszkód będziemy w stanie wykonać na nim operację map wystarczy

1:54że na każdym elemencie tablicy wykonam metodę toUpperCase a następnie

1:59połączę ją w jeden ciąg znaków teraz jeżeli wykonam tą funkcję

2:03zarówno dla tablicy jaki ciągu znaków otrzymamy poprawny wynik no

2:08i w zasadzie właśnie na tym polega cała koncepcja type guard czyli

2:12po prostu dotyczy ona sytuacji w której możemy spodziewać się więcej niż jednego typu

2:16i musimy w jakiś sposób obsłużyć te sytuacje jednym

2:20ze sposobów jest wykorzystanie operatora typeof a drugim wykorzystania

2:25operatora instanceof o nim akurat będziemy mówić w kolejnym

2:29odcinku natomiast ja chciałbym pokazać ci teraz jeszcze kilka małych szczegółów

2:34jednym z nich jest fakt że tutaj wykorzystałem instrukcję warunkową

2:38if ale tak naprawdę nic nie stałoby na przeszkodzie jeżeli wykonał bym

2:42tutaj instrukcję switch ona jak wiesz sprawdzi się tutaj szczególnie dobrze

2:46gdybyśmy tych opcji mieli zdecyduj więcej wtedy zamiast pisać

2:50wiele instrukcji warunkowych if zastępujemy je wszystkie jednym switchem

2:54efekt działania tej funkcji jest oczywiście taki sam chciałbym

2:59po prostu żebyś miał to na uwadze tymczasem korzystając jeszcze

3:03z okazji chciałbym ci pokazać jeszcze jeden sposób tworzenia type

3:07guard z wykorzystaniem operatora in to również pokażę

3:11ci na przykładzie tworząc teraz dwie klasy będzie to klasa song

3:15oraz klasa playlist zwróć uwagę że to co je różni to nazwa

3:20właściwości tutaj mamy tytuł a tutaj nazwę i

3:24teraz w momencie gdybyśmy napisali funkcję która miałaby odtworzyć jakieś

3:28media i do niej będziemy mogli przekazać zarówno jeden utwór jak

3:32i całą playlistę no to aby rozróżnić jeden typ od drugiego

3:36możemy wykorzystać operator in sprawdzając po prostu czy

3:40mamy tutaj właściwość title czy też nie w momencie gdy taka właściwość

3:44znajduje się w naszym obiekcie mamy do czynienia z utworem w przeciwnym razie

3:48będzie to playlista no i jesteśmy w stanie to teraz zweryfikować

3:52tworząc nowy utwór a następnie przekazując go do funkcji

3:57play faktycznie nie ma tutaj zaskoczenia ponieważ mamy właściwość

4:01title i właśnie został wykonany ten fragment kodu oczywiście

4:06w tym konkretnym przykładzie być może powiesz mi że takie sprawdzenie typu możemy

4:10załatwić w nieco inny lepszy sposób i to właśnie pokażę ci w kolejnej

4:14lekcji natomiast czasem może okazać się że po prostu faktycznie będziemy

4:18mieć jakiś obiekt i będziemy chcieli sprawdzić czy mamy do czynienia z właśnie

4:22takim a nie inym obiektem i wtedy będziemy mogli to

4:26zrobić wyszukując jego właściwości jest to coś co zdecydowanie

4:31warto mieć na uwadze chociaż tak jak powiedziałem w tym konkretnym przypadku akurat

4:35powinien zadziałać nieco inny mechanizm i tym zajmiemy się za chwilę

4:40zapraszam cię do kolejnej lekcji

Kod

upperAnything · 2 min

function upperAnything(data: string | string[]): string {
  switch(typeof data) {
    case "string": return data.toUpperCase();
    default: return data.map(item => item.toUpperCase()).join('')
  }
}

upperAnything(['a', 'b', 'c']); /*?*/
upperAnything('abc'); /*?*/

classes · 3 min

class Song {
  constructor(public title: string) {}
}

class Playlist {
  constructor(public name: string) {}
}

play() · 4 min

function play(media: Song | Playlist) {
  if ('title' in media) {
    return 'Play song!'
  }

  return 'Play playlist.'
}

const bestThemeEver = new Song('Game of Thrones Theme');
play(bestThemeEver); /*?*/