A type literal property cannot have an initializer in TS

avatar

Borislav Hadzhiev

Last updated: Mar 13, 2022

banner

Photo from Unsplash

A type literal property cannot have an initializer in TS #

The error "A type literal property cannot have an initializer" occurs when try to provide a value when typing an object. To solve the error, separate your typings from your default values in your class properties or object definitions.

Here is an example of how the error occurs.

index.ts
export class Employee { address: { // ⛔️ Error: A type literal property // cannot have an initializer.ts(1247) country: string = 'Germany'; city: string; }; }

We are trying to provide a value for the address.country property, but are not allowed to mix the typings and value declarations.

To solve the error, you have to declare the typings first and then set the default values.

index.ts
type Address = { country: string; city: string; }; export class Employee { address: Address = { country: 'Chile', city: 'Santiago', }; }

The example above uses a type alias to set the types for the country and city properties in the address object.

You could use the following approach when defining class properties for primitive types:

index.ts
export class Employee { // ✅ this is valid country: string = 'Germany'; getCountry() { return this.country; } } const emp = new Employee(); console.log(emp.country); // 👉️ "Germany"

You can set types and default values for parameters in a class's constructor in the same way. Here is an example constructor function that takes an object and uses default values.

index.ts
type Address = { country: string; city: string; }; export class Employee { constructor( public address: Address = { country: 'Chile', city: 'Santiago', }, ) { this.address = address; } getAddress() { return { country: this.address.country, city: this.address.city, }; } } const emp = new Employee({ country: 'Brazil', city: 'São Paulo' }); // 👇️ {country: 'Brazil', city: 'São Paulo'} console.log(emp.getAddress());

Notice that we always declare the types after a colon, and optionally provide default values after an equal sign.

And here is an example of a constructor function that defines types and default values for its parameters.

index.ts
export class Employee { constructor(public name: string = 'Tom', public salary: number = 100) { this.name = name; this.salary = salary; } getData() { return { name: this.name, salary: this.salary, }; } } const emp = new Employee('Jeff', 200); // 👇️ {name: 'Jeff', salary: 200} console.log(emp.getData());

Note that defining default values is optional.

Conclusion #

The error "A type literal property cannot have an initializer" occurs when try to provide a value when typing an object. To solve the error, separate your typings from your default values in your class properties or object definitions.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.