0:00 / 0:00

TypeScript: Instalacja

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:00Wygląda na to, że jesteśmy już prawie gotowi do tego, aby zacząć pracę z TypeScriptem.

0:04Oczywiście wcześniej musimy go zainstalować.

0:07Na szczęście sam ten proces jest wyjątkowo prosty.

0:10Przede wszystkim upewnij się, że posiadasz

0:12NodeJS w swoim systemie i co prawda zakładam, że na tym etapie nauki masz już

0:17to zrobione, ale zadbaj o to, aby zainstalować najnowszą wersję.

0:20Oczywiście to wszystko możesz zrobić na stronie nodejs.org.

0:24Na tym etapie akurat mogę Ci jeszcze polecić zainstalowanie paczki 'n'.

0:28Rolą tego narzędzia jest ułatwienie

0:31zarządzania wersjami NodeJS, zainstalowanymi w naszym systemie.

0:35Wygląda to tak, że po instalacji Node'a oraz

0:37paczki n, możemy łatwo z poziomu terminala zarządzać zainstalowaną wersją. Albo

0:43wpisujemy tutaj bezpośrednio wersję, która nas interesuje albo bez jej

0:47podawania wybieramy te, które do tej pory instalowaliśmy.

0:50W każdym razie jest to szczególnie istotne

0:52w momencie, gdy pracujemy na różnych projektach, wykorzystujących różne wersje

0:57Node'a. W temacie instalacji Node'a to wszystko.

1:00Teraz zobaczmy co mamy w naszym projekcie.

1:02Są tutaj oczywiście plik TypeScript, wewnątrz którego będziemy zapisywać kod naszej aplikacji.

1:08Następnie mamy indeks HTML, wewnątrz

1:10którego w tej chwili podłączyliśmy wyłącznie plik "app.js".

1:13I jeżeli zastanawiasz się dlaczego mamy tutaj JS a nie TS to wynika to z faktu,

1:18że oczywiście kod TypeScript będziemy tłumaczyć do JavaScript'u.

1:22Tymczasem ostatni plik, który aktualnie

1:24znajduje się w naszym projekcie to prosty package json.

1:27Tego akurat będziemy potrzebować szczególnie w kolejnych lekcjach, natomiast

1:31tymczasem to czego potrzebuję to terminal.

1:34To właśnie z jego pomocą zainstalujemy teraz TypeScript.

1:37W tym celu albo wykorzystujemy nmp albo yarn.

1:40To już zależy wyłącznie od Ciebie.

1:42Dodatkowo na tym etapie, jeżeli masz taką

1:45ochotę, możesz zainstalować najnowszą wersję TypeScriptu.

1:48Natomiast my pozostaniemy przy stabilnym buildzie.

1:51Na tym etapie mój system wymaga ode mnie

1:53jeszcze uruchomienia tego polecenia w trybie super user.

1:58No i teraz możemy zweryfikować tę instalację, wykonując takie polecenia.

2:03Swoją drogą komendę tsc będziemy

2:05wykorzystywać jeszcze kilka razy, ponieważ jest to tzw.

2:09TypeScript compiler. W każdym razie mamy tutaj potwierdzenie

2:12zainstalowanej wersji TypeScriptu, więc jesteśmy gotowi do tego, aby pójść dalej.

2:16Zapraszam Cię więc do kolejnej lekcji.