TypeScript - Objek

Sebuah objectadalah sebuah instance yang berisi kumpulan pasangan nilai kunci. Nilainya dapat berupa nilai skalar atau fungsi atau bahkan larik objek lain. Sintaksnya diberikan di bawah ini -

Sintaksis

var object_name = { 
   key1: “value1”, //scalar value 
   key2: “value”,  
   key3: function() {
      //functions 
   }, 
   key4:[“content1”, “content2”] //collection  
};

Seperti yang ditunjukkan di atas, sebuah objek dapat berisi nilai skalar, fungsi, dan struktur seperti array dan tupel.

Contoh: Notasi Literal Objek

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
//access the object values 
console.log(person.firstname) 
console.log(person.lastname)

Saat kompilasi, itu akan menghasilkan kode yang sama di JavaScript.

Output dari kode diatas adalah sebagai berikut -

Tom 
Hanks

TypeScript Type Template

Katakanlah Anda membuat literal objek dalam JavaScript sebagai -

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
};

Jika Anda ingin menambahkan beberapa nilai ke suatu objek, JavaScript memungkinkan Anda membuat modifikasi yang diperlukan. Misalkan kita perlu menambahkan fungsi ke objek person nanti, begitulah cara Anda melakukan ini.

person.sayHello = function(){ return "hello";}

Jika Anda menggunakan kode yang sama di Typecript, kompilator memberikan kesalahan. Ini karena dalam Ketikan, objek beton harus memiliki templat tipe. Objek dalam Skrip Ketik harus merupakan turunan dari tipe tertentu.

Anda dapat menyelesaikan ini dengan menggunakan template metode dalam deklarasi.

Contoh: Templat Tipe Skrip

var person = {
   firstName:"Tom", 
   lastName:"Hanks", 
   sayHello:function() {  }  //Type template 
} 
person.sayHello = function() {  
   console.log("hello "+person.firstName)
}  
person.sayHello()

Saat kompilasi, itu akan menghasilkan kode yang sama di JavaScript.

Output dari kode diatas adalah sebagai berikut -

hello Tom

Objek juga bisa dilewatkan sebagai parameter untuk berfungsi.

Contoh: Objek sebagai parameter fungsi

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
var invokeperson = function(obj: { firstname:string, lastname :string }) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson(person)

Contoh mendeklarasikan literal objek. Ekspresi fungsi dipanggil lewat objek orang.

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
var person = {
   firstname: "Tom",
   lastname: "Hanks"
};

var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson(person);

Outputnya adalah sebagai berikut -

first name :Tom 
last name :Hanks

Anda dapat membuat dan mengirimkan objek anonim dengan cepat.

Contoh: Objek Anonim

var invokeperson = function(obj:{ firstname:string, lastname :string}) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

Saat kompilasi, itu akan menghasilkan kode JavaScript berikut.

//Generated by typescript 1.8.10
var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });
invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });

Outputnya adalah sebagai berikut -

first name :Sachin 
last name :Tendulkar

Mengetik bebek

Dalam pengetikan bebek, dua objek dianggap memiliki tipe yang sama jika keduanya memiliki kumpulan properti yang sama. Pengetikan bebek memverifikasi keberadaan properti tertentu dalam objek, bukan tipe sebenarnya, untuk memeriksa kesesuaiannya. Konsep tersebut umumnya dijelaskan dengan ungkapan berikut -

“Ketika saya melihat burung yang berjalan seperti bebek dan berenang seperti bebek dan dukun seperti bebek, saya menyebut burung itu bebek.”

Kompilator TypeScript mengimplementasikan sistem pengetikan bebek yang memungkinkan pembuatan objek dengan cepat sambil menjaga keamanan jenis. Contoh berikut menunjukkan bagaimana kita bisa mengirimkan objek yang tidak secara eksplisit mengimplementasikan antarmuka tetapi berisi semua anggota yang diperlukan ke suatu fungsi.

Contoh

interface IPoint { 
   x:number 
   y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
   var x = p1.x + p2.x 
   var y = p1.y + p2.y 
   return {x:x,y:y} 
} 

//Valid 
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  

//Error 
var newPoint2 = addPoints({x:1},{x:4,y:3})