TypeScript | Declare an Empty Object for a Typed Variable

by

Creating empty objects is a common practice in the JavaScript world as there are property values that are not known when generating them. You can create objects on the flight without having any issues. In TypeScript this could be different as there is a dependency based on the TypeScript configuration defined in a tsconfig.json file. These configurations can make it more complex to write your code or can be as flexible as you would with plain JavaScript.

Someone might wonder, Why creating an empty object if you are going to update the values once you know the property values after executing X line of code?

Depending on how you are writing code, the object can be used in different scopes. One example is when an object is defined in a class with unknown property values and updated when triggering the class’ internal methods.

Regardless of what the case is, let’s see different ways to generate empty objects in TypeScript.

Option 1: Generate a New Class Instance

One way to generate an empty object for typed variables is by creating an instance of a class that implements a type definition. In this way, the new class is treated with the same shape as a typed variable.

type HouseType = {
  size: string;
  color: string;
  totalBedrooms: number;
  totalBathrooms: number;
  hasBackyard: boolean;
  hasGarage: boolean;
}

class House implements HouseType {
  size: string;
  color: string;
  totalBedrooms: number;
  totalBathrooms: number;
  hasBackyard: boolean;
  hasGarage: boolean;
}

const myHouse = new House();

Depending on what you are looking to accomplish, this approach will allow you to have additional properties in the House class on top of the type HouseType. 

class House implements HouseType {
  size: string;
  color: string;
  totalBedrooms: number;
  totalBathrooms: number;
  hasBackyard: boolean;
  hasGarage: boolean;

  // additional properties not found in HouseType
  location: string;
  yearBuilt: number;
}

Option 2: Use Type Assertions

If you didn’t know the meaning or name for using the keyword as in TypeScript was called, now you will know. This is called type assertions. TypeScript infers what a variable should be, a number, a string, a Date, or a custom object. When using the as syntax, we are telling TypeScript we know the type of a variable regardless of what TypeScript thinks is the type of the variable.

const myHouse: HouseType = {} as HouseType;
// or
const myHouse = {} as HouseType;

Option3: Defining the Object’s Generic Type

Have you ever seen the a T when hovering over functions? Something like the following:

function generateRandomArray<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}

This T is known as a generic type. In the previous example, if supplied the type when triggering the generateRandomArray function, we will know the type of array we generate. In the case I want to generate an array of numbers, it will look like the following:

const myNumArr = generateRandomArray<number>([100, 200, 300]);

If attempting to type any parameter value

const myNumArr = generateRandomArray<number>(["Foo", "Bar"]);

TypeScript will tell you right away Type 'string' is not assignable to type 'number'.ts(2322).

This will allow us to generate an empty array as well:

const myNumArr = generateRandomArray<number>([]);

In a similar way, we can define the generic type when creating an empty object.

const myHouse: HouseType = <HouseType>{};
// or
const myHouse = <HouseType>{};

More TypeScript Tips!

There is a list of TypeScript tips you might be interested in checking out

Did you like this TypeScript tip?

Share your thoughts by replying on Twitter of Become A Better Programmer or to personal my Twitter account.