Type 'X' has no properties in common with type 'Y' in TS

avatar

Borislav Hadzhiev

Last updated: Mar 19, 2022

banner

Photo from Unsplash

Type 'X' has no properties in common with type 'Y' in TS #

The error "Type 'X' has no properties with type 'Y'" occurs when we try to assign anything to a weak type when there's no overlap in properties. To solve the error, declare any overlapping properties if they exist or use a type assertion.

type has no properties in common with type

Here is an example of how the error occurs.

index.ts
// 👇️ Weak type (all properties optional) interface Employee { id?: number; salary?: number; } function getEmployee(emp: Employee) { return emp; } // 👇️ No overlap in properties with Employee const emp = { name: 'James', }; // ⛔️ Error: Type '{ name: string; }' has no // properties in common with type 'Employee'.ts(2559) getEmployee(emp);

The Employee type is a weak type, because all of its properties are optional.

The question mark is used to mark the type's properties as optional and means that the property can either be of the specified type or be undefined.

The Employee type is a weak type because you could create an empty object that conforms to the type.

index.ts
interface Employee { id?: number; salary?: number; } // ✅ This is ok const e: Employee = {};

The cause of the error is - we pass the emp object to a function that expects an object of type Employee, and the emp variable has no overlap with the Employee type.

One way to solve the error is to use a type assertion.

index.ts
interface Employee { id?: number; salary?: number; } function getEmployee(emp: Employee) { return emp; } const emp = { name: 'James', }; // 👇️ {name: 'James'} getEmployee(emp as Employee); // 👈️ use type assertion
With the type assertion, we are effectively telling TypeScript that we know better and the emp variable is definitely of type Employee.

An alternative solution is to make sure there is overlap between the Employee type and the emp object. For example, we can add the name property to the Employee type.

index.ts
interface Employee { id?: number; salary?: number; name?: string; // 👈️ added name } function getEmployee(emp: Employee) { return emp; } const emp = { name: 'James', }; // 👇️ {name: 'James'} console.log(getEmployee(emp));

We added the name property to the Employee type, so now there is overlap between the type and the emp object.

This solves the error because there is an overlap in properties.

If you're not able to alter the type, you can add an overlapping property to the object.

index.ts
interface Employee { id?: number; salary?: number; } function getEmployee(emp: Employee) { return emp; } const emp = { name: 'James', id: 0, // 👈️ added id property }; // 👇️ {name: 'James'} console.log(getEmployee(emp));

We added the id property to the emp object, so there is an overlap between the Employee type and the object, which also solves the error.

The error "Type 'X' has no properties with type 'Y'" can also be solved by using an index signature.

index.ts
interface Employee { id?: number; salary?: number; [key: string]: any; // 👈️ added index signature } function getEmployee(emp: Employee) { return emp; } const emp = { name: 'James', }; // 👇️ {name: 'James'} console.log(getEmployee(emp));

The {[key: string]: any} syntax is an index signature in TypeScript and is used when we don't know all the names of a type's properties and the shape of the values ahead of time.

The index signature in the example means that when an object of type Employee is indexed with a string, it will return a value of any type.

You don't have to use any as the type, you can be much more specific for better type safety. However, note that the type of the index signature has to be a union type of all of the possible types in the interface.

index.ts
interface Employee { id?: number; salary?: number; // 👇️ index signature with better type safety [key: string]: string | number | undefined; } const e: Employee = {}; function getEmployee(emp: Employee) { return emp; } const emp = { name: 'James', }; // 👇️ {name: 'James'} console.log(getEmployee(emp));

We specified that when an object of type Employee is indexed with a string key, it will return a value of type string, number or undefined.

This is necessary, because our id and salary properties have values of type number or undefined (because they are optional), and the id and salary are also string keys.

This approach resolves the error because now there is an overlap between the Employee type and the emp variable, since the Employee type now covers any string key.

Conclusion #

The error "Type 'X' has no properties with type 'Y'" occurs when we try to assign anything to a weak type when there's no overlap in properties. To solve the error, declare any overlapping properties if they exist or use a type assertion.

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.