How to initialize a typed, empty object using an interface in Typescript?

Sometimes you might want to create an empty object implement interface to set value later. You can do it by type assertion. So how to initialize a typed, empty object using an interface in Typescript? Let’s go into detail.

Initialize a typed, empty object using an interface in Typescript

Using type assertion

You can create an empty object first, then use type assertion with the ‘as’ keyword to assign an interface to the object. You can also set the value for the property later.

Example:

// Create an interface
interface personDetail {
    name: string,
    age: number,
    address: string,
    id: number,
    userName: string
}

// Create an empty object and implement personDetail interface
const person1 = {} as personDetail

// Set value for the property in personDetail interface
person1.name = 'Jonma'
person1.age = 25
person1.address = 'England'

console.log(person1)

Output:

[LOG]: {
  "name": "Jonma",
  "age": 25,
  "address": "England"
} 

Because my empty object implements the personDetail interface, it will also get an error if I set invalid property or the wrong type of property.

Example:

interface personDetail {
    name: string,
    age: number,
    address: string,
    id: number,
    userName: string
}

const person1 = {} as personDetail

person1.name = 'Jonma'
person1.age = 25
person1.address = 'England'
person1.value = 100000000 // Property' value' does not exist on type 'personDetail'
person1.age = 'twenty five' // Type 'string' is not assignable to type 'number'

console.log(person1)

Here is the first error I get because I set it to invalid property that does not exit in the personDetail interface. The second error is because I set the string value to a number expecting property.

Setting empty property

If you don’t want to use type assertion and want to initialize the object with empty value property, you can follow this way.

Example:

interface personDetail {
    name: string,
    age: number,
    address: string,
    id: number,
    userName: string
}
   
// Initialize an object implement personDetail type with empty value properties
const person1: personDetail = {
    name: "",
    age: 0,
    address: "",
    id: 0,
    userName:""
}
   
// Set value for properties
person1.name = 'Jonma'
person1.age = 25
person1.address = 'England'

console.log(person1)

Output:

[LOG]: {
  "name": "Jonma",
  "age": 25,
  "address": "England",
  "id": 0,
  "userName":" "
} 

You can use this solution when you want to set the default value to the properties of the object, and you can set the value later in need.

Using the Partial utility type

The Partial utility type will help you make all the properties in your object optional so that you don’t need to set the value to the properties.

Example:

interface personDetail {
    name: string,
    age: number,
    address: string,
    id: number,
    userName: string
}

// Using the Partial utility type to initialize an object, implement personDetail type with empty value properties
const person1: Partial<personDetail>= {}

console.log(person1)

Output:

[LOG]: {} 

Summary

In this article, I showed you how to initialize a typed, empty object using an interface in Typescript. Based on your purpose, you can use type assertion, create an object with empty properties value or use Partial utility type to make all properties in the object optional.

Maybe you are interested:

• Check if an Object implements an interface in TypeScript
• Define an Interface for Array of Objects in TypeScript
• Check If An Object Is Empty In TypeScript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm