React Typescript: Optional Functions are not considered undefined

Question

I am building a React Functional Component and my component should offer an optional function prop. If this prop/the function is provided, I want to render something and also enable the clicking on the component.

  export type AvatarProps = {
  onEdit?: () => void;
};

const Avatar: FunctionComponent<AvatarProps> = (props: AvatarProps) => {
 props.onEdit && (console.log("test");

Unfortunately the function is always considered and is never undefined, although I do not provide it.

In the Google Chrome React Add-on it notices the function as onEdit:ƒ actionHandler() {} if no function is provided. If I provide the function, the Add-on notices onEdit : ƒ onEdit() {}

How can I properly check if the function was provided or not.

EDIT: I am currently testing in Storybook:

import React from 'react';
import { Story } from '@storybook/react';
import Avatar, { AvatarProps } from './Avatar';

export default {
  title: 'Avatar',
  component: Avatar,
};

const Template: Story<AvatarProps> = args => <Avatar {...args} />;

export const Editable = Template.bind({});
Editable.args = {
  onEdit: () => {
    console.log('test');
  },
};

export const NotEditable = Template.bind({});
NotEditable.args = {
};

Answer 1

Under your Storybook parameters, you can set argTypesRegex: null to prevent this default behavior.

export default {
  parameters: {
    actions: {
      argTypesRegex: null,
    },
  }
}

• Relevant GitHub issue