Typescript onPress с ошибкой возврата обещания - PullRequest
Новая
       23

Typescript onPress с ошибкой возврата обещания

0 голосов
/ 13 января 2020

Я впервые использую машинопись в своем проекте, и у меня появляется ошибка onPress, которая вызывает toggleModal. Ошибка исходит от onPress

Согласно React Native docs , DatePicker Android .open () выполняет следующие действия:

Возвращает Обещание, которое будет вызывать объект, содержащий действие, год, месяц (0-11), день, если пользователь выбрал дату. Если пользователь закрыл диалоговое окно, Обещание все равно будет разрешено с действием DatePicker Android .dismissedAction, а все остальные ключи не определены.

Может кто-то уточнить, если ошибка возникает из-за следующих и как это исправить?

  • Обещание DatePicker Android .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 Ответ

1 голос
/ 13 января 2020

С вашим TouchableOpacity's onPress

1 связаны две проблемы. Несовместимый параметр в вызове toggleModal: TouchableOpacity испускает обратный вызов onPress с параметром event, и вы пытаетесь отозвать toggleModal без явного связывания, т. Е. Система попытается передать параметры задается onPress's обратным вызовом toggleModal, который несовместим, поскольку toggleModal ожидает параметр типа Props и получает тип event,

Это должно быть исправлено с помощью явно связанного вызова : onPress={() => toggleModal(props)}

2. Тип возврата функции, вызываемой из onPress's callback , которая ожидает, что она будет void, а ваша - Promise, так как функция asyn c. Вы можете решить эту проблему, объявив свой toggleModal нормальной функцией с кодом на основе Promise для ожидающих вызовов.

В связи с проблемой year , из-за того, что значение года не всегда является числом, оно также может быть неопределенным в случаях, которые также задокументированы здесь .

Надеюсь, это поможет. Спасибо. Ура!

...