TypeScript - Antarmuka

Antarmuka adalah kontrak sintaksis yang harus dipatuhi oleh entitas. Dengan kata lain, sebuah antarmuka mendefinisikan sintaks yang harus dipatuhi oleh setiap entitas.

Antarmuka menentukan properti, metode, dan peristiwa, yang merupakan anggota antarmuka. Antarmuka hanya berisi deklarasi anggota. Ini adalah tanggung jawab kelas turunan untuk mendefinisikan anggota. Ini sering membantu dalam menyediakan struktur standar yang akan diikuti oleh kelas turunan.

Mari kita pertimbangkan sebuah objek -

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

Jika kita mempertimbangkan tanda tangan objek, itu bisa jadi -

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

Untuk menggunakan kembali tanda tangan di seluruh objek kita dapat mendefinisikannya sebagai antarmuka.

Mendeklarasikan Antarmuka

Kata kunci antarmuka digunakan untuk mendeklarasikan sebuah antarmuka. Berikut adalah sintaks untuk mendeklarasikan antarmuka -

Sintaksis

interface interface_name { 
}

Contoh: Antarmuka dan Objek

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

Contoh mendefinisikan sebuah antarmuka. Objek pelanggan adalah tipe IPerson. Oleh karena itu, sekarang akan mengikat objek untuk menentukan semua properti seperti yang ditentukan oleh antarmuka.

Objek lain dengan tanda tangan berikut, masih dianggap sebagai IPerson karena objek tersebut diperlakukan oleh ukuran atau tanda tangannya.

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

Output dari kode contoh di atas adalah sebagai berikut -

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

Antarmuka tidak akan diubah ke JavaScript. Itu hanya bagian dari TypeScript. Jika Anda melihat tangkapan layar alat TS Playground, tidak ada skrip java yang dipancarkan saat Anda mendeklarasikan antarmuka tidak seperti kelas. Jadi antarmuka tidak memiliki dampak JavaScript waktu proses.

Jenis dan Antarmuka Serikat

Contoh berikut menunjukkan penggunaan Union Type dan Interface -

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

Outputnya adalah sebagai berikut -

Hello 
Hello 
World 
**Hello World**

Antarmuka dan Array

Antarmuka dapat menentukan jenis kunci yang digunakan array dan jenis entri yang dikandungnya. Indeks dapat berupa jenis string atau nomor jenis.

Contoh

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

Antarmuka dan Warisan

Antarmuka dapat diperluas dengan antarmuka lain. Dengan kata lain, sebuah antarmuka dapat mewarisi dari antarmuka lain. Ketikan memungkinkan sebuah antarmuka untuk mewarisi dari banyak antarmuka.

Gunakan kata kunci extends untuk mengimplementasikan pewarisan antar antarmuka.

Sintaks: Pewarisan Antarmuka Tunggal

Child_interface_name extends super_interface_name

Sintaks: Warisan Antarmuka Ganda

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Contoh: Warisan Antarmuka Sederhana

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

Outputnya adalah sebagai berikut -

Age: 27 
Instrument: Drums

Contoh: Warisan Antarmuka Ganda

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+this.v1+" value 2: "+this.v2)

Objek Iobj adalah dari daun antarmuka tipe. Daun antarmuka berdasarkan warisan sekarang memiliki dua atribut- v1 dan v2 masing-masing. Karenanya, objek Iobj sekarang harus berisi atribut-atribut ini.

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

Output dari kode di atas adalah sebagai berikut -

value 1: 12   value 2: 23