带有承诺返回错误的 Typescript onPress

Posted 2023-03-13

【中文标题】带有承诺返回错误的 Typescript onPress

【英文标题】：Typescript onPress With Promise Returned Error

【发布时间】：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>

【参考方案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 的情况下，它也可能未定义。

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

【讨论】：

感谢苏拉杰的帮助！