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:

• Solution For The Error: Could not find declaration file for module ‘lodash’ #
• Cannot invoke an object which is possibly ‘undefined’ in TS
• Property does not exist on type Object 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