Почему void не быть назначен для типа boolean?

Question

[BABLGAM222]

мне надо передеть в компопнент card "() => setrDrawerVil(true)" делаю это через props onClickDrawer, здесь и есть эта ошибка: Type '() => void' is not assignable to type 'boolean'. в компонетне card я вызываю функцию onClick, с параметром props.onClickDrawer, и тут тоже ошибка на onClick: Type 'boolean' is not assignable to type 'MouseEventHandler

app.tsx:

function App() {
  const [drawerVis, setrDrawerVil] = React.useState(false)

  return (
  <>
  {drawerVis && <Drawer />}
  <div className="main">
    <Header/>
    <div className="content">
        <CardMovie onClickDrawer={() => setrDrawerVil(true)}/>
    </div>
  </div>
  </>
  );
}

export default App;

card.tsx

interface Props {
    onClickDrawer: boolean
}

const cardMovie = (props: Props): any => {
  return (
    <article className="cardMovies" onClick={props.onClickDrawer}>
      <div className="cardMovies__image">
        <img src="https://kinopoiskapiunofficial.tech/images/posters/kp/301.jpg" alt="" />
      </div>
      <div className="cardMovies__nameFilm">
        <p className="cardMuvies__FilmName">the matrixa</p>
      </div>
    </article>
  );
};

export default cardMovie;

помогите решить эту пробелму, очень сильно благодарен
P.D я толькор начал учить ts\

Comments

[historydev]

Типы typescript - google.com
Type '() => void' is not assignable to type 'boolean' - google.com

Answer 1

[Евгений Беннер]

В TypeScript интерфейсу функции необходимо указывать тип входных параметров и тип возвращаемого

interface Props {
    onClickDrawer: () => void
}

Для лучшего понимания также пример стандартной функции для сложения двух чисел

function sum(a: number, b: number): number {
    return a + b;
}

Если описать интерфейс, то получится так

interface Props {
    sum: (a: number, b: number) => number
}

Comments

[BABLGAM222]

благодарю)