Tablouri tipizate
Un tuplu este un tablou tipizat cu o lungime fixă și un tip fix pentru fiecare poziție.
Tuplurile sunt utile deoarece fiecare element al tabloului are un tip de valoare cunoscut.
Pentru a defini un tuplu, scrie tipul fiecărui element, în ordine, între paranteze drepte.
Primul exemplu are un număr, un boolean și un șir de caractere, în această ordine. Al doilea exemplu pune valorile în ordine greșită.
Notă: Chiar dacă avem tot un boolean, un string și un number, ordinea contează într-un tuplu, așa că a doua atribuire este o eroare.
Exemplu
ourTuple trebuie să conțină un number, apoi un boolean, apoi un string. Atribuirea corespunde, așa că nu apare nicio eroare.
ourTuple cu tipul de tuplu [number, boolean, string], apoi atribuie-i [5, false, 'Zeul Programării a fost aici']. Nu se afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
// definim tuplul nostru
let ourTuple: [number, boolean, string];
// inițializare corectă
ourTuple = [5, false, 'Zeul Programării a fost aici'];
Exemplu
Aceleași valori în ordine greșită nu corespund tipului de tuplu, așa că această atribuire nu se compilează.
ourTuple ca [number, boolean, string], apoi atribuie-i [false, 'Zeul Programării s-a înșelat', 5] — aceleași feluri de valori, dar în ordine greșită — astfel încât atribuirea să nu se compileze.
Ieșire: program TypeScript și rezultatul capturat
// definim tuplul nostru
let ourTuple: [number, boolean, string];
// inițializat greșit, ceea ce produce o eroare
ourTuple = [false, 'Zeul Programării s-a înșelat', 5];
Tuplu readonly
O practică bună este să îți faci tuplul readonly.
Tuplurile au tipuri strict definite doar pentru pozițiile lor inițiale. În primul exemplu, poți adăuga o valoare nouă în tuplu cu push și o vei vedea afișată. Al doilea exemplu folosește readonly pentru a împiedica acest lucru.
Pentru a afla mai multe despre modificatori precum readonly, vezi capitolul despre clase în TypeScript.
Notă: Dacă ai folosit React, cel mai probabil ai lucrat deja cu tupluri.
useState returnează un tuplu format din valoare și o funcție de setare.
const [firstName, setFirstName] = useState('Dylan') este un exemplu obișnuit.
Datorită structurii tuplului știm că prima valoare are un anumit tip, în acest caz string, iar a doua valoare este o function.
Exemplu
Nimic nu oprește push pe un tuplu obișnuit, așa că o a patra valoare se strecoară înăuntru și apare în tabloul afișat.
ourTuple ca [number, boolean, string], atribuie-i [5, false, 'Zeul Programării a fost aici'], adaugă cu push șirul 'Ceva nou și greșit' (permis, fără siguranța tipurilor după indexul 2), apoi afișează tuplul pentru a arăta valoarea în plus.
Ieșire: program TypeScript și rezultatul capturat
// definim tuplul nostru
let ourTuple: [number, boolean, string];
// inițializare corectă
ourTuple = [5, false, 'Zeul Programării a fost aici'];
// Nu avem siguranța tipurilor în tuplu pentru indexurile 3+
ourTuple.push('Ceva nou și greșit');
console.log(ourTuple);
Exemplu
Cu readonly, push nu există pe tipul tuplului, așa că apelul este o eroare de compilare.
readonly nu poate fi extins.
Declară o constantă ourReadonlyTuple cu tipul readonly [number, boolean, string] și valoarea [5, true, 'Adevăratul Zeu al Programării'], apoi apelează push('Zeul Programării și-a luat o zi liberă') — compilatorul trebuie să raporteze că push nu există pe tipul de tuplu readonly.
Ieșire: program TypeScript și rezultatul capturat
// definim tuplul nostru readonly
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'Adevăratul Zeu al Programării'];
// produce o eroare, deoarece este readonly.
ourReadonlyTuple.push('Zeul Programării și-a luat o zi liberă');
Tupluri cu nume
Tuplurile cu nume îți permit să dai un nume fiecărei poziții, ceea ce explică ce înseamnă valoarea de la acel index.
Notă: Tuplurile cu nume oferă mai mult context despre ce reprezintă valoarea fiecărui index.
Sintaxa tuplului cu nume
Pozițiile sunt etichetate x și y, așa că este clar că graph conține o pereche de coordonate.
const graph: [x: number, y: number] = [55.2, 41.3];
Destructurarea tuplurilor
Deoarece tuplurile sunt tablouri, le poți și destructura — adică poți extrage valorile în variabile separate într-un singur pas.
Notă: Dacă destructurarea este ceva nou pentru tine, recitește capitolul despre destructurare în JavaScript.
Destructurarea unui tuplu
x primește 55.2, iar y primește 41.3, fiecare având tipul number.
const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;