react native - Typescript: onPress-type

Jeg har nettopp overført mitt react-native-prosjekt til TypeScript og har et spørsmål om funksjoner som props

jeg passerer:

<DisplayCardsWithLikes
data={testData}
likes={500}
onPress={() => this.props.navigation.navigate("CardDetailScreen")}
/>

til

type Props = {
  onPress: Function
}


const FloatingActionButtonSimple = (props:Props) => {
  const {onPress} = props
  return (
    <View style={styles.containerFab}>
      <TouchableOpacity style={styles.fab} onPress={onPress}>
        <Icon name="plus" size={16} color={"white"} />
      </TouchableOpacity>
    </View>
  );
};

Feil :

Error, caused by child onPress:
o overload matches this call.
  Overload 1 of 2, '(props: Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error.
    Type 'Function' is not assignable to type '(event: GestureResponderEvent) => void'.
      Type 'Function' provides no match for the signature '(event: GestureResponderEvent): void'.
  Overload 2 of 2, '(props: TouchableOpacityProps, context?: any): TouchableOpacity', gave the following error.
    Type 'Function' is not assignable to type '(event: GestureResponderEvent) => void'.ts(2769)
index.d.ts(5125, 5): The expected type comes from property 'onPress' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'
index.d.ts(5125, 5): The expected type comes from property 'onPress' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'

Sammendrag: onPress sendt som prop (er en funksjon). På child-type onPress:Function vises en feil (den ovenfor), onPress:any fungerer derimot. Jeg vet egentlig ikke hvilken type onPress-propen er

Så ikke noe sprøtt, men hvis jeg definerer onPress som en funksjon, vises en feil, så tydeligvis er ikke det riktig type. Vet du hvilken type disse onPress-funksjonene har?

Tusen takk!

Svar #1

Du må definere typen som nedenfor for å bli kvitt typefeilen fra tslint:

type Props {
   onPress: (event: GestureResponderEvent) => void
}

ELLER

type Props {
   onPress(): void
}

ELLER

type Props {
   onPress(params: type): void
}

Svar #2

Den feilmeldingen viser typen som den ville akseptere for funksjonen din som dette:

(event: GestureResponderEvent) => void

Det som er viktig å merke seg er => void som betyr at det forventes en funksjon som ikke returnerer en verdi.

Men denne funksjonen:

() => this.props.navigation.navigate("CardDetailScreen")

returnerer en verdi. Arrow-funksjoner uten {} returnerer resultatet av uttrykket deres.

Løsningen er å legge til {} i tilbakekallingen din slik at funksjonen ikke returnerer noe, noe som vil samsvare med forventet type:

onPress={() => { this.props.navigation.navigate("CardDetailScreen") } }

Relaterte artikler