TypeScript - Objekte

Ein objectist eine Instanz, die eine Reihe von Schlüsselwertpaaren enthält. Die Werte können skalare Werte oder Funktionen oder sogar ein Array anderer Objekte sein. Die Syntax ist unten angegeben -

Syntax

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

Wie oben gezeigt, kann ein Objekt skalare Werte, Funktionen und Strukturen wie Arrays und Tupel enthalten.

Beispiel: Objektliteralnotation

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

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Die Ausgabe des obigen Codes ist wie folgt:

Tom 
Hanks

TypeScript-Typvorlage

Angenommen, Sie haben ein Objektliteral in JavaScript als - erstellt

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

Wenn Sie einem Objekt einen Wert hinzufügen möchten, können Sie mit JavaScript die erforderlichen Änderungen vornehmen. Angenommen, wir müssen dem Personenobjekt später eine Funktion hinzufügen. So können Sie dies tun.

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

Wenn Sie denselben Code in Typescript verwenden, gibt der Compiler einen Fehler aus. Dies liegt daran, dass in Typescript konkrete Objekte eine Typvorlage haben sollten. Objekte in Typescript müssen eine Instanz eines bestimmten Typs sein.

Sie können dies mithilfe einer Methodenvorlage in der Deklaration lösen.

Beispiel: Typoskript-Typvorlage

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

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Die Ausgabe des obigen Codes ist wie folgt:

hello Tom

Objekte können auch als Funktionsparameter übergeben werden.

Beispiel: Objekte als Funktionsparameter

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)

Das Beispiel deklariert ein Objektliteral. Der Funktionsausdruck wird beim Übergeben eines Personenobjekts aufgerufen.

Beim Kompilieren wird folgender JavaScript-Code generiert.

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

Seine Ausgabe ist wie folgt -

first name :Tom 
last name :Hanks

Sie können ein anonymes Objekt im laufenden Betrieb erstellen und übergeben.

Beispiel: Anonymes Objekt

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

Beim Kompilieren wird folgender JavaScript-Code generiert.

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

Seine Ausgabe ist wie folgt -

first name :Sachin 
last name :Tendulkar

Ententippen

Bei der Ententypisierung werden zwei Objekte als vom gleichen Typ betrachtet, wenn beide dieselben Eigenschaften haben. Durch die Typisierung von Enten wird das Vorhandensein bestimmter Eigenschaften in den Objekten und nicht deren tatsächlicher Typ überprüft, um deren Eignung zu überprüfen. Das Konzept wird im Allgemeinen durch den folgenden Satz erklärt:

"Wenn ich einen Vogel sehe, der wie eine Ente geht und wie eine Ente schwimmt und wie eine Ente quakt, nenne ich diesen Vogel eine Ente."

Der TypeScript-Compiler implementiert das Enten-Typisierungssystem, das die schnelle Objekterstellung unter Wahrung der Typensicherheit ermöglicht. Das folgende Beispiel zeigt, wie wir Objekte, die keine Schnittstelle explizit implementieren, aber alle erforderlichen Elemente enthalten, an eine Funktion übergeben können.

Beispiel

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