TypeScript Objects

An object is an instance that contains a set of key-value pairs. The values can be scalars, functions, arrays, objects, etc., as shown in the following example:

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

The above object contains scalars, functions, and collections (arrays or tuples).

Object Example

TypeScript

var sites = { 
   site1: "tutorialpro", 
   site2: "Google" 
}; 
// Accessing object values
console.log(sites.site1) 
console.log(sites.site2)

Compiling the above code yields the following JavaScript code:

JavaScript

var sites = { 
   site1: "tutorialpro", 
   site2: "Google" 
}; 
// Accessing object values
console.log(sites.site1) 
console.log(sites.site2)

The output is:

tutorialpro
Google

TypeScript Type Template

If we define an object in JavaScript:

var sites = { 
   site1: "tutorialpro", 
   site2: "Google" 
};

To add a method to this object, we can modify it as follows:

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

Using this approach in TypeScript will result in a compilation error because objects in TypeScript must be instances of a specific type.

TypeScript

var sites = {
    site1: "tutorialpro",
    site2: "Google",
    sayHello: function () { } // type template
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

Compiling the above code yields the following JavaScript code:

JavaScript

var sites = {
    site1: "tutorialpro",
    site2: "Google",
    sayHello: function () { } // type template
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

The output is:

hello tutorialpro

Additionally, objects can also be passed as parameters to functions, as shown in the following example:

TypeScript

var sites = { 
    site1: "tutorialpro", 
    site2: "Google",
}; 
var invokesites = function(obj: { site1: string, site2: string }) { 
    console.log("site1 :" + obj.site1) 
    console.log("site2 :" + obj.site2) 
} 
invokesites(sites)

Compiling the above code yields the following JavaScript code:

JavaScript

var sites = {
    site1: "tutorialpro",
    site2: "Google"
};
var invokesites = function (obj) {
    console.log("site1 :" + obj.site1);
    console.log("site2 :" + obj.site2);
};
invokesites(sites);

The output is:

site1 :tutorialpro
site2 :Google

Duck Typing

Duck typing is a style of dynamic typing in which an object's valid semantics are determined not by inheritance from a specific class or implementation of a specific interface, but by the presence of certain methods and properties.

This can be expressed as:

"If it walks like a duck, swims like a duck, and quacks like a duck, then it can be called a duck."

In duck typing, the focus is on the behavior of the object rather than its type. For example, in a language that does not use duck typing, we might write a function that takes an object of type "duck" and calls its "walk" and "quack" methods. In a language that uses duck typing, such a function can take an object of any type and call its "walk" and "quack" methods. If these methods do not exist, a runtime error will occur. Any object with the correct "walk" and "quack" methods can be accepted by the function, leading to the above expression, and this method of determining types is thus named.

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

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

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