TypeScript — podstawy języka: typy, interfejsy i klasy

Angular pisze się w TypeScript, więc zanim zbudujesz cokolwiek poważniejszego niż jeden przycisk, musisz poznać ten język. Dobra wiadomość: jeśli znasz C#, TypeScript będzie Ci się wydawał bardzo znajomy — silne typowanie, klasy, interfejsy — to te same koncepcje, które poznałeś w dziale programowania obiektowego, tylko zapisane trochę inną składnią i finalnie kompilowane do zwykłego JavaScriptu.

Czym jest TypeScript? To język stworzony przez Microsoft jako NADZBIÓR JavaScriptu — każdy poprawny kod JavaScript jest jednocześnie poprawnym kodem TypeScript, ale TypeScript DODAJE do niego system typów (podobny do tego, co znasz z C#) i inne udogodnienia (interfejsy, klasy w nowoczesnym stylu, generyki). Przeglądarki NIE rozumieją TypeScriptu bezpośrednio — kod .ts jest KOMPILOWANY (a właściwie "transpilowany") do zwykłego JavaScriptu, zanim trafi do przeglądarki. Ten proces dzieje się automatycznie w tle, gdy uruchamiasz projekt Angular.

Dlaczego typy są tak ważne? W zwykłym JavaScript zmienna może w jednej linijce być liczbą, a w następnej stringiem — co prowadzi do trudnych do wyśledzenia błędów. TypeScript pozwala zadeklarować, JAKIEGO typu jest dana zmienna, i zgłasza błąd KOMPILACJI (czyli ZANIM program się uruchomi), jeśli spróbujesz przypisać niewłaściwą wartość — dokładnie ta sama korzyść, którą daje silne typowanie w C#.

Konstrukcja TypeScript	Odpowiednik w C#	Przykład
let x: number = 5;	int x = 5; (choć TS ma tylko jeden typ liczbowy)	liczby całkowite i zmiennoprzecinkowe to w TS TEN SAM typ number
let s: string = "cześć";	string s = "cześć";	teksty
let czyGotowe: boolean = true;	bool czyGotowe = true;	wartości logiczne
let lista: number[] = [1, 2, 3];	List<int> lista = new() {1,2,3};	tablice/listy
interface Produkt { nazwa: string; cena: number; }	podobne do klasy z samymi właściwościami (bez logiki)	opis KSZTAŁTU obiektu, bez implementacji
class Produkt { ... }	class Produkt { ... }	klasa z polami I metodami — bardzo podobna składnia do C#
function suma(a: number, b: number): number { ... }	int Suma(int a, int b) { ... }	funkcja z typowanymi parametrami i typem zwracanym

Interfejsy — opis "kształtu" danych. W TypeScript interfejs (interface) opisuje, JAKIE właściwości musi mieć obiekt, bez definiowania żadnej logiki — bardzo przydatne do opisania struktury danych przychodzących z backendu (np. odpowiedzi JSON z Web API C#, pełne omówienie w lekcji 12). To trochę jak model danych z C# (klasa z samymi właściwościami), tylko bez potrzeby tworzenia instancji przez new.

Typy opcjonalne i null. Znak zapytania po nazwie właściwości (cena?: number) oznacza, że ta właściwość jest OPCJONALNA (może nie istnieć w ogóle) — podobna koncepcja do double? w C#, choć techniczne działanie różni się w szczegółach.

Konfiguracja kompilatora — plik tsconfig.json. Określa, jak ściśle TypeScript sprawdza typy, do jakiej wersji JavaScriptu kompiluje kod, i inne ustawienia — w projektach Angular jest generowany automatycznie przez Angular CLI, zwykle nie trzeba go ręcznie modyfikować na początku nauki.