Alias-uri de tip și interfețe în TypeScript
TypeScript îți permite să definești un tip separat de variabilele care îl folosesc.
Alias-urile de tip și interfețele fac ușoară partajarea aceluiași tip între mai multe variabile și obiecte.
Alias-uri de tip
Un alias de tip dă unui tip un nume personalizat.
Poți crea un alias pentru un tip primitiv precum string sau pentru tipuri mai complexe, cum sunt obiectele și tablourile.
Exemplu
CarYear, CarType și CarModel sunt alias-uri pentru tipuri primitive. Car este un alias pentru un tip obiect construit din ele.
CarYear (number), CarType (string) și CarModel (string), apoi un alias de obiect Car cu year, type și model care folosesc aceste alias-uri; declară constante tipizate pentru 2001, "Toyota" și "Corolla" și construiește din ele un obiect Car. Exemplul doar declară valori și nu afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
type CarYear = number
type CarType = string
type CarModel = string
type Car = {
year: CarYear,
type: CarType,
model: CarModel
}
const carYear: CarYear = 2001
const carType: CarType = "Toyota"
const carModel: CarModel = "Corolla"
const car: Car = {
year: carYear,
type: carType,
model: carModel
};
Alias-uri de intersecție și de uniune
Un alias de tip poate, de asemenea, să combine tipuri cu & (intersecție) sau să enumere valorile permise cu | (uniune).
type Animal = { name: string };
type Bear = Animal & { honey: boolean };
const bear: Bear = { name: "Winnie", honey: true };
type Status = "success" | "error";
let response: Status = "success";
Interfețe
Interfețele sunt asemănătoare cu alias-urile de tip, dar ele descriu doar tipuri object.
Exemplu
Interfața Rectangle spune că un obiect trebuie să aibă height și width numerice.
Rectangle cu height și width numerice, apoi creează o constantă rectangle de acest tip, cu height 20 și width 10. Exemplul doar declară valori și nu afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
interface Rectangle {
height: number,
width: number
}
const rectangle: Rectangle = {
height: 20,
width: 10
};
Fuzionarea declarațiilor
Declararea de două ori a aceluiași nume de interfață fuzionează cele două declarații într-o singură interfață, care are toate proprietățile.
interface Animal { name: string; }
interface Animal { age: number; }
const dog: Animal = { name: "Fido", age: 5 };
Type vs Interface: diferențe esențiale
- Extindere: Ambele pot fi extinse, dar doar interfețele acceptă fuzionarea declarațiilor.
- Uniuni/Intersecții: Doar alias-urile de tip pot descrie tipuri uniune și intersecție.
- Implements: O clasă poate implementa oricare dintre ele.
- Recomandare: Folosește
interfacepentru obiecte șitypepentru orice altceva.
Bune practici:
- Folosește
interfacepentru a defini forma obiectelor și API-urile publice. - Folosește
typepentru uniuni, intersecții și tipuri primitive. - Preferă compunerea unor tipuri mici în locul moștenirii adânci.
- Documentează-ți tipurile și interfețele, ca scopul lor să fie clar.
Greșeli frecvente:
- Folosirea lui
typeatunci când ai nevoie de fuzionarea declarațiilor (foloseșteinterfaceîn schimb). - Complicarea inutilă a tipurilor — păstrează-le simple și concentrate.
- Uitarea actualizării tipurilor și interfețelor pe măsură ce codul se schimbă.
Extinderea interfețelor
O interfață poate extinde altă interfață.
Notă: Extinderea unei interfețe înseamnă că creezi o interfață nouă, cu toate proprietățile celei originale, plus ceva nou.
Exemplu
ColoredRectangle are tot ce are Rectangle, plus o proprietate color.
Rectangle cu height și width numerice, apoi o interfață ColoredRectangle care o extinde cu un color de tip string; creează o constantă coloredRectangle cu height 20, width 10 și color "roșu". Exemplul doar declară valori și nu afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
interface Rectangle {
height: number,
width: number
}
interface ColoredRectangle extends Rectangle {
color: string
}
const coloredRectangle: ColoredRectangle = {
height: 20,
width: 10,
color: "roșu"
};