如何阅读打字稿错误以了解应使用哪种类型？

Question

我不明白如何处理这样的打字稿错误。
我正在使用 react-navigation 并尝试自定义 header.
从文档中有该组件获取的参数列表，但我不知道如何键入检查它。

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

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

我在导航器中设置 header:

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

这里出现错误：

(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'.

有人可以帮助我如何理解这种关闭错误以及如何设置类型。

Answer 1

错误应该已经格式化如下：

(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'.

通常他们总是这样：

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
                ...

这里的原因很简单Property 'back' is not optional in type '...' but required in type '...'。大多数情况下，真正的原因排在最后并且最有帮助，但在更详细的错误中，您应该在“原因堆栈”中查找根本原因。

所以对于实际错误，它抱怨属性在您提供的 props 类型中是可选的，但它不在定义中。

（不是所有的TypeScript错误都是这种格式，只有这几种类型不匹配的错误是这样的。）

如何阅读打字稿错误以了解应使用哪种类型？

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

typescript

react-native

typescript-typings

react-navigation

react-navigation-v6