Tastați vs. interfață în TypeScript

Type vs. Interface este unul dintre cele mai confuze și mai interesante lucruri din TypeScript. Vom încerca să lămurim această confuzie.

TypeScript este creat pe lângă JavaScript, care adaugă tipuri statice . A avea tipuri este un lucru minunat pentru dezvoltatori. Tipurile de scris vor fi dificile, dar nu vei regreta pe termen lung.

TypeScript are toate tipurile de bază, cum ar fi număr, șir, boolean etc. Alături de tipul de bază, TypeScript ne permite să creăm tipuri personalizate și să definim cum arată un obiect cu ajutorul Aliaselor și interfețelor de tip, respectiv.

Un Alias ​​de tip nu este altceva decât un Tip. Crearea unui tip cu un nume personalizat (alias) îl face un Alias ​​de tip, nimic mai mult decât atât.

Să ne uităm la sintaxa de bază a interfețelor și a aliasurilor de tip .

Sintaxa de bază

Interfețe

Interfețele vor fi declarate cu cuvântul cheie interface . Verificați sintaxa interfețelor de mai jos.

 interface InterfaceName { keyName: typeOfKey ... }

Aruncă o privire la exemplul de mai jos.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Tastați Aliasuri

Aliasurile de tip vor fi declarate folosind cuvântul cheie type . Verificați mai jos sintaxa aliasurilor de tip.

 type TypeName = { keyName: typeOfKey; ... }

Aruncă o privire la exemplul de mai jos.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Am creat un tip pentru Site folosind interfața și tip alias . Ambele sunt valide și pot fi utilizate pentru tipurile de obiecte menționate în exemple. Doar sintaxa este diferită în exemplul de mai sus, ceea ce este evident.

Să continuăm să explorăm diferențele dintre ele pentru a găsi mai multe lucruri.

Tupluri

Un tuplu în TypeScript este o matrice de lungime predefinită tipizată. Acesta definește tipurile fiecărui index.

Putem declara tupluri folosind aliasuri de tip. Dar nu o putem face folosind interfețe. Să vedem cum să o facem cu aliasuri de tip.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

În exemplul de mai sus, am definit tipul fiecărui element index pentru matrice. Dacă dăm alt tip în matrice, TypeScript va arunca o eroare.

Nu putem face asta cu interfețe?

Nu o putem face exact așa cum o facem cu aliasuri de tip. Interfețele sunt folosite pentru tipurile de obiecte. Deci, trebuie să avem tuplu în interiorul obiectului pentru a-l folosi în interfețe. Să vedem un exemplu.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Dacă vedeți codul, avem un tuplu numit detalii în interiorul interfeței. Deci, putem folosi tuplurile din interiorul interfețelor.

În mod similar, putem folosi aliasuri de tip pentru tipuri individuale, cum ar fi șir, număr, boolean etc. Deoarece Interfața este folosită pentru tipurile de obiecte, o putem folosi pentru tipurile individuale, cum ar fi aliasuri de tip.

Un alt lucru interesant este că putem folosi tuplu de tip alias în interfețe . Verificați exemplul de mai jos.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Să trecem la următorul lucru.

Fuziunea declarației – Interfețe

Fuziunea declarației este utilizarea TypeScript pentru a îmbina tipuri de interfețe cu același nume. Să vedem exemplul pentru a obține mai multă claritate.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Dacă vedeți codul de mai sus, am declarat interfața cu același nume de 3 ori. Compilatorul TypeScript va compila toate acele 3 forme într-un singur tip de obiect care include toate tipurile din interfețele care au același nume.

Puteți confirma fuziunea declarației prin eliminarea unei chei din obiectul geekflare . Dacă eliminați una dintre cheile din geekflare , veți vedea o eroare.

Nu putem face același lucru cu aliasurile de tip. Majoritatea oamenilor nu folosesc această funcție. În general, a avea mai multe interfețe cu același nume este confuz.

Introduceți alias fani, nu vă faceți griji cu privire la această caracteristică a interfețelor .

Se extinde

Să presupunem că ați declarat un tip. Acum, doriți să declarați un alt tip împreună cu tipurile tipului anterior. În acest caz, putem extinde tipul anterior. O putem face atât cu interfețe, cât și cu aliasuri de tip .

Să-i vedem pe amândoi.

Interfețe

Există un cuvânt cheie numit extends pentru acest caz de utilizare în TypeScript. Îl vom folosi pentru a extinde interfețele. Să verificăm exemplul.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Am creat interfața Geekflare prin extinderea interfeței Site -ului. Toate tipurile de Site vor fi prezente în Geeflare Interface împreună cu propriile lor tipuri. Puteți elimina cheia de name din variabila geekflare pentru a o confirma.

Putem extinde mai multe interfețe după cum urmează.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Încercați să extindeți cu mai mult de 2 interfețe pentru a vă distra. De asemenea, putem extinde aliasurile de tip cu Interfața.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Am extins un singur tip în exemplul de mai sus. Puteți extinde câte doriți, similar cu exemplul anterior de extindere a mai multor interfețe.

Să vedem cum să o facem cu aliasuri de tip.

Tastați Aliasuri

Putem extinde aliasurile de tip folosind tipul de intersecție în TypeScript. Să vedem un exemplu.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Am extins tipul de Site cu founder pentru tipul Geekflare folosind intersecția (&) . Îl puteți testa eliminând una dintre cheile din variabila geekflare , care va genera o eroare.

Similar cu interfețele, putem extinde mai multe tipuri după cum urmează.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

De asemenea, putem extinde interfețele cu aliasuri de tip la fel ca interfețele care extind aliasuri de tip. Verificați exemplul de mai jos.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Încercați să extindeți combinația de aliasuri de tip și interfețe.

Implementarea

Aceasta nu este o diferență între interfețe și aliasuri de tip. Doar o caracteristică a class de știut.

O clasă poate implementa atât interfața, cât și aliasul de tip în același mod. Să vedem exemplele pentru amândoi.

Interfețe

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Tastați Aliasuri

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Notă: un lucru de reținut este că nu putem implementa tipuri de unire (|) sau intersecție (&) cu clase.

Cuvinte finale

După cum vedeți în articole, putem face totul atât cu aliasuri de tip, cât și cu interfețe. Deci, nu putem spune strict că unul este mai bun decât celălalt. În cele din urmă, este alegerea personală a fiecăruia să aleagă unul dintre ele. Îți vei dezvolta stilul de a le folosi în cele din urmă.

Apoi, puteți verifica Typescript vs. Javascript.

Codare fericită