Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku (9 / 10)

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:

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:

typescript playground

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.

Argument funkcji Greeter ma przypisany typ. String. TypeScript powiadomi nas jeśli spróbujemy przypisać coś innego.

typescript example

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:

typescript inheritance

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”)

typescript codepen

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:

Dlaczego -g? Ponieważ chcemy mieć do niego dostęp globalnie, a nie tylko w jednym projekcie.

Stworzyć plik. Nadać mu rozszerzenie .ts.

via GIPHY

Załączyć dowolną treść, np.:

via GIPHY

 

Korzystając z linii komend, wykonać polecenie:

które wygeneruje nam plik NAZWA_PLIKU.js.

Jak go teraz uruchomić?

via GIPHY

 

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.

via GIPHY

 

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

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 😉

Series Navigation<< Visual Studio Code na startAngular CLI & Struktura generowanego projektu >>
  • Czekam na więcej!

    PS Jakby można prosić o możliwość powiększania zdjęć (tak, wiem, że mogę sobie przejść na docelową stronę i tam zobaczyć przykłady 😉 )

  • Łukasz Tomalczyk

    Zasiadamy do kompów !!

  • Czesław Wapno

    TypeScript z odpowiednio restrykcyjnym TSLintem mocno poprawiają czytelność kodu i, jak zostało wyżej opisane, redukują liczbę „głupich” błędów. Jednocześnie powstały kod jest bardziej w stylu „korpo” – mocno „przegadany”, zwyczajnie trzeba go więcej do osiągnięcia nawet prostych celów. Idealnie nadaje się do dużych projektów, przez które przewija się dużo osób, ale kiedy w domu dłubię przy czymś własnym, zazwyczaj zostaję przy nietypowanym ES6. Chyba że mówimy o nowym Angularze – tam TS to praktycznie must have.

  • Łukasz Tomalczyk

    Przeleciałem kurs TypeScripta z YT który był podany w artykule i muszę stwierdzić ze wygląd to na banalnie proste. Jakbym pisał w C# 🙂 tylko nie kumam po co mi ten typescript? tzn wiem.. do zarządzania JS z wyższego poziomu. Ale to znaczy że będę mógł też min sterować html, css? zarobić animacje itp ?

  • Dobry wpis! Polecam wszystkim TypeScript 😉 Swego czasu też napisałem kurs TypeScript i cały czas pracuję nad kolejną częścią 🙂 Zobacz czy może znajdziesz tam coś, co Cię zainspiruje. https://typeofweb.com/kurs/typescript/