Lecții din modul (2/2)
Tipuri și aserțiuni literale
TypeScript oferă instrumente avansate pentru a restrânge posibilele valori ale variabilelor și pentru a forța compilatorul să recunoască tipuri mai specifice atunci când este necesar.
Tipuri literale
Un tip literal reprezintă o valoare exactă, unică (de exemplu, un anumit șir sau număr). Ele sunt de obicei combinate cu tipuri de uniuni:
type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;
light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLightTip aserțiuni (as)
Uneori aveți informații despre un tip pe care TypeScript nu îl poate cunoaște în momentul compilării. În aceste cazuri, puteți utiliza o aserțiune de tip folosind cuvântul cheie as:
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;Afirmația îi spune compilatorului: "Crede-mă, știu că acest element este un HTMLCanvasElement". Nu efectuează verificări sau turnări în timpul execuției; ajută doar verificatorul de tip.
Afirmații constante (as const)
Când declarăm un obiect sau o matrice cu const, TypeScript permite încă modificarea proprietăților sale interne. Adăugând as const la sfârșit, întreaga structură este înghețată și făcută doar pentru citire, transformând toate proprietățile în tipurile lor literale exacte:
const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-onlyTipuri literale șabloane
Tipurile literale de șablon sunt construite pe deasupra șirurilor de șabloane JavaScript, dar sunt utilizate în pozițiile de tip. Acestea permit combinarea mai multor tipuri literale într-unul singur:
type Size = 'small' | 'large';
type Color = 'red' | 'blue';
// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;Utilitare șiruri în tipurile literale de șabloane
TypeScript oferă tipuri speciale de utilitate pentru a manipula caractere din Tipuri literale șabloane:
Capitalize<StringType>: Scrie cu majuscule prima literă a șirului.Uncapitalize<StringType>: decuplează prima literă a șirului.Uppercase<StringType>: Convertește întregul șir în majuscule.Lowercase<StringType>: Convertește întregul șir în minuscule.
type ActionType = 'click' | 'hover';
// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;Încercați-l singur
Exercițiul 1: Direcția Unire Literală
Definiți un tip literal numit Direcție care acceptă numai șirurile „sus”, „jos”, „stânga” sau „dreapta”. Apoi declarați o funcție numită move(dir: Direction): șir care returnează șirul „Moving” urmat de direcția primită.
Afișează indiciu
Definiți mai întâi aliasul de tip cu cele patru opțiuni separate prin |, apoi declarați funcția de mutare adnotând parametrul și tipul returnat.
Soluție disponibilă după 3 încercări
Exercițiul 2: Aserțiune pe JSON.parse
Funcția JSON.parse returnează orice tip în mod implicit. Modificați funcția parseUser astfel încât rezultatul JSON.parse(json) să fie afirmat ca tip { nume de utilizator: șir } folosind cuvântul cheie as.
Afișează indiciu
Adăugați „ca { nume de utilizator: șir }” imediat după apelul JSON.parse(json).
Soluție disponibilă după 3 încercări
Exercițiul 3: Literal șablon pentru evenimente
Având în vedere tipurile de Stare și Acțiune, definiți un tip de șir de șablon numit Eveniment în formatul „Stare-Acțiune” (de exemplu, „deschidere-clic”).
Afișează indiciu
Folosiți backtick-uri pentru a defini tipul și sintaxa ${Status}-${Action} din interior.
Soluție disponibilă după 3 încercări
Exercițiul 4: Tipul literal al șablonului cu majuscule
Definiți un eveniment de tip literal care poate fi „clic” sau „hover”. Apoi, utilizați Template Literal Types pentru a declara un tip de EventHandler care reprezintă șiruri în formatul on urmat de numele evenimentului cu majuscule (adică, „onClick” sau „onHover”).
Afișează indiciu
Utilizați Capitalize<Event> în interiorul literalului șablon pentru a scrie cu majuscule prima literă a evenimentului.
Soluție disponibilă după 3 încercări