TypeScript Objects Tutorial

How to create standalone objects

Because Javascript is template based, we can create objects in TypeScript directly, instead of needing classes first.

There are 2 ways to create objects.

• Object Literals
• Instantiating an object with a constructor method and new

note We should compile the following scripts with the compiler flag --target es6 or greater.

How to create an object literal

We create an object literal by assigning a code block to a variable.

Inside the code block, we add the property, followed by a colon operator and the value we want to assign to it. If we define multiple properties, they’re separated with a comma.

let object_name = {
  property: value,
  property: value
}

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 29
}

We access the properties through dot notation, using the object’s name.

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 32
}

console.log("Name: " + person.firstName + " " + person.lastName)
console.log("Age: " + person.age)

How to instantiate a new object with a constructor method

A constructor is a function that initializes the object with values we specify.

note An object constructor is a little bit different than a class constructor, which we discuss in the tutorial lesson about class constructors .

First, we need to create a function with all the properties we want to initialize when the object is instantiated, as function parameters.

 function constructor_name(property1, property2, ...) {}

Inside the function we assign the parameters to properties in the object. To do this, we have to specify the this keyword, which refers to the calling object.

tip The variables and parameters may have the same names.

function constructor_name(property1, property2, ...) {
  this.property1 = property1
  this.some_property_name = property2
}

Anything we pass to the constructor as an argument, will be assigned to the property of the object.

The this keyword references the calling object. We can just imagine the this keyword being replaced by whatever we name our object.*

To instantiate an object with the constructor we create a new instance, as we did before. However, this time we pass the values we want between the parentheses to assign them to the properties of the object.

 let object_name = new constructor_name(argument1, argument2)

As with any other object, we access the properties through dot notation.

function person(first_name, last_name, age) {
  this.fn = first_name
  this.ln = last_name
  this.age = age
}

let p1 = new person("John", "Doe", 29)

console.log("Name: " + p1.fn + " " + p1.ln)
console.log("Age: " + p1.age)

How to define a method within a standalone object

We can define functions inside a standalone object. But, before we define the function, we must first create a variable with the same name as the function and refer to it with the this keyword.

function constructor_name() {
  this.method_name = function_name

  function_name() {
	// body
  }
}

function person(firstName, lastName, age) {
  this.fn = firstName
  this.ln = lastName
  this.age = age

  // function template
  this.walk = walk
  // function itself
  function walk() {
    console.log("Walking...")
  }
}

let p1 = new person("John", "Doe", 29)

p1.walk()

How to pass an object to a function as parameter

We can pass an object to a function as an argument, but we should also add the properties we want available to that object.

To do that, we start by defining a parameter name, followed by a colon as if we want to add a type. After the colon we create a code block, and within the code block we specify the properties we want from the object.

let object_name {
	property_name: property_value
}

function func_name(obj_param: { property_name: property_type } ): return_type {
	// use obj_param.property
}

let person = {
  firstName: "John",
  lastName: "Doe",
  age: "32",
}

function logPerson(obj: { firstName: string, lastName: string, age: string } ): void {
  console.log("Name: " + obj.firstName + " " + obj.lastName)
  console.log("Age: " + obj.age)
}

// 'person' object literal
// as function argument
logPerson(person)

The code won’t break if we don’t specify the properties, but we want to add them explicitly to know exactly how the function can behave. It’s the whole purpose of TypeScript.

let person = {
  firstName: "John",
  lastName: "Doe",
  age: "32",
}

function logPerson(obj) : void {
  console.log("Name: " + obj.firstName + " " + obj.lastName)
  console.log("Age: " + obj.age)
}

// 'person' object literal
// as function argument
logPerson(person)

List of Object methods

The following list of methods are available to objects in TypeScript.

Summary: Points to remember

• We don’t have to create classes to be able to create objects. We can create them directly by either creating object literals, or with a constructor method.
• The this keyword in a constructor method refers to the calling object, the object that will be created from the constructor.
• When passing an object to a function as a parameter, we should specify the object’s properties as well.