0:00 / 0:00

TypeScript: Podstawy składni

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:00Powiedzieliśmy sobie, że TypeScript jest rozszerzeniem JavaScriptu.

0:04Pytanie brzmi: na czym to rozszerzenie polega? W praktyce wygląda to tak, że

0:09w naszym kodzie JavaScript pojawia się po prostu dodatkowa składnia.

0:13Bo np. wiemy już, że TypeScript umożliwia nam

0:15statyczne typowanie, czyli po prostu mamy możliwość określenia typu zmiennych.

0:19Jak widzisz wygląda to następująco. Mamy

0:22tutaj deklarację poszczególnych zmiennych oraz po dwukropku podajemy ich typ. I właśnie

0:27dzięki temu już na etapie kodu wiemy, że do zmiennej text możemy przypisać string, ale

0:32próba przypisania do niej liczby zakończy się błędem.

0:35Podobnie określenie typu możemy zastosować w przypadku tablic np.

0:40taki zapis również nie jest charakterystyczny dla JavaScript.

0:44Ale jak widzisz mamy tutaj informację o tym, że w zmiennej list znajduje się

0:48tablica, przechowująca elementy typu number.

0:51Akurat w przypadku tablic to samo możemy zapisać jeszcze w ten sposób.

0:55Pomiędzy tymi zapisami nie ma jakiejś szczególnej różnicy,

0:58poza małymi wyjątkami, które omówimy przy okazji lekcji o tablicach.

1:03W każdym razie określenie typu elementów tablicy również chroni nas przed tym, aby

1:07nie trafiły do niej elementy typu, którego się nie spodziewamy.

1:10Zatem jak widzisz próba dodania tekstu do

1:13tablicy list została zaznaczona jako błąd i to oczywiście jest prawdą.

1:18Idąc dalej, typy mogą dotyczyć również

1:21funkcji a konkretniej ich parametrów oraz zwracanych przez nie wartości.

1:25W tej sytuacji funkcja play jako pierwszy

1:28argument przyjmuje string a zwraca wartość logiczną.

1:31Oczywiście o funkcjach będziemy sobie jeszcze rozmawiać, ale zobaczmy jak działa ta.

1:37Ponownie jak widzisz mamy tutaj błąd, ponieważ próbowałem przekazać do niej

1:40obiekt. Ale już w momencie gdy przekażę do niej string, wszystko będzie w porządku.

1:45Myślę, że to wszystko jest dla Ciebie jak najbardziej jasne.

1:48Oczywiście te wszystkie tematy będziemy

1:50pogłębiać w kolejnych lekcjach, natomiast teraz zależy mi na tym, abyś wiedział czego

1:54może się spodziewać. Teraz, zanim przejdziemy dalej, pokażę Ci jeszcze jedną

1:58rzecz. Mianowicie być może zastanawiasz się w jaki sposób ten kod działa.

2:03Tak się składa, że przeglądarki nie potrafią zrozumieć kodu TypeScript.

2:07Natomiast my oczywiście możemy przetłumaczyć TypeScript na JavaScript.

2:11Jak to dokładnie robić będę Ci jeszcze

2:13opowiadał. Na ten moment po prostu zrobię tak. To co teraz się stało to na podstawie

2:18naszego kodu TypeScript wygenerowałem przetłumaczony kod JavaScript.

2:23Jak widzisz tutaj poza tym, że trochę zmieniło się formatowanie,

2:26cała reszta jest teraz normalnym kodem JavaScript, bez dodatkowej składni TypeScript.

2:31Oczywiście w praktyce nie musimy zajmować się ręcznym tłumaczeniem tych wszystkich

2:35plików, bo tym zajmują się narzędzia takie jak chociażby Web Pack.

2:39Proponuję, abyśmy wrócili teraz do tematu

2:41składni w TypeScripcie, ponieważ jest jeszcze kilka rzeczy, które chciałem CI pokazać.

2:46Jedną z nich są interfejsy, które znasz być może z innych języków programowania.

2:50W każdym razie w tej konkretnej sytuacji

2:52określamy kształt jakiegoś obiektu i tym obiektem jest argument funkcji setPosition.

2:58Dzięki temu, w momencie gdy ją wywołujemy,

3:00TypeScript będzie dbał o to aby obiekt, który do niej przekazujemy, miał

3:04odpowiedni zdefiniowany przez nas w interfejsie kształt.

3:08Interfejsy są przykładem składni, która nie występuje naturalnie w JavaScripcie,

3:12przynajmniej nie na moment, w którym nagrywam ten film.

3:15Ale jak widzisz ich zastosowanie jest niesamowicie przydatne, a chyba nie muszę

3:19podkreślać, że ten przykład jest naprawdę podstawowy.

3:22Kolejnym przykładem, poza interfejsami, są chociażby dekoratory.

3:26A są to specjalne formy deklaracji, które możemy podłączać do np.

3:30klas. Pokażę Ci teraz przykład takiego

3:32dekoratora, ale nie będziemy zgłębiać się w jego kształt.

3:35W każdym razie mam tutaj klasę Member,

3:38która posiada konstruktor oraz właściwość name. I teraz, tworząc obiekt na podstawie

3:43tej klasy, przekazujemy do konstruktora imię użytkownika.

3:47Teoretycznie moglibyśmy się spodziewać, że jeżeli zrobię teraz tak

3:50i dodam tylko, że ten zapis jest charakterystyczny dla wspomnianego

3:54rozszerzenia quokka js, do tego aby wyświetlić wartość zmiennej.

3:58I właśnie wartość tej zmiennej powinna wskazywać na moje imię.

4:02A jak widzisz mamy tutaj jeszcze rakietę.

4:04Stało się to właśnie za pośrednictwem

4:06zdefiniowanego przeze mnie dekoratora, który zmodyfikował zachowanie konstruktora.

4:11W TypeScripcie takich elementów jak interfejsy i dekoratory

4:15jest jeszcze kilka, ale będziemy mówić o nich później.

4:18Na koniec mam jeszcze jeden przykład,

4:20który pokazuje jak zaawansowany może być TypeScript. To co tutaj widzisz to przykład pochodzący

4:25bezpośrednio z dokumentacji i jest to jak najbardziej poprawny kod TypeScript.

4:30Jednocześnie trudno byłoby o nim

4:32powiedzieć, że ma cokolwiek wspólnego z JavaScriptem.

4:35Ale na zrozumienie tej całej składni przyjdzie jeszcze czas.

4:38Tymczasem to tyle jeżeli chodzi o wstęp. To co musisz zapamiętać z tej lekcji to fakt,

4:43że TypeScript daje nam dodatkowe możliwości, rozszerzając składnię JavaScriptu.

4:48Jednocześnie przypominam o tym, że

4:50ostatecznie ta składnia musi być przetranspilowana do czystego JavaScriptu.

4:54I właśnie tym wszystkim będziemy zajmować się w tym kursie.

Kod

Typy zmiennych · 1 min

// Variable types
let counter: number; 
let text: string;
let logic: boolean;

text = 'Lorem ipsum';

Typy tablic · 1 min

// Arrays
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

Typy funkcji · 2 min

// Functions
const play = function (song: string): boolean { 
  console.log(`Playing ${song}`);
  return true; 
}

Interfejsy · 3 min

// Interfaces
interface Coords { x: number, y: number }

function setPosition(position: Coords) {
  return `Current position is set to: ${position}`
}

setPosition({ x: 1, y: 3});

Dekoratory · 4 min

// Decorators
function Rocket() {
  return function(target: any, key: string | symbol) {
    let value = target[key];
    const getter = () => value;
    const setter = (next: string) => {
      value = `${next} 🚀`
    }

    Object.defineProperty(target, key, {
      get: getter, set: setter, enumerable: true, configurable: true
    });
  };
}

class Member {
  @Rocket()
  public name: string
  constructor(name: string) {
    this.name = name
  }
}