Ano ang TypeScript Interface vs Type?

Ano Ang Typescript Interface Vs Type



Sinusuportahan ng TypeScript ang mga custom na uri, na maaaring tukuyin gamit ang alinman sa ' interface 'o' uri ”. Ang isang interface ay maaaring ipatupad ng isang klase o isang bagay, samantalang ang isang uri ng alias ay maaari lamang gamitin para sa paglikha ng isang bagong pangalan para sa isang umiiral na uri o upang tukuyin ang isang unyon ng mga uri. Bagama't madalas na mapapalitan ang mga uri at interface, may ilang partikular na pagkakaiba sa kanilang functionality at syntax na ginagawang mas naaangkop ang mga ito para sa mga partikular na sitwasyon.

Ilalarawan ng blog na ito ang interface at uri ng TypeScript at ang kanilang pagkakaiba.







Ano ang TypeScript Interface vs Type?

Interface 'at' uri ” ay ginagamit para sa pagtukoy ng mga custom na uri sa TypeScript. Ngunit may ilang mga pagkakaiba sa kanilang pag-andar at syntax. Ang pangunahing pagkakaiba sa pagitan ng isang interface at isang uri ay ang isang interface ay tumutukoy sa isang bagong uri, habang ang isang uri ng alias ay hindi.



Ang isang interface ay maaaring ipatupad ng isang klase o isang bagay, habang ang mga uri ay maaaring tukuyin ang mas kumplikadong mga uri gamit ang mga tampok tulad ng mga unyon at intersection. Sa pangkalahatan, ang mga interface ay mas karaniwang ginagamit para sa pagtukoy ng mga hugis ng bagay at mga API, habang ang mga uri ay mas karaniwang ginagamit para sa pagtukoy ng mga kumplikadong uri ng data at mga uri ng utility. Unawain natin ang dalawang ito nang hiwalay.



Ano ang TypeScript Interface?

Ang TypeScript interface ay isang pamamaraan upang tukuyin ang hugis ng isang TypeScript object. Ito ay nilikha gamit ang keyword na ' interface ” at tumutukoy ito ng isang hanay ng mga katangian at pamamaraan na kailangan ng isang bagay upang maiuri bilang ganoong uri. Ito ay katumbas ng isang klase sa object-oriented programming; gayunpaman, hindi nito tinukoy ang anumang pagpapatupad. Pangunahing ginagamit ang mga interface para sa pagsuri ng uri at pagtiyak na ang isang bagay ay umaayon sa isang partikular na istraktura.





Bago magpatuloy, tandaan na upang magsagawa ng TypeScript file, dapat itong i-transpile sa isang JavaScript file at pagkatapos ay patakbuhin ang JavaScript code sa terminal gamit ang mga ibinigay na command:

tsc filename.ts
node filename.js


Halimbawa



Lumikha ng isang interface na pinangalanang 'User' na tumutukoy sa tatlong mga katangian at isang paraan ' getInfo() ”:

User ng interface {
firstName: string;
apelyido: string;
edad: numero;
getInfo ( ) : walang bisa;
}


Lumikha ng isang klase ' Mag-aaral ” na minana ng isang interface. Tinutukoy ng klase ang mga katangian nito, isang tagabuo na magtatalaga ng mga halaga sa mga katangian, at isang pamamaraan na 'getInfo()' na magpapakita ng mga halaga na nauugnay sa mga katangian:

klase Ang mag-aaral ay nagpapatupad ng User {
firstName: string;
apelyido: string;
edad: numero;

tagabuo ( firstName: string, lastName: string, edad: number ) {
this.firstName = firstName;
this.lastName = lastName;
ito.edad = edad;
}
getInfo ( ) : walang bisa {
console.log ( 'Impormasyon ng Mag-aaral:' )
console.log ( '- Pangalan: ' + ito.firstName + '' + this.lastName ) ;
console.log ( '- Edad: ' + ito.edad ) ;
}
}


Lumikha ng isang bagay ng ' Mag-aaral ' pinangalanan ' std 'ng' Gumagamit ” type sa pamamagitan ng pagtawag sa constructor gamit ang “bagong” keyword at pagkatapos, tawagan ang getInfo() method para i-print ang data sa console:

const std: User = bagong Mag-aaral ( 'Bat' , 'Steve' , 17 ) ;
std.getInfo ( ) ;


Output

Ano ang TypeScript Type?

Ang mga uri ng TypeScript ay kadalasang ginagamit para sa paglikha ng mga alias para sa mga umiiral na uri pati na rin upang lumikha ng mas kumplikadong mga uri. Ito ay kumakatawan sa isang tiyak na hugis o istraktura ng data. Ito ay maaaring tukuyin/ideklara gamit ang “ uri ” keyword. Maaaring gamitin ang mga uri ng TypeScript upang gawing mas nauunawaan ang code at mabawasan ang pag-uulit/pagdoble.

Halimbawa

Una, tukuyin ang isang uri ' Gumagamit ' gamit ang ' uri ” keyword na tinukoy na may limang katangian ang isa sa mga ito ay isang opsyonal na katangian na ' telepono ”:

uri User = {
firstName: string;
apelyido: string;
edad: numero;
email: string;
telepono?: string;
} ;


Tukuyin ang isang function na pinangalanang ' getFullName ”, na kumukuha ng parameter ng uri “ Gumagamit ” at ini-print ang data na binubuo ng impormasyon ng tao kasama ang “ pangalan ”, “ edad ”, “ email 'at' numero ng telepono ”:

function getInfo ( tao: Gumagamit ) : walang bisa {
console.log ( 'Impormasyon ng User:' )
console.log ( '- Pangalan: ' + tao.firstName + '' + tao.apelyido ) ;
console.log ( '- Edad: ' + tao.edad ) ;
console.log ( '- Email: ' + tao.email ) ;
console.log ( '-Telepono #: ' + tao.telepono ) ;
}


Ngayon, lumikha ng isang bagay ' tao 'ng uri' Gumagamit ” na may mga pares ng key-value:

const person: User = {
pangalan: 'Mily' ,
huling pangalan: 'Micheal' ,
edad: 28 ,
email: 'mili124@yahoo.com' ,
telepono: '086-34581734'
} ;


Panghuli, i-print ang impormasyon ng user sa pamamagitan ng pagtawag sa function getInfo():

console.log ( getInfo ( tao ) ) ;


Output


Iyon ay tungkol sa interface at uri ng TypeScript.

Konklusyon

Sa TypeScript, ' interface 'at' uri ” ay ginagamit para sa pagtukoy ng mga custom na uri. Ang isang interface ay maaaring ipatupad ng isang klase o isang bagay, habang ang mga uri ay maaaring tumukoy ng mas kumplikadong mga uri gamit ang mga tampok tulad ng mga unyon at intersection. Ito ang mga makapangyarihang feature na makakatulong sa pagsulat ng mas organisado at nasusukat na code. Inilarawan ng blog na ito ang interface at uri ng TypeScript at ang kanilang pagkakaiba.