TypeScript – Interfaces

interface IEmployee { empCode: number; empName: string; getSalary: (number) => number; // arrow function getManagerName(number): string; }

. Tartalmaz továbbá egy getSalaray metódusdeklarációt is, amely egy nyílfüggvényt használ, amely egy szám paramétert és egy szám visszatérési típust tartalmaz. A getManagerName metódus egy normál függvény használatával van deklarálva. Ez azt jelenti, hogy bármely IEmployee típusú objektumnak meg kell határoznia a két tulajdonságot és a két metódust.

Interfész mint típus

A TypeScriptben az interfész használható egy típus definiálására és az osztályban való implementálására is.

A következő IEmployee interfész egy változó típusát definiálja.

interface KeyPair { key: number; value: string;}let kv1: KeyPair = { key:1, value:"Steve" }; // OKlet kv2: KeyPair = { key:1, val:"Steve" }; // Compiler Error: 'val' doesn't exist in type 'KeyPair'let kv3: KeyPair = { key:1, value:100 }; // Compiler Error: 

A fenti példában egy KeyPair interfész két tulajdonságot tartalmaz key és value. A kv1 változót KeyPair típusúnak deklaráljuk. Tehát ugyanazt a struktúrát kell követnie, mint a KeyPair. Ez azt jelenti, hogy egy kv1 változóhoz csak egy key szám típusú és value karakterlánc típusú tulajdonságokkal rendelkező objektumot lehet hozzárendelni. A TypeScript fordító hibát fog mutatni, ha a tulajdonságok neve megváltozik, vagy az adattípus eltér a KeyPair-tól. Egy másik változó kv2 szintén KeyPair típusúnak van deklarálva, de a hozzárendelt érték value helyett val, így ez hibát fog okozni. Ugyanígy a kv3 a value tulajdonsághoz egy számot rendel, így a fordító hibát fog mutatni. A TypeScript tehát egy interfész segítségével biztosítja az objektum megfelelő felépítését.

Interfész mint függvénytípus

A TypeScript interfész is használható egy függvény típusának meghatározására. Ez biztosítja a függvény szignatúráját.

interface KeyValueProcessor{ (key: number, value: string): void;};function addKeyValue(key:number, value:string):void { console.log('addKeyValue: key = ' + key + ', value = ' + value)}function updateKeyValue(key: number, value:string):void { console.log('updateKeyValue: key = '+ key + ', value = ' + value)} let kvp: KeyValueProcessor = addKeyValue;kvp(1, 'Bill'); //Output: addKeyValue: key = 1, value = Bill kvp = updateKeyValue;kvp(2, 'Steve'); //Output: updateKeyValue: key = 2, value = Steve 

A fenti példában egy KeyValueProcessor interfész tartalmaz egy metódus aláírását. Ez határozza meg a függvénytípust. Most definiálhatunk egy KeyValueProcessor típusú változót, amely csak a KeyValueProcessor interfészben definiált aláírással rendelkező függvényekre mutathat. Tehát a addKeyValue vagy updateKeyValue függvényt a kvp függvényhez rendeljük. Így a kvp függvényként hívható.

Az eltérő aláírású függvény hozzárendelésének kísérlete hibát okoz.

function delete(key:number):void { console.log('Key deleted.')} let kvp: KeyValueProcessor = delete; //Compiler Error

Interface for Array Type

Egy interfész is meghatározhatja egy tömb típusát, ahol az index és az értékek típusa is meghatározható.

interface NumList { :number}let numArr: NumList = ;numArr;numArr;interface IStringList { :string}let strArr : IStringList;strArr = "TypeScript";strArr = "JavaScript";

A fenti példában a NumList interfész definiál egy olyan típusú tömböt, amelynek indexe szám, értéke pedig szám típusú. Ugyanígy a IStringList egy string tömböt definiál, amelynek indexe string, értéke pedig string.

Optionális tulajdonság

Néha előfordulhat, hogy egy interfészt többlet tulajdonságokkal deklarálunk, de nem várjuk el, hogy minden objektum definiálja az összes megadott interfész tulajdonságot. Lehetnek opcionális tulajdonságaink, amelyeket “?”-val jelölünk. Ilyen esetekben az interfész objektumai definiálhatják vagy nem definiálhatják ezeket a tulajdonságokat.

interface IEmployee { empCode: number; empName: string; empDept?:string;}let empObj1:IEmployee = { // OK empCode:1, empName:"Steve"}let empObj2:IEmployee = { // OK empCode:1, empName:"Bill", empDept:"IT"}

A fenti példában a empDept a ? jelöléssel van ellátva, így a IEmployee objektumai tartalmazhatják vagy nem tartalmazhatják ezt a tulajdonságot.

Csak olvasható tulajdonságok

A TypeScript lehetőséget biztosít egy tulajdonság csak olvashatónak jelölésére. Ez azt jelenti, hogy ha egy tulajdonságnak egyszer értéket adunk, akkor az nem változtatható meg!

interface Citizen { name: string; readonly SSN: number;}let personObj: Citizen = { SSN: 110555444, name: 'James Bond' }personObj.name = 'Steve Smith'; // OKpersonObj.SSN = '333666888'; // Compiler Error

interface IPerson { name: string; gender: string;}interface IEmployee extends IPerson { empCode: number;}let empObj:IEmployee = { empCode:1, name:"Bill", gender:"Male"}

interface IEmployee { empCode: number; name: string; getSalary:(number)=>number;}class Employee implements IEmployee { empCode: number; name: string; constructor(code: number, name: string) { this.empCode = code; this.name = name; } getSalary(empCode:number):number { return 20000; }}let emp = new Employee(1, "Steve");