为什么 TypeScript 告诉我 NativeBase 的 Button 组件上不存在属性但仍会呈现它？答案

【问题标题】：Why do TypeScript tell me that a property doesn't exist on Button Component from NativeBase but still renders it?为什么 TypeScript 告诉我 NativeBase 的 Button 组件上不存在属性但仍会呈现它？
【发布时间】：2022-01-26 13:44:27
【问题描述】：

我在 React Native 项目中使用 NativeBase，虽然当我使用 Xcode 在 iPhone 上运行应用程序时一切正常，但 TypeScript 告诉我 NativeBase 按钮的类型上不存在属性“onPress”。

为了简化这里的事情是我的代码：

import { Button } from 'native-base';

...

<Button
  variant="ghost"
  colorScheme="blueGray"
  onPress={() => {
  console.log('Ok')
  }}
>

我得到的错误：

类型'{孩子：字符串; onPress: () => 无效； }' 不可分配给类型 'IntrinsicAttributes & IButtonProps & { ref?: MutableRefObject |不明确的; }'。类型“IntrinsicAttributes & IButtonProps & { ref?: MutableRefObject | 上不存在属性“onPress”不明确的; }'.ts(2322)

同样，代码运行良好，但在我的项目的每个文件中每个按钮都会出现一个错误，这很烦人。

我不太习惯 React Native 和 NativeBase，所以我找不到它抛出这个错误的原因。

我试图查看一下文件，看看是否可以在某处找到“onPress”属性，因为它正在工作并且在文档中，我根据 TS 发现：

import type { PressableProps } from 'react-native';

模块 '"react-native"' 没有导出的成员 'PressableProps'.ts(2305)

我的问题是为什么 TS 告诉我 onPress 不存在，但我认为它可能会有所帮助，因为它看起来应该是 onPress 的地方。

【问题讨论】：

标签： reactjs typescript react-native native-base

【解决方案1】：

typeScript 只是一个在运行时不起作用的类型检查器。这意味着如果您没有将正确的类型放入组件中，所有代码都可以正常工作，因为“typeScript 只在编译阶段完成他的工作”。因此，如果您想解决该错误问题，请转到 typeScript 文档页面并了解如何将类型设置到您的组件中。之后，当您在Button组件中设置正确的类型（Function）时，所有错误信息都会消失。

【讨论】：

我不是在创建组件，它来自 NativeBase ：docs.nativebase.io/button 属性 onChange 在 NativeBase Button 组件的文档中，继承自 React-Native Pressable 组件。我可以编辑类型，但在下一次 NativeBase 更新时，更改会消失，我会回到原点。
正如我上面所说，ts 在编译阶段检查所有类型的代码，因此您应该进行设置。我找到了这个教程。试试看 :) reactnative.dev/docs/typescript 如果你觉得我的回答有帮助请选择我的回答 :D 祝你有美好的一天！

【解决方案2】：

创建全新安装后，我发现出于某种原因 - 可能是由于我进行了更新以及我现在没有使用很多组件的事实 - 而 React-Native 的版本为 0.64.X , 类型在 0.62.X 版本上。

所以解决方案是更改 package.json 中 @types/react-native 的版本

TypeScript 不知道 onPress 属性的存在，但它仍然存在，所以我在运行应用程序时没有问题。由于我将类型更新为正确的版本，它不再告诉我该属性不存在。

【讨论】：