Kurs TypeScript od podstaw

Dzisiaj zajmiemy się moim ulubionym językiem programowania. Kurs TypeScript, który właśnie rozpoczynasz jest odpowiedzią na jego rosnącą popularność. Choć w poprzednich latach stale się rozwijał, to przewiduje się, że 2021 będzie rokiem jego masowej adopcji.

W TypeScript o błędach mówi nam kompilator. W JavaScript – klient. Autor nieznany 😉

TypeScript – co to jest?

W skrócie: JavaScript na sterydach. O jakie sterydy chodzi? Już mówię. 🙂

TypeScript jest nadzbiorem języka JavaScript, który wzbogaca jego składnie o dodatkowe funkcje i udostępnia pomocny kompilator. TypeScript przybliża JavaScript do dojrzałych, silnie typowanych języków programowania i jest odpowiedzią na ciągłą profesjonalizację środowiska web / JS. Dodam, że można go używać zarówno na front-endzie (np. w Angularze, gdzie jest używany domyślnie) oraz na back-endzie (np. w NodeJS).

Dlaczego kurs TypeScript jest potrzebny?

Choć JavaScript stanowi w pełni działający kod TypeScript, tak w drugą stronę to nie działa. Łączy ich relacja jak kwadrat z prostokątem, bo jeden jest zawarty w definicji drugiego. Potrzeba uczenia się tego języka lub nawet tworzenia osobnych kursów na jego temat spowodowana jest jego stopniem trudności. Mówiąc krótko – w TS nie przejdzie fuszerka i trzeba zadać sobie pewien trud, by uzyskać w nim biegłość.

TypeScript vs JavaScript

Porównując owy trud nauki do standardowego JavaScript, musimy zwrócić uwagę na kilka rzeczy. TypeScript w porównaniu do JS:

  1. Jest kompilowany do JavaScript
  2. Pozwala na szybsze wychwycenie błędów, choć nie zgodzę się, że development trwa dzięki szybciej
  3. Wymaga bardziej rozbudowanego setupu, nie można od tak użyć go w konsoli przeglądarki
  4. Zawiera statyczne lub silne typowanie
  5. „W TypeScript o błędach mówi nam kompilator. W JavaScript – klient.”
  6. Wspaniałe wsparcie najnowszych standardów EcmaScript, czyli „najnowszego JSa”, którego niektórzy nadal nazywają es6 🙂
  7. Dzięki swojej niezawodności jest świetny do wszystkich rodzajów aplikacji, poza szybkimi prototypami, które nie mogą pójść na kompromisy jakościowe

Sens nauki TypeScript w 2021 roku

Jak to powiedział mistrz Makłowicz o w połowie pełnej lampce wina – ma głęboki sens. Świetne dane dostarcza pewien software house w swoim raporcie State of Front-End 2020. Szczególnie w sekcji #frameworks, w której poruszony został wątek TypeScript.

Generalnie, TypeScript szturmuje rynek webowy i nie bierze jeńców – podobnie jak zrobił to edytor kodu VS Code. Jego rajd rozpoczął się od mariażu z Angularem, od którego proponuję zacząć swoją przygodę z programowaniem. W międzyczasie go pokochano jako dojrzałego, dopracowanego i niezawodnego brata JS i tak już pozostało.

Kurs TypeScript od zera, czyli podstawy podstaw

Na wstępie zakładam u Ciebie podstawową znajomość JS lub innego języka programowania – w przeciwnym razie warto tę wiedzę uzupełnić. Jeśli jeszcze nie programujesz, przeczytaj proszę Programowane – jak zacząć?

Typowanie

function followTechporadnik(a1:number, a2:string) { ... }

Na powyższym przykładzie widać, że argumenty funkcji follwoTechporadnik posiadają zadeklarowany typ, co oznacza mniej więcej tyle, że a1 nie zostanie przepuszczone jako string (np. nie może mieć wartości ‚a1 to dziwna nazwa’. Za to jak najbardziej przyjmie wartość 5. Dokładnie odwrotna sytuacja ma miejsce w przypadku a2.

Dostępne typy podstawowe:

  • Any :any – dowolny typ
  • Boolean :boolean – true lub false
  • Number :number – numer
  • String :string – ciąg znaków
  • Array :any[] lub Array any – tablica, oczywiście zamiast any może być cokolwiek z listy
  • Tuple (bardziej skomplikowany) – krotka (tak, wiem, wtf jest krotka), reprezentuje ona konkretny ksztalt np. tablicy, typu [string, number]
  • Enum (bardziej skomplikowany) – wartość do wyboru ze zdefiniowanej wcześniej grupy
  • Unknown :unknown – typ jak w starym dobrym JS, nieznany
  • Void :void – typ pusty, który np. służy do typowania funkcji, które niczego nie zwracają
  • Null / Undefined :null / :undefined – dokładnie to, co myślisz

… i kilka innych, jak Object czy Never.

Dostępnych typów jest o wiele więcej, jednak na początku nie będziesz ich używać. Zachowaj je do momentu, w którym zaczniesz naukę w stylu Just in Time, zamiast obecnego Ahead of Time. 🙂

Nowoczesna składnia

Jak wspomniałem wcześniej, w TypeScript dostępna jest z miejsca składnia w najnowszym standardzie EcmaScript. Przykładem są klasy oraz typowo typescriptowe – interfejsy.

Składnia klasy znana jest z obiektowych języków programowania:

class Techporadnik { constructor(arg1: number) {} }

Interfejsy z kolei są deklarowanym kształtem obiektu.

interface ITechporadnik { a1: number, a2: string }

Oczywiście składnia jest w pełni zgodna z ESNext i znacznie ją rozszerza, aczkolwiek na tym etapie to zostawimy.

Problemy z typami

Projekty webowe stoją na masie zależności NPM – niestety wiele z nich nie jest napisanych w TypeScript, co powoduje pewien problem. Być może już się domyślasz o co chodzi.

Jak TypeScript działa z bibliotekami bez typów?

Na pomoc przychodzą plik d.ts – odsyłam do dokumentacji.

Wstępna konfiguracja TypeScript

Aby zainstalować TypeScript, potrzebujesz:

  • NodeJS
  • NPM

Następnie warto zainstalować globalnie TypeScripta:

$ npm install -g typescript

Teraz jedyne co pozostało to skompilować nasz kod. Do tego wystarczy:

$ tsc naszPlik.ts

… i tyle. 🙂 Wynikiem będzie naszPlik.js, który będzie już gotowy do odpalenia przez przeglądarki.

Co dalej? Kurs TypeScript cz. 2?

Polecam uczyć się uczestnicząc w większym projekcie. Można poznawać gramatykę i ortografię, ale można również otrzymać do napisania esej lub uczestniczyć w dyktandach. Zdecydowanie polecam naukę poprzez działanie, a w tym tego celu polecam zapisać się do darmowej Akademii Angulara.

Jak pamiętasz, Angular działa w oparciu na TypeScript i moim zdaniem stanowi najlepszy sposób na naukę tego języka. Do tego realizacja projektów w Angularze zapewnia bardzo wiele korzyści rynkowych. If you know what I mean 🙂

Naucz się Angulara od podstaw

Naucz się programować
w Angularze od zera.

Techporadnik © 2021
IDM Przemysław Kosior • NIP: 7792508107