Jak wiesz, w aplikacji, którą będziemy budować skorzystamy z Angulara w wersji 4.
Chciałam pominąć konieczność nauki TypeScriptu i pisać aplikację w czystym JavaScript. Problem w tym, że byłoby to dla Ciebie większe utrudnienie niż nauka samego TypeScriptu. Dlaczego? Większość przykładów, dokumentacja Angulara, wszystko bazuje na TypeScript’cie. A sam TypeScript nie powinna sprawić Ci większych problemów.
Co znajdziesz w artykule?
- TypeScript – czyli co?
- Materiały do nauki
- Praktyka: TypeScript Playground, TypeScript na Codepen’ie, Visual Studio Code & TypeScript.
Poziom: podstawowy/średniozaawansowany
Wymagania wstępne:
- Znajomość linii komend.
- Znajomość JavaScript (przynajmniej podstawowa).
- Znajomość ES6, przynajmniej podstaw (ale można nadrobić w trakcie).
- Zainstalowany Node JS, umiejętność instalowania paczek (NPM).
Praca domowa:
- Zainstaluj TypeScript na swoim komputerze.
- Stwórz swój pierwszy plik .ts.
- Skompiluj go do postaci .js.
- Uruchom plik .js z wykorzystaniem Node JS.
- Zgłęb mocniej temat TypeScript’u z wykorzystaniem np. materiałów przedstawionych w artykule. Aplikacja tutorialowa będzie napisana z wykorzystaniem TypeScriptu.
Wszystkie informacje jak to zrobić, znajdziesz w artykule. W razie problemów -śmiało dawaj znać na naszej Tutorialowej Grupie Wsparcia.
Od czego zacząć?
Czym jest TypeScript?
Kolejną technologią, którą wykorzystamy w naszym projekcie, ale również…
„Nakładką” na JavaScript. Językiem programowania, kompilowalnym do JavaScript. Czyli to nie jest tak, że plik .ts (rozszerzenie plików dla TypeScriptu) wyląduje na serwerze. Nie, kod typescript’owy musi być skompilowany do JavaScript. I to JavaScript ląduje na serwerze.
Więc po co TypeScript?
Nakładki tego typu tworzone są, by naprawiać/ułatwiać pewne rzeczy, przyśpieszać pracę. W tym przypadku chyba jego największym plusem jest sprawdzanie typów.
Jeśli ktoś dłużej pisze w JavaScript i pracował przy dużych projektach, wie jakie problemy może sprawić podanie jako argument Stringa zamiast Number. A wierzcie mi, że takie problemy się zdarzają. Co może być efektem?
Wpisz w konsoli:
|
1 |
2 + „2” |
Jak myślisz, jaki wynik uzyskasz?
Nie, nie 4. „22” .
Teraz pomyśl, że taki błąd wkradł się do aplikacji, w których wykonujesz jakieś obliczenia. I jest to tylko krok pośredni pomiędzy danymi wejściowymi, a wynikiem. Wynik może być „kosmiczny”.
A to tylko przykład tego, co oferuje TypeScript.
Materiały do nauki
Jak wiesz sama sięgnęłam do niego przy okazji tego projektu.
Mogę Ci polecić na pewno TypeScript Crash Course na Traversy Media, Youtube (kanał również polecam).
Poza tym oficjalna dokumentacja TypeScript’u i TypeScript in 5 minutes.
Oraz bardziej rozbudowany Handbook.
Teraz tak: sama dość szybko przeszłam od teorii do praktyki. I zdecydowanie sugeruję nie rozpieszczać się z nauką TypeScript’u. Ogarnąć podstawy i wykorzystać go praktycznie. Za chwilę przejdziemy do Angulara 4. Będzie okazja 😉
Uwaga! TypeScript wykorzystuje sporo spośród możliwości oferowanych przez ES6. Warto je poznać. Na temat ES6 będę niestety dopiero pisać.
No, ale skoro o praktyce mowa, to jak w ogóle zacząć?
TypeScript Playground
Po pierwsze warto zajrzeć do TypeScript Playground i przejrzeć przykłady:
Po lewej macie kod TypeScriptowy, po prawo JavaScriptowy.
Pierwszy z nich pokazuje jeden z błędów, które TypeScript rozwiązuje. Tworząc nowy obiekt Greeter, podaliśmy jako argument obiekt zamiast stringa. JavaScript tego nie wyłapie jako błąd. Nie da nam o tym znać. Po wywołaniu alert(greeter.greet()) zobaczymy okienko z „Hello, [object Object]” zamiast „Hello, world”.
Jak TypeScript rozwiązuje taki problem? Zajrzyjcie do następnego przykładu.
|
1 2 3 |
function Greeter(greeting: string) { this.greeting = greeting; } |
Argument funkcji Greeter ma przypisany typ. String. TypeScript powiadomi nas jeśli spróbujemy przypisać coś innego.
Klikając w kolejne przykłady przekształcamy nasz kod kolejno do:
- postaci używającej typów
- postaci używającej klas
Kolejne przykłady bazują już na czymś innym. Ciężko by było pokazać dziedziczenie na powyższym kodzie.
Przykład z dziedziczeniem:
To nie jest tak, że nie da się tego napisać w JavaScript. Jak widzisz – da się. W TypeScript po prostu niektóre rzeczy są prostsze.
Aaa… tylko nie ma czegoś takiego, że uczysz się TypeScriptu zamiast JavaScriptu! JavaScript to podstawa.
Codepen?
Playground to jedno. Możesz tam się pobawić, ale prędzej czy później będziesz potrzebować czegoś więcej. Dodam, że jeśli tym czymś więcej będzie dla Ciebie Codepen (da się), to musisz w ustawieniach okna JS wybrać TypeScript jako JavaScript Preprocessor. (w ustawienia wejdziesz klikając zębatkę koło „JS”)
Edytor kodu
Ja jednak polecam sięgnąć do jakiegoś edytora kodu, np. Visual Studio Code, o którym nawiasem niedawno pisałam.
Jak tam zacząć pracę z TypeScript’em?
Nade wszystko: zainstalować TypeScript z wykorzystaniem polecenia:
|
1 |
npm install -g typescript |
Dlaczego -g? Ponieważ chcemy mieć do niego dostęp globalnie, a nie tylko w jednym projekcie.
Stworzyć plik. Nadać mu rozszerzenie .ts.
Załączyć dowolną treść, np.:
|
1 |
console.log(‘Hello, TS!’); |
Korzystając z linii komend, wykonać polecenie:
|
1 |
tsc NAZWA_PLIKU.ts |
które wygeneruje nam plik NAZWA_PLIKU.js.
Jak go teraz uruchomić?
|
1 |
node NAZWA_PLIKU.js |
Oczywiście możesz skorzystać z innej linii komend (systemowej, Git Bash, PowerShell). Jeśli chcesz skorzystać z Terminalu wbudowanego w Visual Studio Code, a nie znasz komendy, skorzystaj z palety komend: Ctrl + Shift + P.
Nawiasem, skrót wywołania terminalu to: Ctrl + ` <- ten znaczek znajdziesz nad klawiszem Tab 😉
Jeszcze lepszą opcją jest dodanie do tsc NAZWA_PLIKU.ts opcji –watch
|
1 |
tsc NAZWA_PLIKU.ts --watch |
Sprawi ona, że przy każdym zapisie automatycznie odbędzie się kompilacja TS do JS, a nasz plik .js zostanie zaktualizowany bez konieczności wywoływania tsc NAZWA_PLIKU.ts po każdej zmianie.
To tyle na dzisiaj. Pracę domową masz. Nie jest zbyt absorbująca. Za pare dni ukaże się wpis dotyczący Angular CLI, gdzie wygenerujemy projekt naszej pierwszej aplikacji. Omówimy jego strukturę. I powoli zaczniemy wykorzystywać w praktyce dotychczas zebraną wiedzę.
Powodzenia!
P.S. Sorry za jakość GIF’ów. Muszę jeszcze nad tym popracować. Ale mam nadzieję, że pomysł Ci się spodoba 😉
