- 3 years ago
- Afaq Arif
- 1257 Views
-
1
In this chapter, we will discuss about objects in TypeScript with examples.
An object is an example that includes a set of key-value pairs. The values can be scalar values or functions or even an array of other objects. The syntax is given below.
Syntax
var object_name = {
key1: “value1”, //scalar value
key2: “value”,
key3: function() {
//functions
},
key4:[“content1”, “content2”] //collection
};
As shown above, an object can have scalar values, functions and structures like arrays and tuples.
Example: Object Literal Notation
var person = {
firstname:"Tomy",
lastname:"Hanks"
};
//access the object values
console.log(person.firstname)
console.log(person.lastname)
On composing, it will generate the same code in JavaScript.
The output of the above code is as follows.
TypeScript Type Template
Let’s say you created an object precisely in JavaScript as
var person = {
firstname:"Tomy",
lastname:"Hanks"
};
If you want to add some value to an object, JavaScript allows you to make the necessary modification. Suppose we need to add a function to the person object later this is the way you can do this.
person.sayHello = function(){ return "hello";}
If you use the same code in Typescript the compiler gives an error. This is because, in Typescript, concrete objects should have a typical template. Objects in Typescript must be a case of a particular type.
You can solve this by using a method template in declaration.
Example: Typescript Type template
var person = {
firstName:"Tomy",
lastName:"Hanks",
sayHello:function() { } //Type template
}
person.sayHello = function() {
console.log("hello "+person.firstName)
}
person.sayHello()
It shows the same code in JavaScript on composing.
The output of the above code is as follows.
Objects can also be passed as parameters to function.
Example: Objects as function parameters
var person = {
firstname:"Tomy",
lastname:"Hanks"
};
var invokeperson = function(obj: { firstname:string, lastname :string }) {
console.log("first name :"+obj.firstname)
console.log("last name :"+obj.lastname)
}
invokeperson(person)
The example states an object precise. The function expression is called on person object.
On composing. it will generate following JavaScript code.
//Generated by typescript 1.8.10
var person = {
firstname: "Tomy",
lastname: "Hanks"
};
var invokeperson = function (obj) {
console.log("first name :" + obj.firstname);
console.log("last name :" + obj.lastname);
};
invokeperson(person);
Its output is as follows.
first name: Tomy
last name: Hanks
You can create and pass an anonymous object on the fly.
Example: Anonymous Object
var invokeperson = function(obj:{ firstname:string, lastname :string}) {
console.log("first name :"+obj.firstname)
console.log("last name :"+obj.lastname)
}
invokeperson({firstname:"Atif",lastname:"Aslam"});
It runs following JavaScript code on composing.
//Generated by typescript 1.8.10
var invokeperson = function (obj) {
console.log("first name :" + obj.firstname);
console.log("last name :" + obj.lastname);
};
invokeperson({ firstname: "Atif", lastname: "Aslam" });
invokeperson({ firstname: "Atif", lastname: "Aslam" });
Its output is as follows.
first name: Atif
last name: Aslam
Duck-typing
In duck-typing, two objects are considered to be of the same type if both have similar properties. Duck-typing confirms the presence of certain properties in the objects, rather than their actual type, to check their propriety. The concept is generally explained by the following phrase.
“When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.”
The TypeScript compiler performs the duck-typing system. It allows object creation on the fly while keeping type safety. The following example shows how we can pass objects that don’t clearly implement an interface but contain all of the required members to a function.
Example
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})
- 3 years ago
- Afaq Arif
- 1257 Views
-
1