0:00 / 0:00

TypeScript: Typy w TypeScript

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 kontynuujemy temat typów i

0:02poznamy również takie, które są charakterystyczne dla samego TypeScriptu.

0:07W pierwszej kolejności mamy tablice, przy których definiowaniu musimy określić

0:11jakiego rodzaju dane będą się w niej znajdować.

0:13Notacja wygląda w następujący sposób, czyli

0:16jak widzisz mamy tutaj typ oraz nawiasy kwadratowe.

0:19W tej sytuacji wykorzystuję słowo kluczowe 'const', więc oczywiście mam tutaj od razu błąd

0:24informujący mnie o tym, że muszę zmienną zainicjalizować. No i wszystko jest w porządku,

0:30tak długo, dopóki w tej tablicy znajdują się liczby.

0:32W momencie gdy to się zmienia otrzymujemy informację, że tak nie może być.

0:37Tymczasem do definiowania tablic możemy

0:39wykorzystywać jeszcze drugą notację, która zasadniczo generuje nam taki sam wynik.

0:43Natomiast w praktyce zdecydowanie częściej wykorzystujemy właśnie ten.

0:47Co ciekawe tutaj korzystamy z typu

0:49'array', który w JavaScripcie w praktyce typem nie jest.

0:53Idąc dalej, w momencie gdy pracujemy na

0:55elementach tablicy, oczywiście ich typy nadal są uwzględniane.

0:59Czyli jeżeli zadeklaruję sobie tutaj zmienną typu number, a następnie spróbuję

1:04przypisać do niej element naszej tablicy to wszystko będzie w porządku.

1:07Wydaję mi się, że to akurat jest jasne, ale

1:10co w sytuacji, gdy w tablicy będziemy chcieli wykorzystać dane różnego typu.

1:14Wtedy do gry wchodzi drugi rodzaj tablic, określane mianem tuple.

1:18Jeżeli programujesz w innych językach z pewnością go kojarzysz.

1:22W praktyce chodzi tutaj o tablice,

1:24w których zarówno liczba elementów oraz ich typ jest z góry określone. Czyli tutaj mamy

1:29tablicę, w której znajdzie się dokładnie string i wartość logiczna, dlatego tak długo

1:34jak ten warunek zostanie spełniony wszystko będzie grało.

1:37Ale już w momencie, gdy pojawi się tutaj inny typ lub np.

1:40dodatkowa wartość, no to TypeScript upomni nas o tym, że tak nie może być.

1:45Jeżeli chodzi o tablice to już wszystko i możemy przejść do obiektów.

1:49Tutaj w przypadku TypeScriptu co prawda nie ma czegoś takiego jak np.

1:53typ object, natomiast obiekty określamy w

1:56następujący sposób. Po prostu jako typ przekazujemy strukturę obiektów oraz

2:01informację o tym, jakiego typu będą jego poszczególne wartości.

2:05No i wewnątrz takiej zmiennej możemy

2:07przechowywać wyłącznie obiekty spełniające taką strukturę.

2:10Oczywiście doskonale wiesz, że właściwością obiektu może być również funkcja.

2:14Wtedy nazywamy ją metodą. Przy definicji

2:16takiego obiektu musimy określić jakiego rodzaju informacje będzie zwracać

2:20taka metoda. I swoją drogą mogę od razu

2:23zainicjalizować ten obiekt w następujący sposób.

2:26Jak widzisz mam tutaj znak równa się i otwieram nawiasy klamrowe.

2:29Następnie TypeScript od razu informuje

2:32mnie o tym, że brakuje mi tutaj wspomnianej metody.

2:35No i tak długo jak ta metoda nie zwraca

2:37odpowiedniego typu danych, będziemy mieć tutaj informację o błędzie.

2:41Tutaj akurat chcemy zwrócić właściwość name, która oczywiście jest stringiem, więc

2:46wszystko będzie okej. Musisz przyznać, że nie jest to wcale takie trudne.

2:50Kolejnym i ostatnim typem w tej lekcji będzie typ Enum.

2:54I ten typ również możesz kojarzyć z innych języków programowania.

2:57A jeżeli jest inaczej to na jego temat musisz wiedzieć tyle, że jest to po prostu

3:02zbiór nazwanych, określonych wartości liczbowych.

3:05Taki typ definiujemy w następujący sposób.

3:08Zwróć uwagę, że mamy tutaj słowo kluczowe enum,

3:10następnie nazwę tego typu oraz nawiasy

3:13klamrowe. Wewnątrz nich definiujemy nazwy poszczególnych elementów.

3:17W tym przypadku są to rozszerzenia dokumentów tekstowych.

3:20No i teraz powiedziałem, że jest to zbiór

3:22nazwanych, określonych wartości liczb całkowitych.

3:25Tylko gdzie te liczby?

3:27A w momencie gdy będziemy odczytywać te

3:29poszczególne wartości, otrzymamy właśnie liczbę.

3:33Domyślnie są one numerowane od zera, dokładnie tak jak w przypadku tablic,

3:37natomiast nic nie stoi na przeszkodzie abyśmy mogli na to wpływać.

3:40Przykładowo: jeżeli tutaj dodamy wartość 3

3:43to będę mógł odwołać się do tego elementu, powołując się właśnie na tę wartość.

3:48Wtedy, jak widzisz, zamiast liczby otrzymałem nazwę tego elementu.

3:52Warto jeszcze zwrócić uwagę na to, że jeżeli tutaj ręcznie podałem liczbę, no to

3:56kolejny element również zmienił swoją wartość.

3:59Tymczasem wróćmy jeszcze na chwilę tutaj, bo mamy nazwę tego elementu, którą również

4:04możemy wykorzystać do tego, aby odwołać się do elementu.

4:07Wtedy w odpowiedzi otrzymujemy znowu liczbę.

4:10Na tym etapie wiemy już w jaki sposób odczytywać wartości numeralne. Warto

4:14wiedzieć, że takie wartości możemy wykorzystywać również w przypadku funkcji.

4:18Po prostu jako typ argumentu przekazuję tutaj nazwę naszego zbioru.

4:22Dzięki temu taka funkcja będzie przyjmować

4:25wyłącznie dane, które pochodzą z naszego zbioru.

4:27I tutaj znowu mogę przekazywać je w taki

4:30sposób lub po prostu odnosząc się do wartości liczbowej.

4:33Idąc dalej elementy zbioru enum mogą przechowywać również wartości typu string.

4:39Konkretnie wygląda to w następujący sposób.

4:41Mało tego istnieje również możliwość określenia wartości w następujący sposób.

4:46Jak widzisz mam tutaj prostą operację łączenia ciągu znaków.

4:50Równie dobrze mógłby wykorzystać tutaj template string lub np.

4:54wartość z jakiejś zmiennej.

4:55W każdym razie do tych elementów znowu odwołujemy się w taki sam sposób,

5:00przy czym musimy pamiętać o tym, że w tej

5:02chwili nie posiadają one wartości numerycznej.

5:05Ostatnią rzeczą jeżeli chodzi o typ enum są tak zwane const enum.

5:09Są to po prostu definicje typu enum, poprzedzone słowem kluczowym const.

5:14Różnią się one od poprzedniego typu tym, że

5:16w momencie transpilacji, wartości zbioru enum zostaną potraktowane dosłownie.

5:21Inaczej mówiąc znikną z pliku wynikowego.

5:24Ale pozwól, że pokaże Ci to na przykładzie, aby wszystko było jasne.

5:27Tak zdefiniowany zbiór możemy wykorzystać w funkcji. Przyjmuje ona argumenty pasujące

5:32do tego zbioru a następnie wykorzystuje je w instrukcji switch.

5:36W momencie gdy transpilujemy ten kod otrzymujemy następujący wynik.

5:41Jak widzisz wartości, które zapisaliśmy tutaj oraz tutaj zostały zamienione na

5:46wartości liczbowe tutaj oraz tutaj. W takiej sytuacji z jednej strony oszczędzamy na

5:51rozmiarze bundle'a, ale z drugiej strony rekomendowane jest zachowanie tej

5:55oryginalnej składni i aby upewnić się, że tak faktycznie się stanie,

5:59wystarczy, że dodamy do naszego pliku tsconfing następującą opcję.

6:04I teraz mamy pewność, że const enum zostanie zachowane w naszym kodzie. Tym ustawieniem

6:09kończymy tę lekcję i słyszymy się za chwilę.

Kod

Typ Array · 1 min

// Array
const data: number[] = [1, 2, 3, "4"]
const genericData: Array<number> = [5, 6, 7]
typeof Array /*?*/

let randomNumber: number
randomNumber = genericData[2]

Typ Tuple · 2 min

// Tuple
let setting: [string, boolean]
setting = ["darkmode", true]
setting = ["darkmode", true, 10]

Typ Object · 3 min

// Object
let product: { name: string; price: number; count: number }

product = {
  name: "Mentoring session",
  price: 340,
  count: 2,
}

const user: { name: string; getName(): string } = {
  name: "Adam",
  getName() {
    return this.name
  },
}

Typ Enum · 5 min

// Enum
enum ExtensionType {
  doc,
  docx = 3,
  pdf,
}

ExtensionType.docx /*?*/
ExtensionType[3] /*?*/
ExtensionType["pdf"] /*?*/

function setExtension(extension: ExtensionType) {
  extension /*?*/
}
setExtension(ExtensionType.doc)
setExtension(3)

enum ExtensionTypes {
  doc = "application/msword",
  docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  pdf = "application/" + "pdf",
}

ExtensionTypes.docx /*?*/
ExtensionTypes[2] /*?*/

const Enum · 6 min

// const Enum
const enum SubscriptionStatus {
  active,
  expired,
}

function getSubscriptions(status: SubscriptionStatus) {
  switch (status) {
    case SubscriptionStatus.active:
      return ["(active subscriptions)"]
    case SubscriptionStatus.expired:
      return ["(expired subscriptions)"]
  }
}

function getSubscriptions(status: SubscriptionStatus) {
  switch (status) {
    case 0:
      return ["(active subscriptions)"]
    case 1:
      return ["(expired subscriptions)"]
  }
}