TypeScript - Objetos

Un objectes una instancia que contiene un conjunto de pares clave-valor. Los valores pueden ser valores o funciones escalares o incluso una matriz de otros objetos. La sintaxis se da a continuación:

Sintaxis

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

Como se muestra arriba, un objeto puede contener valores escalares, funciones y estructuras como matrices y tuplas.

Ejemplo: notación literal de objeto

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

Al compilar, generará el mismo código en JavaScript.

La salida del código anterior es la siguiente:

Tom 
Hanks

Plantilla de tipo de TypeScript

Digamos que creó un objeto literal en JavaScript como -

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

En caso de que desee agregar algún valor a un objeto, JavaScript le permite realizar la modificación necesaria. Supongamos que necesitamos agregar una función al objeto persona más adelante, esta es la forma en que puede hacerlo.

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

Si usa el mismo código en TypeScript, el compilador da un error. Esto se debe a que en TypeScript, los objetos concretos deben tener una plantilla de tipo. Los objetos en TypeScript deben ser una instancia de un tipo particular.

Puede resolver esto utilizando una plantilla de método en la declaración.

Ejemplo: plantilla de tipo mecanografiado

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

Al compilar, generará el mismo código en JavaScript.

La salida del código anterior es la siguiente:

hello Tom

Los objetos también se pueden pasar como parámetros para funcionar.

Ejemplo: objetos como parámetros de función

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)

El ejemplo declara un objeto literal. La expresión de la función se invoca pasando un objeto persona.

Al compilar, generará el siguiente código JavaScript.

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

Su salida es la siguiente:

first name :Tom 
last name :Hanks

Puede crear y pasar un objeto anónimo sobre la marcha.

Ejemplo: objeto anónimo

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

Al compilar, generará el siguiente código JavaScript.

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

Su salida es la siguiente:

first name :Sachin 
last name :Tendulkar

Tipeo de pato

En la escritura pato, se considera que dos objetos son del mismo tipo si ambos comparten el mismo conjunto de propiedades. Duck-typing verifica la presencia de ciertas propiedades en los objetos, en lugar de su tipo real, para comprobar su idoneidad. El concepto se explica generalmente con la siguiente frase:

"Cuando veo un pájaro que camina como un pato y nada como un pato y grazna como un pato, le llamo pato".

El compilador de TypeScript implementa el sistema de escritura de pato que permite la creación de objetos sobre la marcha manteniendo la seguridad de los tipos. El siguiente ejemplo muestra cómo podemos pasar objetos que no implementan explícitamente una interfaz pero que contienen todos los miembros requeridos a una función.

Ejemplo

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