[Solved]-How to conditionally call different optional function props in a React TypeScript component without getting compiler error?-Reactjs

Apart from the suggested solutions, you may also use discriminating unions: link to the doc which is designed specifically to solve this kind of situations (refer the doc).

like this:

type DogProps = {
  animalName: "dog";
  bark: () => void;
}

type FishProps = {
  animalName: "fish";
  swim: () => void;
}

type AnimalProps = DogProps | FishProps;

const Animal = (props: AnimalProps) => {
  if(props.animalName === 'dog') {
      props.bark();
  } else {
      props.swim();
  }
}

TS Playground link: https://tsplay.dev/NddryN

Destructing isn't possible until you narrow down the type like this (you see other props resolve appropriately without hassle of checking):

type DogProps = {
  animalName: "dog";
  bark: () => void;
  dogProp: string;
}

type FishProps = {
  animalName: "fish";
  swim: () => void;
  fishProp: number;
}

type AnimalProps = DogProps | FishProps;

const Animal1 = (props: AnimalProps) => {
  if(props.animalName === 'dog') {
     const { bark, dogProp } = props;
      bark();
  } else {
    const {swim, fishProp} = props;
      swim();
  }
}

see this: https://tsplay.dev/N9pn7w