0:00 / 0:00

TypeScript: Intersection & Union types

od Podstaw

1 godz. 54 min · Typescript · Full-stack i Programowanie

Adam Gospodarczyk

Czego się nauczysz

Czym jest TypeScript
Powtórka najważniejszych elementów JavaScript & ESNext
Konfiguracja kompilatora TypeScript i ESLint
Typy w JavaScript vs. Typy w TypeScript
Aliasy i asercja typów
Inferencja typów, czyli mądry TypeScript
Typy funkcji i parametrów
Typy klas, hermetyzacja danych i abstrakcje
Wykorzystanie interfejsów, czyli tworzymy kontrakty

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.

Definicje typów. A co to?

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!

Przepisywanie całego projektu?

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!

Dla kogo jest ten kurs?

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+

0:00W tej lekcji omówimy sobie tzw.

0:02intersection oraz union types.

0:04Co to dokładnie jest

0:05pokażę Ci na przykładzie.

0:08W jednej z poprzednich lekcji mówiliśmy sobie o string literal types.

0:12Przypomnę tylko, że dzięki nim możemy

0:14określać jaki dokładnie ciąg znaków może być przypisany do danej zmiennej.

0:19Wspomniałem też o tym, że szczególnie przydatne są one wtedy, gdy wykorzystujemy

0:23je razem z uniami, czyli właśnie z union type.

0:26Konkretnie wygląda to tak: w tej sytuacji określamy, że wewnątrz tej

0:31zmiennej może znajdować się string: medium lub large.

0:35Dzięki temu zyskujemy tutaj coś na wzór typu

0:37enum, a różnica polega na tym, że te wartości nie są mapowane do liczb.

0:43Także jeżeli przypiszę do tej zmiennej wartość medium

0:46wszystko jest w porządku, ale jeżeli

0:48zdecydujemy się na mały rozmiar kawy to TypeScript powie nam że, nie jest to

0:52możliwe ponieważ mamy do dyspozycji tylko dwa rozmiary.

0:55Idąc teraz dalej, union type daje nam coś jeszcze. Mianowicie

0:59czasem może zdarzyć się tak, że do jakiejś

1:01zmiennej będziemy chcieli przypisać wartość jednego lub drugiego typu.

1:05No bo jak dotąd określaliśmy ściśle jakiego typu musi być zmienna,

1:10ale teraz wykorzystując union type możemy określić również drugi typ.

1:14Dzięki temu tak długo, jak wartość przypisana do tej zmiennej będzie typu

1:18number lub string, wszystko będzie w porządku.

1:22Union type szczególnie sprawdza się w

1:24przypadku funkcji, do których mogą trafić argumenty różnego typu.

1:28Zatem zdefiniujemy sobie tutaj nowy typ i

1:31dzięki zapisowi union type określimy, że zmienne tego typu mogą być tekstem lub liczbą.

1:37Teraz tak utworzony typ możemy przypisać do parametrów funkcji.

1:41Dzięki temu ta funkcja będzie akceptować

1:43już zarówno tekst, jak i liczby, ale zwróć uwagę, że jej rolą będzie podwajanie

1:48przekazanych wartości, więc będziemy zwracać tutaj wartość typu number.

1:53W momencie, gdybyśmy chcieli teraz zwrócić podwojoną wartość to oczywiście mamy tutaj

1:58błąd, który mówi nam o tym, że nie możemy mnożyć wartości typu string.

2:02A w tej sytuacji faktycznie może okazać

2:04się, że value będzie tekstem. W takiej sytuacji oczywiście musimy

2:08zmienić zachowanie funkcji, w zależności od typu przekazanej wartości.

2:13Zatem w sytuacji, gdy przekazana wartość jest tekstem, musimy zamienić ją na liczbę

2:18no i oczywiście sprawdzić typ.

2:20W przeciwnym razie po prostu zwracamy podwojoną wartość.

2:23No i w tym momencie TypeScript

2:25potwierdza, że wszystko jest w porządku, ponieważ odpowiednio weryfikujemy tutaj typ.

2:30Kolejnym przydatnym scenariuszem union type

2:32jest wykorzystanie w kontekście wartości null oraz undefined.

2:36Mianowicie weźmy sobie tutaj deklarację funkcji,

2:39która początkowo ma ustawioną wartość undefined.

2:42Jeżeli teraz przekazalibyśmy ją do funkcji,

2:44która przyjmuje wartości typu string, no to mielibyśmy tutaj problem.

2:49TypeScript, w przeciwieństwie do innych statycznie typowanych języków, nie pozwala na

2:53przypisanie wartości undefined i null do innych typów.

2:57Wyjściem z takiej sytuacji jest zastosowanie union type.

3:00Po prostu definiuję tutaj typ, który może być tekstem lub wartością undefined,

3:05no i ustawiam go przy parametrze zmiennej.

3:07Dzięki temu wszystko jest tutaj w porządku.

3:10Jeżeli chodzi o union types w tym momencie jest to wszystko.

3:14Przejdźmy teraz do intersection types.

3:17Podczas gdy union typ pozwala nam na wykorzystanie jednego lub drugiego typu,

3:22tak intersekcja pozwala nam na łączenie typów.

3:25Wykorzystamy sobie tutaj interfejsy, ale na razie

3:28się nimi nie przejmuj, ponieważ będziemy mówić o nich w kolejnych filmach.

3:31W każdym razie mamy tutaj interfejs knife, który posiada jedną metodę slice.

3:36Następnie mamy metodę scissors, który posiada metodę cut.

3:40No i teraz na podstawie tych interfejsów

3:43możemy stworzyć typ, który będzie dbał o to, aby obiekty wykorzystujące ten typ

3:47posiadały właściwości takie jak slice i cut.

3:51No i teraz możemy stworzyć metodę, która

3:53będzie wykorzystywać narzędzia pasujące do naszego typu.

3:57Wewnątrz niej wywołamy metody cut oraz slice.

4:00Zatem wszystko będzie działać tak długo,

4:02dopóki obiekt, który zdefiniujemy, będzie typu multiTool i jak widzisz od razu mamy

4:08informację o tym, że musi on posiadać właściwości slice oraz cut.

4:14Dopiero teraz tak przygotowany obiekt może zostać użyty w naszej funkcji.

4:19No i faktycznie wszystko tutaj się zgadza.

4:21Do wykorzystania zarówno interesekcji jak i

4:24uni będziemy jeszcze niejednokrotnie wracać.

4:27Tymczasem dziękuję Ci za uwagę i do usłyszenia w kolejnej lekcji.

Kod

String literal union types · 1 min

// String literal types
let coffeeSize: "medium" | "large"
coffeeSize = "medium"
coffeeSize = "small"

Union type · 3 min

// Union Type
let stringOrNumber: string | number
stringOrNumber = 255
stringOrNumber = "max"

type doubleAnything = string | number

function double(value: doubleAnything): number {
  if (typeof value === "string") {
    return parseInt(value) * 2
  }

  return value * 2
}

Null i undefined · 3 min

// Unknown values
type maybeValue = string | undefined
let valuefromDOM

function show(value: maybeValue) {
  return value
}

show(valuefromDOM)

Intersection types · 4 min

// Intersection types
interface Knife {
  slice(): string
}
interface Scissors {
  cut(): string
}

type multiTool = Knife & Scissors

function useTool(tool: multiTool) {
  tool.cut() /*?*/
  tool.slice() /*?*/
}

const swissArmyKnife: multiTool = {
  slice() {
    return "slice!"
  },
  cut() {
    return "cut!"
  },
}

useTool(swissArmyKnife)