0:00 / 0:00

TypeScript: Powtórka z ESNext

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:00Ostatnim krokiem przed rozpoczęciem nauki TypeScriptu będzie upewnienie się, że jesteśmy

0:05na bieżąco ze zmianami w języku JavaScript, które określamy mianem ESNext.

0:11Jedną z najbardziej zauważalnych zmian, które

0:13pojawiły się w ciągu ostatnich lat jest sposób deklarowania zmiennych. Wcześniej w

0:18tym celu wykorzystywaliśmy słowo kluczowe var.

0:21W przypadku takiej zmiennej mogliśmy

0:23zmieniać jej wartość oraz nawet ponownie deklarować.

0:27I to akurat mogło być przyczyną wielu problemów.

0:30Dodatkowo zmienne zadeklarowane słowem kluczowym var posiadają zakres funkcyjny.

0:35Więc jeżeli wykorzystywaliśmy je w jakimś bloku np.

0:38w bloku if lub pętli for to jeżeli wtedy

0:41ich wartość ulegnie zmianie, to widzimy to również poza tym blokiem.

0:45Aby uniknąć tego typu pułapek możemy teraz

0:48zdeklarować zmienne, korzystając ze słowa kluczowego let. Tak zadeklarowanej zmiennej

0:53nie możemy ponownie zadeklarować, ale możemy zmieniać jej wartość.

0:57Dodatkowo posiada ona zakres blokowy, więc jeśli powtórzymy teraz nasz przykład to

1:02pomimo tego, że jak widzisz zadeklarowaliśmy tutaj zmienną o tym samym

1:06identyfikatorze, tylko z inną wartością, to poza tym blokiem wartość jej pozostaje

1:11niezmieniona. I teraz poza słowem kluczowym let mamy do

1:15dyspozycji jeszcze słowo kluczowe const. Zmienne zadeklarowane w ten sposób

1:20zachowują się tak samo jak w przypadku słowa kluczowego let

1:23z tą różnicą, że nie możemy zmieniać

1:25wartości tych zmiennych. W momencie gdy spróbujemy to zrobić,

1:29jak widzisz, otrzymujemy błąd informujący nas o tym, że nie możemy zmieniać wartości

1:33tych zmiennych. W kontekście słów kluczowych let oraz const

1:37istotny jest jeszcze hoisting, czyli mechanizm polegający na tym, że

1:41deklarowana zmienna jest wynoszona na górę zakresu, do którego została przypisana.

1:46Otóż w przypadku zmiennych zadeklarowanych słowem kluczowym var

1:50mogliśmy odwołać się do zmiennej zanim ta została zadeklarowana.

1:54Natomiast nie ma wątpliwości, że ten identyfikator tutaj już istnieje.

1:58Taka sytuacja nie ma już miejsca w przypadku słów kluczowych let oraz const.

2:03Tutaj jak widzisz otrzymujemy po prostu

2:05reference error. W kontekście zmiennych należy zapamiętać

2:09tylko tyle, że teraz korzystamy wyłącznie ze słów kluczowych let oraz const i zasada

2:14jest taka, że domyślnie wykorzystujemy const.

2:16Natomiast w sytuacji gdy wiemy, że wartość zmiennej powinna ulec zmianie, wtedy

2:21dopiero wykorzystujemy let. Var natomiast obecnie praktycznie nie znajduje

2:25żadnego zastosowania. Jeżeli chodzi o zmienne

2:29warto jeszcze dodać tylko jeden mały fakt. Mianowicie zmienne zadeklarowane

2:33słowem kluczowym const nie mogą ulegać zmianie.

2:36Jednak jeżeli mówimy o właściwościach

2:38obiektów lub elementach tablic ta zasada tutaj nie obowiązuje.

2:43Wynika to z faktu, że zmienne zadeklarowane

2:45w ten sposób nie mogą być ponownie zadeklarowane ani przypisane.

2:49W tej sytuacji nie mówimy ani o jednym ani o drugim,

2:52dlatego takie działanie jest możliwe.

2:57Kolejnym stosunkowo nowym tematem są

3:00template strings, czyli nowy format zapisu tekstu.

3:03Wcześniej zmienne mogliśmy zapisywać korzystając z cudzysłowów lub apostrofów,

3:08a teraz w przypadku template strings mówimy o backtickach.

3:12Ich główną zaletą jest fakt, że możemy zapisywać zmienne bezpośrednio w stringu.

3:17Dzięki temu łączenie danych jest zdecydowanie prostsze.

3:21Drugą zaletą wykorzystania template string

3:23jest możliwość zapisania tekstu w wielu liniach.

3:28Jak widzisz nie ma z tym żadnego problemu.

3:30Co ciekawe template string możemy wykorzystać jako

3:34tzw. tag. Chodzi tutaj o to, że gdy zdefiniujemy sobie taką

3:37funkcję, możemy podać jej nazwę a następnie template string.

3:41Dzięki temu jako argumenty zostaną przekazane tutaj fragmenty tego tekstu

3:46oraz poszczególne zmienne, które się w nim znajdują.

3:50Taki zapis powinieneś kojarzyć chociażby ze styled components.

3:55Kolejnym już tematem, który zdecydowanie kojarzy nam się z ESNext są funkcje

4:01strzałkowe, czyli arrow function. Są to funkcje które wyglądają w ten sposób. Możemy je

4:06wywoływać dokładnie tak, jak wywołujemy zwykłe funkcje.

4:10Natomiast zapis bez wątpienia się tutaj różni. W tym przykładzie mamy tutaj

4:14parametry oraz ciało funkcji a samą funkcję sygnalizujemy z pomocą fat arrow.

4:20Tak zapisana funkcja strzałkowa może być odzwierciedlana normalnym zapisem w

4:25następujący sposób. Efekt jaki tutaj uzyskaliśmy jest taki sam.

4:29Jeżeli chodzi o funkcje strzałkowe warto jeszcze pamiętać o tym, że gdy przyjmują

4:34one więcej niż jeden argument, musimy zapisać je w nawiasie.

4:37Dodatkowo, jeżeli ciało takiej funkcji zapiszemy pomijając nawiasy klamrowe, cała

4:43wartość, którą zapiszemy po strzałce, zostanie automatycznie zwrócona z tej funkcji.

4:47Natomiast wtedy musimy pamiętać o słowie kluczowym return

4:51do tego, aby zwrócić wartość.

4:53I teraz do tego pierwszego zapisu istnieje jeden wyjątek.

4:57Mianowicie chodzi o zwrócenie obiektu.

4:59Tak zapisana funkcja nie jest poprawna tak

5:02długo, dopóki nie zamkniemy tego obiektu w nawiasie.

5:06Teraz wszystko jest ok. Poza różnicą samego

5:09zapisu funkcja strzałkowa ma jeszcze jedną bardzo ważną cechę. Mianowicie jeżeli

5:14zdefiniujemy sobie tutaj taki konstruktor, posiadający właściwość play, zwracający

5:19właściwość name, to w momencie gdy na jego podstawie stworzymy nowy obiekt i wykonamy

5:24tę metodę w taki sposób, to funkcja play zwróci nam

5:27undefined.

5:28Wynika to z faktu, że w tym kontekście this wskazuje na obiekt globalny.

5:33Oczywiście w tej sytuacji nie jest to do końca to czego byśmy oczekiwali i aby

5:38rozwiązać ten problem możemy po prostu zamienić tę funkcję na funkcję strzałkową.

5:44I dopiero wtedy wynik będzie zgodny z oczekiwaniem.

5:47Działa to dlatego, że w przypadku funkcji

5:49strzałkowych this nie jest określane na podstawie kontekstu wykonania, tylko na

5:54podstawie tego co otacza tę funkcję, a w tym przypadku jest to nasz obiekt.

6:00Następnym tematem w kolejce są klasy, czyli

6:03po prostu usprawnienie składni dla modelu dziedziczenia opartego o prototypy.

6:07Klasy oczywiście mogą posiadać swoje właściwości i metody.

6:11Dodatkowo możemy też rozszerzać klasy, korzystając z dziedziczenia.

6:15Wtedy warto wiedzieć, że w sytuacji gdy chcemy wykonać konstruktor klasy, z której

6:20dziedziczymy, musimy uruchomić metodę super. Więc w tej sytuacji, w momencie gdy

6:25tworzę dodatkowe metody oraz instancje tej klasy, mam dostęp zarówno do właściwości

6:30tej klasy, i w tym przypadku jest to właściwość name oraz do samego typu, czyli

6:35mamy tutaj song, który pochodzi z tej klasy.

6:38Nie ma najmniejszych wątpliwości, że zanim

6:41rozpoczniesz naukę TypeScriptu zdecydowanie powinieneś wiedzieć co tutaj się dzieje.

6:46Zanim przejdziemy dalej pamiętaj tylko o tym, że jeżeli teraz zrobimy tak

6:52to klasa, którą tutaj mamy w przypadku

6:54tak zwanego starego JavaScriptu, wyglądałaby w ten sposób.

6:58Zatem jak widzisz mamy tutaj konstruktor oraz metody przypisane do prototypu.

7:04Przechodząc już do kolejnego tematu możemy pomówić o operatorach rest oraz spread.

7:09Mianowicie w przypadku funkcji zazwyczaj musimy wiedzieć dokładnie jakie parametry

7:14ta funkcja posiada. Od jakiegoś czasu mamy jednak do dyspozycji parametr rest.

7:19Dzięki niemu jesteśmy w stanie przekazać dowolną ilość argumentów do funkcji.

7:23Jak widzisz po prostu te wszystkie

7:25dodatkowe parametry zostały przekazane jako tablica.

7:29Podobnie możemy korzystać z operatora spread.

7:32Przykładowo jeżeli chcielibyśmy przekazać

7:34elementy tej tablicy jako parametry funkcji to w momencie, gdy zrobimy tak,

7:39nie do końca otrzymamy rezultat, o który nam chodzi.

7:42Natomiast wystarczy zrobić tak, aby osiągnąć pożądany efekt.

7:46Po prostu korzystając z takiego zapisu,

7:49przekazaliśmy poszczególne elementy jako kolejne argumenty tej funkcji.

7:53W tym wszystkim warto jeszcze wiedzieć, że taki operator możemy wykorzystać np.

7:58do łączenia obiektów bądź też po prostu

8:00przekazywania właściwości konkretnych obiektów.

8:02No i podobnie możemy zastosować go w przypadku tablic.

8:07Poza operatorami rest oraz spread możemy

8:10korzystać również z destrukturyzacji. I pierwszy przykład destrukturyzacji może

8:15wyglądać tak, że mamy tutaj elementy tablicy, które chciałbym zapisać w

8:19zmiennych. Zamiast robić to ręcznie, odwołując się do poszczególnych elementów,

8:23mogę wykorzystać destrukturyzację, aby

8:26w jednej linii utworzyć cztery nowe zmienne. W ten sposób wartości zostały

8:31przyporządkowane odpowiednio do tych identyfikatorów.

8:34Podobnie sprawa wygląda z obiektami.

8:36Możemy wyciągać poszczególne właściwości do zmiennych w taki sposób.

8:40Dodatkowo to co tutaj zrobiłem to, jak widzisz po dwukropku, zapisałem tzw.

8:45alias właściwości.

8:46Dzięki temu wartość właściwości X zostanie zapisana w zmiennej horizontal.

8:52No i oczywiście wszystko tutaj działa.

8:54Taka destrukturyzacja obiektów bywa szczególnie

8:57przydatna w momencie, gdy mamy do czynienia z parametrami funkcji.

9:00Mianowicie wyobraź sobie, że mamy tutaj obiekt odpowiedzi, który zawiera zagnieżdżone dane.

9:06Gdybyśmy napisali teraz funkcję obsługującą te dane, wewnątrz niej

9:10musielibyśmy zadbać o odpowiedni dostęp do nich.

9:13Ale korzystając tutaj z destrukturyzacji w ten

9:16sposób, mam bezpośredni dostęp do właściwości value.

9:20No i to wszystko sprawia, że destrukturyzacja jest niesamowicie przydatna.

9:24Poza nią warto jeszcze wspomnieć o pętli

9:27for of, bo z pewnością słyszałeś wcześniej o pętli for in, która iteruje po

9:32elementach tablicy, dając nam dostęp do indeksu tych elementów.

9:36W przypadku pętli for of jest całkiem

9:38podobnie z tą różnicą, że mamy dostęp do wartości tych elementów.

9:42W każdym razie for of to ciekawostka, która czasem może się przydać.

9:47I tym sposobem przechodzimy do ostatniego tematu, czyli obietnic.

9:51Obietnice stały się można powiedzieć

9:53rewolucją w kontekście podejścia do kodu asynchronicznego ze względu na to, że

9:58sprawdzają się w tym przypadku zdecydowanie lepiej niż callbacki.

10:01Zobaczmy tutaj prosty przykład funkcji,

10:03która zwraca obietnicę, wykonując proste sumowanie dwóch elementów.

10:08Akcję tę zasymulujemy jako asynchroniczne, korzystając z funkcji setTimeout.

10:13W przypadku obietnicy trzeba pamiętać o tym, że nie możemy ot tak odczytać jej

10:17wartości. Próbując ją podejrzeć w taki sposób otrzymuje obiekt obietnicy.

10:22Obietnica może mieć jeden z trzech stanów, czyli pending, fullfilled oraz rejected.

10:27I teraz, aby odczytać jej wartość, musimy

10:30posłużyć się metodą then. No i w tej sytuacji otrzymujemy stosowny komunikat.

10:35Jednak gdyby z jakiegoś powodu obietnica

10:37zakończyła się błędem, informację o tym błędzie moglibyśmy odczytać, korzystając z metody catch.

10:43No i dokładnie tutaj mamy nasz wynik. Do obietnic jeszcze większą rewolucję

10:48przyniosła składnia async await. W skrócie umożliwia ona pisanie kodu

10:52asynchronicznego prawie tak samo wygodnie jak synchronicznego.

10:56Aby skorzystać z tej składni musimy nasz kod

10:58zamknąć w funkcji i poprzedzić ją słowem kluczowym async.

11:01Oczywiście tylko w tej sytuacji jest to samowywołująca się funkcja,

11:06natomiast tak być nie musi.

11:07I teraz aby bezpośrednio odczytać wartość

11:10tej obietnicy, poprzedzam ją słowem kluczowym await.

11:13Dzięki temu już w kolejnej linii mogę odczytać jej wartość.

11:17Tutaj oczywiście minusem jest fakt, że aby

11:19wychwycić błąd z takiej obietnicy musielibyśmy skorzystać z bloku try catch.

11:24No i tym sposobem kończymy powtórkę nowego JavaScriptu i przechodzimy już do TypeScriptu.

Kod

promise · 11 min

// Promise 
const myPromise = function(a, b) {
  return new Promise((res, rej) => {
    const sum = a + b
    setTimeout(res(sum), 500);
  })
};

console.log(myPromise(1, 3));
myPromise(1, 2)
  .then(result => `Promise finished with result: ${result}`) /*?*/
  .catch(err => err); /*?*/

(async function() {
  const result = await myPromise(3, 4);
  console.log(result);
}());

for of · 10 min

// for .. of
const items = ['a', 'b', 'c'];
for (let item in items) {
  item;
}

for (let item of items) {
  item;
}

destructuring · 9 min

// Destructuring
const args = [1, 2, 3, 4];
const [a, b, c, d] = args;
console.log(a, b, c, d);

const coords = { x: 1, y: 10 };
const { x: horizontal, y } = coords;
horizontal; /*?*/
y; /*?*/

const response = { data: { value: 5 } };
function render({ data: { value } }) {
  console.log(value);
}
render(response);

rest i spread · 8 min

// Rest & spread
function manyParams(x, y, ...rest) {
  console.log(x, y, rest);
}

// manyParams(1, 2, 3, 4, 5);

const args = [6, 7, 8, 9];
manyParams(args);
manyParams(...args);

const name = { name: 'eduweb' };
const website = { 'www': 'eduweb.pl' };
const profile = { ...name, ...website }; /*?*/

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; /*?*/

let i const · 2 min

// let & const
var foo = true;
foo = 10; /*?*/
var foo = 5; /*?*/
if (foo) {
  var foo = false; /*?*/
}

foo; /*?*/

let bar = true;
if (bar) {
  let bar = false; /*?*/
}

bar; /*?*/

const baz = true;
baz = false; /*?*/

constructor function · 6 min

// Constructor function
function Song(name) {
  this.name = name;
  this.play = function() {
    return this.name; /*?*/
  }
}

const bestSongEver = new Song('Iron man');
setTimeout(bestSongEver.play);

arrow functions · 5 min

// Arrow functions 
const move = x => `moved to ${x}`;
move(5); /*?*/

const moveClassic = function(x) {
  return 'moved to ' + x;
}
moveClassic(5); /*?*/

const multiParams = (x, y) => `moved to ${x} then y`;
const withBody = (x) => {
  return `moved to ${x} then y`
};
const returnObj = (x) => ({
  message: `moved to ${x} then y`
});

template strings · 4 min

// Template strings
const user = 'eduweb';
const message = `Hello ${user}!`; /*?*/
const longMessage = `
  First line...
  ...and a second one 🤯
`;

function tagged(literals, ...placeholders) {
  console.log(literals, placeholders);
}
tagged`tag call is ${'OK'}. Nice, hm?`;

hoisting · 3 min

// Hoisting
a; /*?*/
var a = 5;

// b; /*?*/
let b = 5;

const obj = {};
obj.id = 10;
obj.id; /*?*/

klasy · 7 min

// Classes
class Media {
  constructor(type) {
    this.type = type;
  }
}

class Song extends Media {
  constructor(name) {
      super('song');
      this.name = name;
  }
  play() {
      return `Playing ${this.type}: ${this.name}`;
  }
}

(new Song('Iron man')).play(); /*?*/

var Song = (function () {
  function Song(name) {
      this.name = name;
  }
  Song.prototype.play = function () {
      return "Playing " + this.name;
  };
  return Song;
}());