代码之家 › 专栏 › 技术社区 › 1110

如何读取typescript错误以了解应该使用什么类型?

react-navigation-v6 typescript-typings react-navigation react-native typescript

1110 · 技术社区 · 2 年前

我不明白如何处理这样的打字错误。
我正在使用react导航,并尝试创建自定义标题。
从文档中可以看到这个组件获得的参数列表,但我不知道如何进行类型检查。

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

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

我在navigator中设置了标题:

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

这里我得到了一个错误:

(别名)const CustomHeader:React。常设费用导入自定义标题键入“{back?”:{title:string;}|未定义;选项:NativeStackNavigationOptions;路线:路线<字符串,对象| 未定义>;导航:NativeStackNavigationProp<ParamListBase, 字符串,未定义>;}'不可分配给类型“CustomHeaderProps”。属性'back'在类型{back?:{title:string;}中是可选的未定义;选项:NativeStackNavigationOptions;路线: 路线<字符串,对象|未定义>;导航: NativeStackNavigationProp<ParamListBase,字符串,未定义>;}'但是 “CustomHeaderProps”类型中需要。

有人能帮我理解这种错误,以及如何设置类型吗。

1 回复 | 直到 2 年前

0xe 2 年前

错误的格式应如下所示:

(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 你给了,但它不在定义中。

(并非所有类型脚本错误都是这种格式。只有这类类型不匹配错误是这样的。)

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前