Share
Am început această serie cu un tutorial introductiv care v-a prezentat diferitele caracteristici tipice. De asemenea, te-a învățat cum să instalezi TipScript și ai sugerat câteva IDE-uri pe care le poți folosi pentru a scrie și a compila propriul cod TypeScript.
În cel de-al doilea tutorial, am acoperit diferite tipuri de date disponibile în TypeScript și cum le puteți ajuta să evitați o mulțime de erori. Alocarea unui tip de date ca a şir la o anumită variabilă îi spune lui TypeScript că doriți să îi atribuiți doar un șir. Bazându-se pe aceste informații, TypeScript vă poate indica mai târziu când încercați să efectuați o operație care nu ar trebui făcută pe șiruri de caractere.
În acest tutorial, veți învăța despre interfețe în TypeScript. Cu interfețe, puteți merge cu un pas mai departe și puteți defini structura sau tipul de obiecte mai complexe din codul dvs. La fel ca tipurile simple de variabile, aceste obiecte vor trebui să respecte și un set de reguli create de dvs. Acest lucru vă poate ajuta să scrieți codul mai confident, cu mai puține șanse de eroare.
Să presupunem că aveți un obiect de lac în codul dvs. și îl utilizați pentru a stoca informații despre unele dintre cele mai mari lacuri pe regiuni din întreaga lume. Acest obiect al lacului va avea proprietăți precum numele lacului, zona, lungimea, adâncimea acestuia și țările în care există acest lac.
Numele lacurilor vor fi stocate ca șir. Lungimile acestor lacuri vor fi în kilometri, iar zonele vor fi în kilometri pătrați, dar ambele proprietăți vor fi stocate ca numere. Adâncurile lacurilor vor fi în metri, iar acest lucru ar putea fi și un flotor.
Deoarece toate aceste lacuri sunt foarte mari, țărmurile lor nu sunt, în general, limitate la o singură țară. Vom folosi o serie de șiruri de caractere pentru a stoca numele tuturor țărilor pe țărmul unui anumit lac. Un boolean poate fi folosit pentru a specifica dacă lacul este apă sărată sau apă dulce. Următorul fragment de cod creează o interfață pentru obiectul lacului nostru.
interfață Lacuri nume: șir, zonă: număr, lungime: număr, adâncime: număr, esteDe apă dulce: booleană, țări: șir []]
lacurile interfața conține tipul fiecărei proprietăți pe care o vom folosi în crearea obiectelor lacului. Dacă încercați acum să atribuiți diferite tipuri de valori uneia dintre aceste proprietăți, veți primi o eroare. Iată un exemplu care stochează informații despre primul nostru lac.
Lasa-l pe: Lakes = name: 'Marea Caspica', lungime: 1199, adâncime: 1025, zona: 371000, ']
După cum puteți vedea, ordinea în care atribuiți o valoare acestor proprietăți nu contează. Cu toate acestea, nu puteți omite o valoare. Va trebui să atribuiți o valoare fiecărei proprietăți pentru a evita erorile în timpul compilării codului.
În acest fel, TypeScript vă asigură că nu ați pierdut din greșeală niciuna dintre valorile solicitate. Iată un exemplu în care am uitat să atribuim valoarea adâncime proprietate pentru un lac.
a doua: Lakes = name: 'Superior', lungime: 616, suprafață: 82100, esteDe apă dulce: adevărat, țări: ['Canada', 'Statele Unite']]
Imaginea de mai jos afișează mesajul de eroare din Codul Visual Studio după ce am uitat să specificăm adâncime. După cum puteți vedea, eroarea arată în mod clar că ne lipsesc adâncime proprietate pentru obiectul lacului nostru.
Uneori, este posibil să aveți nevoie de o proprietate numai pentru anumite obiecte specifice. De exemplu, să presupunem că doriți să adăugați o proprietate pentru a specifica lunile în care un lac este înghețat. Dacă adăugați proprietatea direct la interfață, așa cum am făcut până acum, veți primi o eroare pentru alte lacuri care nu îngheață și, prin urmare, nu au îngheţat proprietate. În mod similar, dacă adăugați acea proprietate la lacurile înghețate, dar nu în declarația de interfață, veți primi în continuare o eroare.
În astfel de cazuri, puteți adăuga un semn de întrebare (?) după numele unei proprietăți pentru a o seta ca opțională în declarația de interfață. În acest fel, nu veți obține o eroare fie pentru proprietăți lipsă, fie pentru proprietăți necunoscute. Următorul exemplu ar trebui să clarifice.
interfață Lacuri nume: șir, zonă: număr, lungime: număr, adâncime: număr, esteDe apă dulce: booleană, țări: șir [], 406.3, lungimea: 616, suprafața: 82100, esteDe apă dulce: adevărat, țări: ['Canada', 'Statele Unite'] thirdLake: Lakes = name: 'Baikal', depth: 1637; , este apele dulci: adevărate, țări: ["Rusia"], înghețate: ['ianuarie', 'februarie', 'martie', 'aprilie', 'mai'
Proprietățile opționale sunt utile atunci când vor fi folosite câteva obiecte. Cu toate acestea, dacă fiecare lac avea propriul său set unic de proprietăți cum ar fi activitățile economice, populația de diferite tipuri de floră și faună înfloritoare în acel lac sau așezările din jurul lacului? Adăugarea atât de multe proprietăți diferite în cadrul declarației interfeței însăși și făcându-le opțională nu este ideală.
Ca o soluție, TypeScript vă permite să adăugați proprietăți suplimentare unor obiecte specifice, cu ajutorul semnelor de index. Adăugarea unei semnături a indexului la declarația de interfață vă permite să specificați orice număr de proprietăți pentru diferite obiecte pe care le creați. Trebuie să efectuați următoarele modificări la interfață.
În acest exemplu, am folosit o semnătură de index pentru a adăuga informații despre diferite așezări din jurul lacurilor. Deoarece fiecare lac va avea așezări proprii, folosirea proprietăților opționale nu ar fi fost o idee bună.
interfață Lakes nume: șir, zonă: număr, lungime: număr, adâncime: număr, esteDe apă dulce: booleană, țări: șir [], înghețat? nume: 'Tanganyika', adâncime: 1470, lungime: 676, suprafață: 32600, esteDe apă dulce: adevărate, țări: "Burundi", "Tanzania", "Zambia", "Kongo" "Congo", bujumbura: "Burundi"
Ca un alt exemplu, să presupunem că creați un joc cu diferite tipuri de inamici. Toți acești dușmani vor avea niște proprietăți comune cum ar fi dimensiunea și sănătatea lor. Aceste proprietăți pot fi incluse direct în declarația de interfață. Dacă fiecare categorie a acestor dușmani are un set unic de arme, aceste arme pot fi incluse cu ajutorul unei semnături de index.
Când lucrați cu obiecte diferite, este posibil să trebuiască să lucrați cu proprietăți care ar trebui modificate numai când creăm pentru prima dată obiectul. Puteți marca aceste proprietăți ca numai citire în declarația de interfață. Acest lucru este similar cu utilizarea const cuvânt cheie, dar const se presupune a fi utilizat cu variabile, în timp ce numai citire este destinat pentru proprietăți.
De asemenea, TypeScript vă permite să creați arhitecturi numai prin citire ReadonlyArray. Crearea unei matrice numai pentru citire va duce la eliminarea tuturor metodelor de mutare din ea. Acest lucru este făcut pentru a vă asigura că nu puteți modifica mai târziu valoarea elementelor individuale. Iată un exemplu de utilizare a proprietăților read-only și a matricelor în declarațiile de interfață.
interfață Enemy mărimea cititoarei: numărul, sănătatea: numărul, intervalul: numărul, deteriorarea readonly: numărul lasa cisterna: Enemy = dimensiune: 50, sănătate: 100, interval: 60, deteriorare: 12 sănătate = 95; // Eroare deoarece "deteriorarea" este doar pentru citire. tank.damage = 10;
De asemenea, puteți utiliza interfețe pentru a descrie un tip de funcție. Pentru aceasta, trebuie să dați funcției o semnătură de apel cu lista de parametri și cu tipul de retur. De asemenea, trebuie să furnizați atât un nume, cât și un tip pentru fiecare dintre parametri. Iată un exemplu:
interfață EnemyHit (nume: Enemy, damageDone: număr): număr; let tankHit: EnemyHit = funcția (tankName: Enemy, damageDone: number) tankName.health - = damageDone; retur tankName.health;
În codul de mai sus, am declarat o interfață de funcții și l-am folosit pentru a defini o funcție care scade daunele aduse unui rezervor de la starea sa de sănătate. După cum puteți vedea, nu trebuie să utilizați același nume pentru parametrii din declarația de interfață și definiția codului pentru a funcționa.
Acest tutorial vă prezintă interfețele și cum le puteți utiliza pentru a vă asigura că scrieți un cod mai robust. Acum ar trebui să puteți crea propriile interfețe cu proprietăți opționale și numai pentru citire.
De asemenea, ați învățat cum să utilizați semnăturile index pentru a adăuga o varietate de alte proprietăți unui obiect care nu este inclus în declarația de interfață. Acest tutorial a fost menit să vă inițieze cu interfețe în TypeScript și puteți citi mai multe despre acest subiect în documentația oficială.
În tutorialul următor, veți învăța despre clasele din tipul de text. Dacă aveți întrebări legate de interfețe, anunțați-ne în comentarii.
Accentsconagua