How To Solve The Error “Object Literal May Only Specify Known Properties” In TS

How To Solve The Error: Object Literal May Only Specify Known Properties In TS

Knowing how to solve the error “Object literal may only specify known properties” in TS will give you more confidence when working with object types. So how to do it? Let’s go into detail now.

What causes error “Object literal may only specify known properties” in TS

The error happens when you try to interact with properties in an object that doesn’t exist.

Example:

type InforDetail = {
   	name: string,
   	age: number,
   	country: string,
}

const person: InforDetail = { 
  	name: 'James', 
  	age: 28, 
  	country: 'England', 
  	id: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
};

 The error:

· Type '{ name: string; age: number; country: string; id: number[]; }' is not assignable to type 'InforDetail'. Object literal may only specify known properties, and 'id' does not exist in type 'InforDetail'.

Here I get the error because the InforDetail type doesn’t exist id property, but I have tried to create an object with the id property.

The solutions for this error

Create property

To solve the above error, I can create a new id property in the InforDetail type.

Example:

type InforDetail = {
	name: string,
    age: number,
    country: string,
    id: number[]
}

const person: InforDetail = { 
  	name: 'James', 
  	age: 28, 
  	country: 'England', 
  	id: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
};

console.log(person);

Output:

{ "name": "James",
"age": 28, "country": "England", "id":
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] }

With this solution, you should define every property that you might use.

Create new object

You can create a new object that extends from your origin object. Then add a new property that you might use. In that way, you won’t have to modify your original object.

Example:

interface InforDetail {
  	name: string,
    age: number,
    country: string,
};

interface NewInforDetail extends InforDetail {
 	id: number[]
}

const person: NewInforDetail = { 
  	name: 'James', 
  	age: 28, 
  	country: 'England', 
  	id: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
};

console.log(person);

Here I create a new object interface type and add new id property.

Use index signatures

The index signatures are beneficial when you know some properties must exist, but some properties are possible values ​​that can sometimes exist.

Example:

interface InforDetail {
    name: string,
    country: string,
    [address: string]: string
};

const person: InforDetail = { 
  	name: 'James', 
  	country: 'England',
	address: 'Portskerra',
	city: '32 St Denys Road ',
	countryCallingCode: '+44'
}

console.log(person);

Here I specify that when the object has a address property is string, it will return a value with a string type. You can use the ‘union type’ if you want to add properties with more types.

Example:

interface InforDetail {
    name: string,
    country: string,
    [address: string]: string | number | number[]
};

const person: InforDetail = { 
  	name: 'James', 
  	country: 'England',
  	address: 'Portskerra',
	city: '32 St Denys Road ',
	countryCallingCode: '+44',
	homeNumber: 3,
	id: [12, 34, 23]
}

console.log(person);

I can add new values with type string, number, or a number array.

Summary

In this article, I have shown you how to solve the error “Object literal may only specify known properties” in TS. You can create a new property in the object type you want to use, create a new object type with that property or use index signatures. Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *