“Type ‘X’ is missing the following properties from type ‘Y’” is a common error that shows up in many ways. What is the cause of it and how to fix it? Read on this article, we will help you resolve this problem.

How Does The Error “Type ‘X’ is missing the following properties from type ‘Y'” Happen?

Sometimes, the type which you assign to a variable misses some of the attributes the variable’s actual type expects. This is the main reason of the error “Type ‘X’ is missing the following properties from type ‘Y'”. For example:

type Person = { 
  name: string; 
  country: string; 
};
// Error: Type '{}' is missing the following 
// properties from type 'Person': name, country ts(2739) 
const person: Person = {};

// ------------------------------------------------------

function getPerson(person: Person) {
  return person; }
// Type '{}' is missing the following properties 
// from type 'Person': name, country ts(2345) 
getPerson({});

// ------------------------------------------------------ 

const people: Person[] = [];
// Type '{}' is missing the following properties 
// from type 'Person': name, country ts(2345) 
people.push({});

// ------------------------------------------------------

interface Employee { 
  id: number; 
  name: string; }
// Type 'Developer' is missing the following 
// properties from type 'Employee': id, name ts(2420) 
class Developer implements Employee {}

How To Solve The Error “Type ‘X’ is missing the following properties from type ‘Y'”?

Method 1: Provide initial values for the name and country properties

You can fix the error “Type ‘X’ is missing the following properties from type ‘Y'” by providing initial values for the name and country attributes as shown below:

type Person = { 
  name: string; 
  country: string; 
};

const person: Person = { 
  name: '', 
  country: '', 
};

The problem is fixed since the person variable now appropriately satisfies the Person type.

Method 2: Mark the attributes

In the Person type, marking the attributes that you don’t want to place on the object as in the Person type optional is another technique to fix the mistake.

type Person = { 
  name?: string; // marked optional 
  country?: string; // marked optional 
};
const person: Person = {};

A question mark was used in the Person type to set the name and country properties to optional. This implies that they can be a string type or have an undefined value.

Since the properties are not required, they aren’t missing, and your error is resolved.

Method 3: Set a default parameter

Make sure to define all the properties that the object type requires when calling a function that takes an object parameter.

Or you can set a default parameter if you don’t want to define each object’s property when calling the function as shown below:

type Person = { 
  name: string; 
  country: string; 
};
function getPerson(person: Person = { name: '', country: '' }) { 
  return person; 
}
getPerson();

The default object will be used if the function gets called with no a value for the person parameter.

Method 4: Define the id and name properties

You have to define the id and name properties in the class because they are required.

interface Employee { 
  id: number; 
  name: string; 
} 
class Developer implements Employee { 
  constructor(public id: number, public name: string) { 
    this.id = id; 
    this.name = name;
  } 
}

Method 5: Change interface or creat a type alias

Defining a type or interface with a name that conflicts with a globally specified interface or one from a third-party module will result in the problem “Type ‘X’ is missing the following properties from type ‘Y'”. Try changing your interface or creating a type alias if you see an odd error message with property and method names you don’t know.

Method 6: Pass all the necessary props to component

You can pass all the necessary props to component as shown below to resolve the problem.

type ProfileProps = {
  firstName: string;
  lastName: string;
  age: number;
};

const Profile = (props: ProfileProps) => {
  return (
    <div>
      <p>{props.firstName}</p>
      <p>{props.lastName}</p>
      <p>{props.age}</p>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <Profile firstName="Sharooq" lastName="Salaudeen" age={24} />
    </div>
  );
};

export default App;

Conclusion

The solutions mentioned above are the best way for the error “Type ‘X’ is missing the following properties from type ‘Y’“. We believe you can easily resolve your problem with these solutions. If you still have any other questions about fixing this syntax error, please leave a comment below. We are always here to help you. Thank you for reading!