Явно введите параметр деструктурированной функции

Question

У меня сейчас есть:

const Start = ({ onSubmit }) => {

Но это начало определения компонента React, определенного в среде TypeScript. Я получаю красное волнистое предупреждение о том, что onSubmit имеет неявный тип. Я бы хотел, чтобы он был полностью напечатан. Итак, я определил это как:

const Start = ({ onSubmit: (event: BaseSyntheticEvent<object, any, any> | undefined) => Promise }) => {

Теперь я получаю предупреждение о том, что есть ошибка синтаксического анализа eslint, указывающая, что ';' ожидалось. Как набрать деструктурированную функцию?

Answer 1

Вы должны указать тип объекта, который передается в качестве аргумента, например

const Start = ({
  onSubmit,
}: {
  onSubmit: (
    event: BaseSyntheticEvent<object, any, any> | undefined
  ) => Promise<void>;
}) => { /* component logic */ };

Поскольку это будет для компонента React, я предлагаю использовать FC generi c, предоставленный Реагируйте и явно создавайте интерфейс для свойств вне сигнатуры функции.

interface IStartProps {
  onSubmit: (
    event: BaseSyntheticEvent<object, any, any> | undefined
  ) => Promise<void>;

  // any other props that need to passed to the Start component
}

const Start: React.FC<IStartProps> = ({ onSubmit }) => { /* component logic */ }

Answer 2

Вам нужно создать тип для назначения Start, например:

type StartFunction = (args: {
  onSubmit: (
    event: BaseSyntheticEvent<object, any, any> | undefined
  ) => Promise<void>;
}) => void;

const Start: StartFunction = ({ onSubmit }) => {
  // ...
};

С учетом сказанного, если вы создаете функциональный компонент в React, вы можете просто использовать их уже существующие FC тип, который включает общий c для указания свойств, которые затем можно деструктурировать:

import React, { FC } from 'react';

type StartProps = {
  onSubmit: (
    event: BaseSyntheticEvent<object, any, any> | undefined
  ) => Promise<void>;
};

const Start: FC<StartProps> = ({ onSubmit }) => {
  return <></>;
};