How to read typescript error in order to understand what type should be used?

Question

I don't understand how to handle typescript error like this.
I am using react-navigation and tried to make custom header.
From documentation there are list of parameters that this component get but I don't know how to type check it.

interface CustomHeaderProps {
  navigation: any;
  route: any;
  options: any;
  back: any;
}

const CustomHeader: FC<CustomHeaderProps> = ({
  navigation,
  route,
  options,
  back,
}) => {...

I set that header in navigator:

<HomeStack.Navigator
      screenOptions={{
        header: props => <CustomHeader {...props} />,
      }}>

And here I get error:

(alias) const CustomHeader: React.FC import CustomHeader Type '{ back?: { title: string; } | undefined; options: NativeStackNavigationOptions; route: Route<string, object | undefined>; navigation: NativeStackNavigationProp<ParamListBase, string, undefined>; }' is not assignable to type 'CustomHeaderProps'. Property 'back' is optional in type '{ back?: { title: string; } | undefined; options: NativeStackNavigationOptions; route: Route<string, object | undefined>; navigation: NativeStackNavigationProp<ParamListBase, string, undefined>; }' but required in type 'CustomHeaderProps'.

Can somebody help me how to understand this kind off errors and how to set type.

Answer 1

The error should be given already formatted like this:

(alias) const CustomHeader: React.FC
import CustomHeader
Type '{ back?: { title: string; } | undefined; options: NativeStackNavigationOptions; route: Route<string, object | undefined>; navigation: NativeStackNavigationProp<ParamListBase, string, undefined>; }' is not assignable to type 'CustomHeaderProps'.
    Property 'back' is optional in type '{ back?: { title: string; } | undefined; options: NativeStackNavigationOptions; route: Route<string, object | undefined>; navigation: NativeStackNavigationProp<ParamListBase, string, undefined>; }' but required in type 'CustomHeaderProps'.

Usually they're always like this:

Offending code
Type '...' is not assignable to type '...'
    Reason why it isn't
        Reason why the reason is why
            Reason why the reason why the reason is why
                ...

Here the reason is just simply Property 'back' is not optional in type '...' but required in type '...'. Most of the times the true reason is last and it helps the most, but in more verbose errors, you should go up the "reason stack" to find out the root cause.

So for the actual error, it's complaining that the property is optional in the type of props you gave but it isn't in the definition.

(Not all TypeScript errors are in this format. Only these kinds of type mismatch errors are like this.)