Реагировать на ошибку интерфейса, возникающую при компиляции

Question

Я новичок, чтобы реагировать и учиться реагировать самостоятельно. У меня возникает следующая ошибка при попытке скомпилировать мой проект. Любая помощь или предложение будут оценены.

interface ConfirmProps{
  title : string;
  content : string;
  cancelCaption? : string;
  okCaption? :string;
  onOkClick: () => void;
}


const Confirm = (props: ConfirmProps) => {
  const {title, content, cancelCaption, okCaption, onOkClick}= props;

  const handleOkClick = () => {
    onOkClick();
  };

ошибка, которую я получаю

Property 'onOkClick' is missing in type '{ title: string; content: string; cancelCaption: string; okCaption: string; }' but required in type 'ConfirmProps'.  TS2741

рис.

Answer 1

По определению свойств onClick является обязательным реквизитом.

Для соответствия этому контракту вы можете:

a) Сделать опцию опциональной. Обратите внимание на вопросительный знак .? и onOkClick && onOkClick();:

interface ConfirmProps{
  title : string;
  content : string;
  cancelCaption? : string;
  okCaption? :string;
  onOkClick?: () => void;
}


const Confirm = (props: ConfirmProps) => {
  const {title, content, cancelCaption, okCaption, onOkClick}= props;

  const handleOkClick = () => {
    onOkClick && onOkClick();
  };

или

b) Вы должны передать функцию при использовании подтверждения в родительском компоненте

<Confirm
title= "title"
content= "content of confirm"
cancelCaption="No Way"
onClick={() => {/**Do something here**/}}
/>