Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6208

TypeScript Error: How do I correctly add Interface to promise returned?

$
0
0

I'm working on my first TypeScript project and I'm having trouble add types correctly to my code. From the React Native Docs, DatePickerAndroid "returns a Promise which will be invoked an object containing action, year, month (0-11), day if the user picked a date.

For this next part, I've added "?" and undefined in the interface. "If the user dismissed the dialog, the Promise will still be resolved with action being DatePickerAndroid.dismissedAction and all the other keys being undefined."

I've tried several ways, but how can I correctly apply types to DatePickerAndroid?

Error:

src/DatePicker.tsx:47:15 - error TS2322: Type 'DatePickerAndroidOpenReturn' is not assignable to type 'Props'.
  Type 'DatePickerAndroidDateSetAction' is missing the following properties from type 'Props': title, onValueChange, mode, date47

const { action, year, month, day } : Props = await DatePickerAndroid.open({

Interface:

// TypeScript: Types
interface Props {
  title: string,
  onValueChange: Function,
  mode: 'calendar' | 'spinner' | 'default' | undefined,
  action: 'dateSetAction' | 'dismissedAction',
  date: Date | undefined,
  minDate?: Date | undefined,
  maxDate?: Date | undefined,
  year?: number | Date,
  month?: number | Date,
  day?: number | Date,
}

DatePicker.tsx

  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 } : Props = await DatePickerAndroid.open({
          date: date,
          mode: props.mode,
        });

        // Action: Date Set
        if (action === DatePickerAndroid.dateSetAction) {
          // 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);
    }
  };

Viewing all articles
Browse latest Browse all 6208

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>