- TypeScript - Home
- TypeScript - Roadmap
- TypeScript - Overview
- TypeScript - Environment Setup
- TypeScript - Basic Syntax
- TypeScript vs. JavaScript
- TypeScript - Features
- TypeScript - Variables
- TypeScript - let & const
- TypeScript - Operators
- TypeScript - Types
- TypeScript - Type Annotations
- TypeScript - Type Inference
- TypeScript - Numbers
- TypeScript - Strings
- TypeScript - Boolean
- TypeScript - Arrays
- TypeScript - Tuples
- TypeScript - Enums
- TypeScript - Any
- TypeScript - Never
- TypeScript - Union
- TypeScript - Literal Types
- TypeScript - Symbols
- TypeScript - null vs. undefined
- TypeScript - Type Aliases
- TypeScript Control Flow
- TypeScript - Decision Making
- TypeScript - If Statement
- TypeScript - If Else Statement
- TypeScript - Nested If Statements
- TypeScript - Switch Statement
- TypeScript - Loops
- TypeScript - For Loop
- TypeScript - While Loop
- TypeScript - Do While Loop
- TypeScript Functions
- TypeScript - Functions
- TypeScript - Function Types
- TypeScript - Optional Parameters
- TypeScript - Default Parameters
- TypeScript - Anonymous Functions
- TypeScript - Function Constructor
- TypeScript - Rest Parameter
- TypeScript - Parameter Destructuring
- TypeScript - Arrow Functions
- TypeScript Interfaces
- TypeScript - Interfaces
- TypeScript - Extending Interfaces
- TypeScript Classes and Objects
- TypeScript - Classes
- TypeScript - Objects
- TypeScript - Access Modifiers
- TypeScript - Readonly Properties
- TypeScript - Inheritance
- TypeScript - Static Methods and Properties
- TypeScript - Abstract Classes
- TypeScript - Accessors
- TypeScript - Duck-Typing
- TypeScript Advanced Types
- TypeScript - Intersection Types
- TypeScript - Type Guards
- TypeScript - Type Assertions
- TypeScript Type Manipulation
- TypeScript - Creating Types from Types
- TypeScript - Keyof Type Operator
- TypeScript - Typeof Type Operator
- TypeScript - Indexed Access Types
- TypeScript - Conditional Types
- TypeScript - Mapped Types
- TypeScript - Template Literal Types
- TypeScript Generics
- TypeScript - Generics
- TypeScript - Generic Constraints
- TypeScript - Generic Interfaces
- TypeScript - Generic Classes
- TypeScript Miscellaneous
- TypeScript - Triple-Slash Directives
- TypeScript - Namespaces
- TypeScript - Modules
- TypeScript - Ambients
- TypeScript - Decorators
- TypeScript - Type Compatibility
- TypeScript - Date Object
- TypeScript - Iterators and Generators
- TypeScript - Mixins
- TypeScript - Utility Types
- TypeScript - Boxing and Unboxing
- TypeScript - tsconfig.json
- From JavaScript To TypeScript
- TypeScript Useful Resources
- TypeScript - Quick Guide
- TypeScript - Cheatsheet
- TypeScript - Useful Resources
- TypeScript - Discussion
TypeScript - Objects
An object in TypeScript is an instance which contains set of key value pairs. The key value pairs are also referred as object properties. The values can be scalar values or functions or even array of other objects. If a property's value is a function, that property is known as method.
Syntax
The syntax to create an object in TypeScript is given below
var object_name = { key1: "value1", //scalar value key2: "value", key3: function() { //functions }, key4:[ "content1", "content2"] //collection }; As shown above, an object can contain scalar values, functions and structures like arrays and tuples.
Type Annotations
In TypeScript, we should annotate the object properties as follows
let person: {name: string, age: number} = { name: "Tom Hanks", age: 35, } In the above example we annotated the properties name and age of the person object.
We can also use interface to create type for object properties. Look the below example
interface PersonType { fullname: string; age: number } var person: PersonType = { fullname:"Tom Hanks", age:32 }; Object Literal Notation
The object literal notation is the easiest way to create an object in TypeScript. We use curly braces ({}) to create object. Each property of the object is separated by a comma. Each property is written as property name (key) followed by colon (:) followed by property value.
Example
In the example below, we have created an object named person containing two properties. The first property is firstname: "Tom" and the second property is lastname: "Hanks". We access the property values and print them in console.
var person:{ firstName: string, lastName: string}= { firstName:"Tom", lastName:"Hanks" }; //access the object values console.log(person.firstName) console.log(person.lastName) On compiling, it will generate the following code in JavaScript.
var person = { firstName: "Tom", lastName: "Hanks" }; //access the object values console.log(person.firstName); console.log(person.lastName); Output
Tom Hanks
TypeScript Type Template
Let's say you created an object literal in JavaScript as
var person = { firstname:"Tom", lastname:"Hanks" }; In case 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 type template. Objects in Typescript must be an instance of a particular type.
You can solve this by using a method template in declaration.
Example: Typescript Type template
var person = { firstName:"Tom", lastName:"Hanks", sayHello:function() { } //Type template } person.sayHello = function() { console.log("hello "+person.firstName) } person.sayHello() On compiling, it will generate the same code in JavaScript.
Output
The above generated JavaScript code will produce the following output -
hello Tom
Objects as Function Parameters
Objects can also be passed as parameters to function.
Example: Objects as function parameters
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) The example declares an object literal. The function expression is invoked passing person object.
On compiling, it will generate following JavaScript code.
//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); Output
first name :Tom last name :Hanks
Anonymous Objects
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:"Sachin",lastname:"Tendulkar"}); On compiling, it will generate following JavaScript code.
//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" }); Output
first name :Sachin last name :Tendulkar
Duck-typing
In duck-typing, two objects are considered to be of the same type if both share the same set of properties. Duck-typing verifies the presence of certain properties in the objects, rather than their actual type, to check their suitability. 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 implements the duck-typing system that allows object creation on the fly while keeping type safety. The following example shows how we can pass objects that dont explicitly 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}) 