TypeScript: How to Declare Empty Object for Typed Variable

Reading Time: 2 minutes

Declare empty object for JavaScript is straight forward but it gets a bit complicated when it come to TypeScript. There are 2 methods to allow us to create empty object base on different usage. Let’s visit them.

Methods to Declare Empty Object

In order to declare an object to be empty, we are actually telling TypeScript that all of its attribute can be empty. The 2 ways we can do it are:

• With type keyword
• Create new class instance

With type keyword

By using the type keyword, we will first create a variable defining all the attributes inside this object. Usually the attributes are primitive type. After creating the type, we can create the variable and make it that type with the internal values empty.

To do that, we can implicitly or explicitly indicating the variable as partial.

Implicitly indicating Partial

Below shows the 3 ways of implicitly defining the attributes as optional. All 3 ways will behave the same where we can assign the attributes with values after that seperately.

type PersonType = {
  name: string;
  age: number;
};

// Here we create person1 and person2 as Person type. 
const person1 = {} as PersonType;
const person2: PersonType = {};
const person3 = <PersonType>{};

console.log(person1);
console.log(person2);
console.log(person3);
// { ... }   <-- 3 times

person1.name = 'myname';
console.log(person1);
//{
//  name: "myname"
//}

person2.age = 11;
console.log(person2);
//{
//  age: 11
//}

Explicitly indicating Partial

Explicitly is the same as implicitly except that we will be using Partial keyword in the declaration.

type PersonType = {
  name: string;
  age: number;
};

// Here we create person1 and person2 as Person type. 
const person1: Partial<PersonType> = {};

console.log(person1);
// { ... }

person1.name = 'myname';
console.log(person1);
//{
//  name: "myname"
//}

Create new class instance

The above method is the more common one as it requires lesser code compare to writing a class.

Here, we will also be creating a variable defining all the attributes inside this object with type. Then we will create a Class object implementing this type. The problem with this method is that there will be duplicate code thus make it harder to maintain.

However, the advantage is that you can have additional properties on top of those define in type.

type PersonType = {
  name: string;
  age: number;
};

Class Person implements PersonType {
  name: string;
  age: number;
}

Class Robot implements PersonType {
  name: string;
  age: number;

  // New attribute
  material: string;
}

const person1 = new Person();
const robot1 = new Robot();

person1.name = 'myname';
console.log(person1);
//{
//  name: "myname"
//}

Conclusion

Here, we have look at the 2 methods of declaring empty object in TypeScript. If there is no need to extend the type, we can create the object with Partial keyword. We can use the class instance method if we want to extend the initial type defined.