TypeScript - Đối tượng

An objectlà một thể hiện chứa tập hợp các cặp giá trị khóa. Các giá trị có thể là giá trị hoặc hàm vô hướng hoặc thậm chí là mảng của các đối tượng khác. Cú pháp được đưa ra dưới đây:

Cú pháp

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

Như hình trên, một đối tượng có thể chứa các giá trị, hàm và cấu trúc vô hướng như mảng và bộ giá trị.

Ví dụ: Object Literal Notation

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

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

Tom 
Hanks

Mẫu loại TypeScript

Giả sử bạn đã tạo một đối tượng theo nghĩa đen trong JavaScript là -

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

Trong trường hợp bạn muốn thêm một số giá trị vào một đối tượng, JavaScript cho phép bạn thực hiện các sửa đổi cần thiết. Giả sử sau này chúng ta cần thêm một hàm vào đối tượng person thì đây là cách bạn có thể thực hiện.

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

Nếu bạn sử dụng cùng một đoạn mã trong Typecript, trình biên dịch sẽ báo lỗi. Điều này là do trong Typecript, các đối tượng cụ thể phải có một mẫu kiểu. Các đối tượng trong Typecript phải là một thể hiện của một kiểu cụ thể.

Bạn có thể giải quyết vấn đề này bằng cách sử dụng một mẫu phương thức trong khai báo.

Ví dụ: Mẫu Typecript Type

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

Khi biên dịch, nó sẽ tạo ra cùng một mã trong JavaScript.

Đầu ra của đoạn mã trên như sau:

hello Tom

Các đối tượng cũng có thể được truyền dưới dạng tham số cho chức năng.

Ví dụ: Đối tượng dưới dạng tham số hàm

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)

Ví dụ khai báo một đối tượng theo nghĩa đen. Biểu thức hàm được gọi là chuyển đối tượng người.

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

//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);

Đầu ra của nó như sau:

first name :Tom 
last name :Hanks

Bạn có thể tạo và chuyển một đối tượng ẩn danh một cách nhanh chóng.

Ví dụ: Đối tượng ẩn danh

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"});

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

//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" });

Đầu ra của nó như sau:

first name :Sachin 
last name :Tendulkar

Vịt gõ

Trong kiểu gõ vịt, hai đối tượng được coi là thuộc cùng một kiểu nếu cả hai có cùng một tập thuộc tính. Vị trí gõ xác minh sự hiện diện của một số thuộc tính trong các đối tượng, thay vì loại thực tế của chúng, để kiểm tra tính phù hợp của chúng. Khái niệm này thường được giải thích bằng cụm từ sau:

“Khi tôi nhìn thấy một con chim đi như vịt và bơi như vịt và chạy như vịt, tôi gọi con chim đó là vịt.”

Trình biên dịch TypeScript triển khai hệ thống gõ kiểu vịt cho phép tạo đối tượng một cách nhanh chóng trong khi vẫn giữ an toàn cho kiểu gõ. Ví dụ sau cho thấy cách chúng ta có thể truyền các đối tượng không triển khai giao diện một cách rõ ràng nhưng chứa tất cả các thành viên bắt buộc vào một hàm.

Thí dụ

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})