React native Typescript TouchableOpacity egenskapfel

Jag har skapat en återanvändbar knapp genom att använda Styled component och Typescript. Jag gjorde onPress void. Jag använder denna knapp i headStyles. HeaderStyles har en prop som heter headerLeft. headerLeft's props onPress är valfri eller undefined. När jag skickar dessa props till min knapp får jag ett Typescript-fel som väntat. Detta är felet: Type '(() => void) | undefined' is not assignable to type '() => void'. Type 'undefined' is not assignable to type '() => void'.ts(2322). Finns det något sätt jag kan göra headerLeft props onPress void?

Detta är min återanvändbara knappkomponent:

import React from 'react';
import styled from 'styled-components/native';


type Props = {
  onPress: () => void;
};
const BackButtonContainer = styled.TouchableOpacity`
  padding-vertical: 16px;
  padding-horizontal: 24px;
`;

const Button = ({ onPress }: Props) => {
  return (
    <BackButtonContainer
      onPress={onPress}>
   
    </BackButtonContainer>
  );
};

export default Button;

Detta är headerStyles

import { StackNavigationOptions } from '@react-navigation/stack';
import React from 'react';
import Button from './buttons;

export const headerStyles: StackNavigationOptions = {
  headerStyle: {
    elevation: 0,
    borderBottomWidth: 0,
    shadowOffset: { height: 0, width: 0 },
  },
  headerTitleAlign: 'center',
  headerTintColor: colors.greyGradient[800],
  headerLeft: (props) =>
    props.canGoBack ? <Button onPress={props.onPress} /> : null, //In here I am getting typescript error

};

Svar #1

Om du är säker på att du har onPress från headerLeft-egenskaperna, kan du använda ! för att informera TypeScript att det måste finnas onPress() och det inte kommer att vara undefined:

headerLeft: (props) =>
    props.canGoBack ? <Button onPress={props.onPress!} /> : null, 

Mer om icke-null bekräftelseoperator - !