带有承诺返回错误的 Typescript onPress答案

【问题标题】：Typescript onPress With Promise Returned Error带有承诺返回错误的 Typescript onPress
【发布时间】：2020-04-30 12:20:24
【问题描述】：

我第一次在我的项目中实现 typescript，我遇到了来自onPress 的错误，它调用了toggleModal。 错误来自 onPress

根据React Native docs，DatePickerAndroid.open() 执行以下操作：

返回一个 Promise，它将被调用一个包含动作的对象，如果用户选择了日期，则为年、月 (0-11)、日。如果用户关闭对话框，Promise 仍将通过操作解决是 DatePickerAndroid.dismissedAction 和所有其他键未定义。

有人可以澄清错误是否来自以下内容以及如何解决？

承诺 DatePickerAndroid.open() 因为它可能会或可能不会返回响应
我是否需要将 onPress 作为函数键入 onPress: Function？

错误

src/DatePicker.tsx:109:25 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error.
    Type '(props: Props) => Promise<void>' is not assignable to type '(event: GestureResponderEvent) => void'.
      Types of parameters 'props' and 'event' are incompatible.
        Type 'GestureResponderEvent' is missing the following properties from type 'Props': title, onPress, onValueChange, mode
  Overload 2 of 2, '(props: TouchableOpacityProps, context?: any): TouchableOpacity', gave the following error.
    Type '(props: Props) => Promise<void>' is not assignable to type '(event: GestureResponderEvent) => void'.

109       <TouchableOpacity onPress={toggleModal} style={styles.fieldTextContainer}>

类型

// TypeScript: Types
interface Props {
  title: string,
  onPress: Function,
  onValueChange: Function,
  mode: 'calendar' | 'spinner' | 'default',
  minDate?: Date | number;
  maxDate?: Date | number;
}

interface AndroidProps {
  action: 'dateSetAction' | 'dismissedAction',
  newDate?: Date;
  year?: number;
  month?: number;
  day?: number;
}

toggleModal

// Toggle Modal
  const toggleModal = async (props: Props) => {
    try {
      // Check Platform (iOS)
      if (Platform.OS === 'ios') {
        // React Hook: Toggle Modal
        toggle((modalVisible) => !modalVisible);
      }

      // Check Platform (Android)
      if (Platform.OS === 'android') {
        const { action, year, month, day } : AndroidProps = await DatePickerAndroid.open({
          date: date,
          mode: props.mode,
        });

        // Action: Date Set
        if (
           action === DatePickerAndroid.dateSetAction
           && year !== undefined
           && month !== undefined
           && day !== undefined
        ) {
          // New Date
          let newDate:Date = new Date(year, month, day);

          // Select Date
          selectDate(newDate);
        }

        // Action: Dismissed
        if (action === DatePickerAndroid.dismissedAction) {
          // Do Nothing
        }
      };
    }
    catch (error) {
      console.log(error);
    }
  };

DatePicker.tsx

  <TouchableOpacity onPress={toggleModal} style={styles.fieldTextContainer}>
    <Text style={styles.fieldText} numberOfLines={1}>{date ? moment(date).format('MMM Do, YYYY') : 'Select'}</Text>

    <Icon name="ios-arrow-forward" size={22} style={styles.arrowForward}/>
  </TouchableOpacity>

【问题讨论】：

标签： reactjs typescript react-native types typescript-typings

【解决方案1】：

您的TouchableOpacity's onPress 存在两个问题

1. toggleModal 调用中的不兼容参数： TouchableOpacity 发出以 event 作为参数的 onPress 回调，您试图在没有显式绑定的情况下取消 toggleModal，即系统将尝试传入由onPress's 回调给toggleModal 的参数是不兼容的，因为toggleModal 需要Props 类型的参数并且得到event 类型的参数，

这应该通过显式绑定调用来解决：onPress={() => toggleModal(props)}

2。从 onPress's 回调调用的函数的返回类型期望它是 void 而你的是 Promise，因为函数是异步的。您可以通过将您的 toggleModal 声明为使用基于 Promise 的代码来等待调用的普通函数来解决它。

来到 year 问题，由于不能保证年份值始终为数字，因此在也记录在 here 的情况下，它也可能未定义。

希望这会有所帮助。谢谢。干杯！

【讨论】：

感谢苏拉杰的帮助！