Unlike JavaScript, errors will happen when you initialize typed variable to empty object in TypeScript. Keep reading to know the right ways to get this done.

Initialize Typed Variable To Empty Object In TypeScript

TypeScript allows you to group data with object types, just like with JavaScript. You can define an object with either an interface or a type alias:

interface Site {

    name: string;

    rank: number;

    URL: string;

};

type Site = {

    name: string;

    rank: number;

    URL: string;

};

Interfaces and type aliases are strikingly similar, except for the fact that you extend the interface, but this task is impossible with type aliases.

Once you have an interface or type alias, you can initialize an object of this object type:

const site1: Site = {

    name: "ITTutoria",

    rank: 1,

    URL: "https://ittutoria.net",

};

console.log(site1.name)

console.log(site1.URL)

Output:

ITTutoria

https://ittutoria.net

There are times when you want to have a new Site object but don’t have enough information to assign values to its properties. TypeScript requires regular object initialization to provide all the properties with necessary values. Any attempt to create an empty object will result in errors:

const site1: Site = {};

Output:

typescript.ts:17:7 - error TS2739: Type '{}' is missing the following properties from type 'Site': name, rank, URL

17 const site1: Site = {};

         ~~~~~

Found 1 error in typescript.ts:17

You will need to use other ways to create such an empty object in TypeScript.

Using Type Assertions

Type assertions are designed to help TypeScript developers write code when they know more about the type than the compiler.

A common application of this feature is when you use the document.getElementById() method to get a HTML Element object. TypeScript is aware that it should expect such an object but can’t guess which particular elements the method may return.

As the developer of your website, you might already know for sure that the document.getElementById() method will return a HTMLButtonElement interface. In this case, a type assertion can be used to specify the type:

const myButton = document.getElementById("loginButton") as HTMLButtonElement;

Like other type annotations, the compiler will remove type assertions, and they should have no effect on your code’s runtime behavior.

Unless you use a TSX file to write your code, angle brackets can also be used to specify a specific type:

const myButton = <HTMLButtonElement>document.getElementById("loginButton");

Note: if you want to know how to create a HTML button in JavaScript, check out this guide.

Here is you can use these syntaxes to apply type assertions to our example:

const site1 = {} as Site;

site1.name = "ITTutoria";

site1.URL = "https://ittutoria.net";

console.log("Visit", site1.name, "at", site1.URL);

const site2 = <Site>{};

site2.name = "Stack Overflow";

site2.URL = "https://stackoverflow.com/";

console.log("Visit", site2.name, "at", site2.URL);

Output:

Visit ITTutoria at https://ittutoria.net

Visit Stack Overflow at https://stackoverflow.com/

Using Partial<Type>

Type assertions are an elegant solution for our purpose, but they aren’t the only one. You can, for example, declare a new type that has the same properties as the original type, except that they are now optional. After this, you can create an empty object instance of this new object type.

You can use Partial<Type> to construct such type:

const site3: Partial<Site> = {};

site3.name = "Quora";

site3.URL = "https://www.quora.com/";

console.log("Visit", site3.name, "at", site3.URL);

Output:

Visit Quora at https://www.quora.com/

Note: you must have TypeScript 2.1 or above to make use of this feature.

Summary

You can initialize typed variable to empty object in TypeScript with type assertions or Partial<Type>. Both of them remove the regular requirements the compiler normally demands when you create an object.