Typy literalne i asercje

TypeScript oferuje zaawansowane narzędzia do ograniczania możliwych wartości zmiennych oraz do zmuszania kompilatora do rozpoznawania bardziej szczegółowych typów, gdy jest to konieczne.

Typy Literalowe / Dosłowne (Literal Types)

Typ literalny reprezentuje pojedynczą, ściśle określoną wartość (na przykład konkretny napis lub liczbę). Zazwyczaj są one łączone z uniami:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Errore: "blue" non è assegnabile a TrafficLight

Asercje Typu (as)

Czasami posiadasz informacje o typie, których TypeScript nie może pozyskać w czasie kompilacji. W takich przypadkach możesz użyć asercji typu za pomocą słowa kluczowego as:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

Asercja mówi kompilatorowi: "Zaufaj mi, wiem, że ten element jest typu HTMLCanvasElement". Nie wykonuje ona żadnego sprawdzania ani rzutowania (castowania) w czasie wykonywania kodu (runtime) — służy wyłącznie do pomocy analizatorowi typów (type checker).

Asercje Const (as const)

Kiedy deklarujemy obiekt lub tablicę za pomocą słowa kluczowego const, TypeScript wciąż pozwala na modyfikowanie ich wewnętrznych właściwości. Dodając as const na końcu, zamrażamy całą strukturę i czynimy ją tylko do odczytu (readonly), konwertując wszystkie właściwości do ich dokładnych wartości literalnych:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Errore: l'array è di sola lettura (readonly)

Szablony typów tekstowych (Template Literal Types)

Szablony typów tekstowych opierają się na szablonach ciągów znaków (template strings) z JavaScriptu, ale służą do definiowania typów. Pozwalają one na łączenie wielu typów literalnych w jeden:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Crea l'unione: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

Narzędzia tekstowe w szablonach typów tekstowych

TypeScript oferuje specjalne typy pomocnicze (utility types) do manipulowania znakami wewnątrz szablonów typów tekstowych:

• Capitalize<StringType>: Zamienia pierwszą literę ciągu znaków na wielką.
• Uncapitalize<StringType>: Zamienia pierwszą literę ciągu znaków na małą.
• Uppercase<StringType>: Konwertuje cały ciąg znaków na wielkie litery.
• Lowercase<StringType>: Konwertuje cały ciąg znaków na małe litery.

type ActionType = 'click' | 'hover';

// Genera: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

Spróbuj sam

Ćwiczenie 1: Unia wartości literalnych Direction

Ćwiczenie 2: Asercja na wyniku JSON.parse

Ćwiczenie 3: Szablon typu tekstowego dla zdarzeń

Ćwiczenie 4: Szablon typu tekstowego z Capitalize