Lekcje modułu (2/2)
Tablice i Krotki
W języku JavaScript tablice mogą zawierać dowolne typy elementów oraz mogą dynamicznie rosnąć lub kurczyć się. TypeScript dodaje statyczną kontrolę typów, aby zagwarantować, że kolekcje pozostaną jednorodne (homogeniczne) lub będą spełniać ustaloną, stałą strukturę typów.
Tablice (Kolekcje Jednorodne)
W TypeScript istnieją dwa równoważne sposoby na zdefiniowanie typu tablicy przechowującej elementy tego samego typu:
-
Użycie typu elementu, po którym następują nawiasy kwadratowe (
[]):TSconst numbers: number[] = [1, 2, 3]; const strings: string[] = ['a', 'b', 'c']; -
Użycie typu generycznego
Array<T>:TSconst numbers: Array<number> = [1, 2, 3];
Obie składnie są w pełni poprawne, jednak pierwsza (typ[]) jest bardziej konwencjonalna i znacznie częściej spotykana w większości projektów. Jeśli spróbujesz dodać niepoprawną wartość (np. numbers.push("hello") w tablicy o typie number[]), TypeScript zgłosi błąd na etapie kompilacji.
Krotki / Tuple (Struktury o stałym rozmiarze)
Krotka (tuple) to specjalny rodzaj tablicy, która ma stałą liczbę elementów, a każdy element ma ściśle określony i z góry zdefiniowany typ odpowiadający jego dokładnej pozycji.
Przykładowo, jeśli chcemy zapisać odpowiedź HTTP złożoną z kodu statusu (liczba) oraz komunikatu (napis):
const response: [number, string] = [200, 'OK'];W tym przypadku:
- Pierwszy element (
response[0]) musi być typunumber. - Drugi element (
response[1]) musi być typustring. - Tablica musi być zainicjalizowana dokładnie dwoma elementami.
Krotki tylko do odczytu (readonly)
Ważnym szczegółem dotyczącym krotek w TypeScript jest to, że w czasie wykonywania są one wciąż zwykłymi tablicami JavaScript. Oznacza to, że metody takie jak .push() czy .pop() są technicznie dostępne i mogą modyfikować długość krotki, omijając częściowo reguły sprawdzania typów.
Aby zapobiec takiemu zachowaniu i zapewnić pełną niemodyfikowalność (immutability), możemy użyć modyfikatora readonly:
const point: readonly [number, number] = [10, 20];
// point.push(30); // Errore a tempo di compilazione!Spróbuj sam
Ćwiczenie 1: Tablica liczb
Zadeklaruj tablicę o nazwie scores, która zawiera wyłącznie liczby i jest zainicjalizowana wartościami 90, 85 oraz 95. Użyj jawnej adnotacji typu dla tablicy. Nie używaj typu any.
Pokaż wskazówkę
Użyj składni const scores: number[] = ... lub Array<number>.
Rozwiązanie dostępne po 3 próbach
Ćwiczenie 2: Krotka Współrzędne 3D
Zadeklaruj krotkę o nazwie point reprezentującą współrzędne 3D (trzy liczby dla X, Y, Z), zainicjalizowaną wartościami 10, 20, 30. Użyj jawnej adnotacji typu.
Pokaż wskazówkę
Typ krotki powinien wyglądać następująco: [number, number, number].
Rozwiązanie dostępne po 3 próbach
Ćwiczenie 3: Krotka Informacje o Położeniu
Zadeklaruj krotkę o nazwie locationInfo reprezentującą współrzędne geograficzne wraz z nazwą. Powinna zawierać: szerokość geograficzną (liczba), długość geograficzną (liczba) oraz nazwę miasta (string). Zainicjalizuj ją wartościami 41.9028, 12.4964 oraz 'Rome'.
Pokaż wskazówkę
Użyj składni definiującej krotkę z trzema elementami: [number, number, string].
Rozwiązanie dostępne po 3 próbach
Ćwiczenie 4: Krotka Wpis do Logu
Zadeklaruj krotkę o nazwie logEntry reprezentującą wpis do logu. Powinna zawierać po kolei: znacznik czasu (liczba), poziom ważności (string) oraz komunikat o błędzie (string). Zainicjalizuj ją znacznikiem czasu 1716300000, poziomem 'INFO' i komunikatem 'Application started'.
Pokaż wskazówkę
Użyj składni definiującej krotkę z trzema elementami: [number, string, string] i przypisz wskazane wartości.
Rozwiązanie dostępne po 3 próbach