The error `type x is missing the following properties from type y` occurs when you are not passing the required props to a component.

Let's consider the following code:

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 />  //👈 error 
    </div>
  );
};

export default App;

Here, we get an error from TypeScript since we are not passing the props to the "Profile" component defined inside the "ProfileProps" type definition. In this example, the "Profile" component is expecting three props "firstName", "lastName", and "age" as defined in the type definition "ProfileProps".

Here is another error that occurs when you only pass some of the required props to the component.

Solved - Property ‘x’ is missing in type ‘y’ but required in type ‘z’.

This error occurs when you are not passing all the required props defined in the typing of the component. You can either pass the props or make it optional or assign default values to solve this problem.

Solved - Property 'x' is missing in type 'y' but required in type 'z'.Sharooq Salaudeen

Solution

Passing all props

To solve the error, you can pass all the required props to the component like below.

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;

Passing props conditionally

The above solution is not always applicable, since sometimes you do not have all the props required. in this case, you should edit the type definition to make the props optional. Take a look at the following change in code:

type ProfileProps = {
  firstName: string;
  lastName?: string;   //👈 add "?" for making this prop optional 
  age: number;
};

Since we defined the prop "lastName" as optional, now we do not have to pass this prop to the component and TypeScript would not throw an error.

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" age={24} />
    </div>
  );
};

export default App;

It is a good practice to define some default values to the optional prop in case nothing is passed to it. This will ensure there is no "undefined" error occurring in the code.

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

const Profile = ({firstName="Sharooq", lastName="Salaudeen", age }: ProfileProps) => {
  return (
    <div>
      <p>{firstName}</p>
      <p>{lastName}</p>
      <p>{age}</p>
    </div>
  );
};

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

export default App;

In the above code, we defined default values for the "firstName" and "lastName' props. Therefore, the default values will be substituted in the place of the prop value when nothing is passed to the component.

Conclusion

Ensure that you are passing all the required prop that is defined in the typing of a component. If not all the props are required, make it optional by explicitly specifying it in the type definition using the notation mentioned above.