时间戳

首页 > 解决方案 > 显式键入解构函数参数

reactjs - 显式键入解构函数参数

问题描述

我目前有：

const Start = ({ onSubmit }) => {

但这是在 TypeScript 环境中定义 React 组件的开始。我收到一个红色波浪形警告说 onSubmit 是隐式的任何类型。我希望它是完全输入的。所以我把它定义为：

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

现在我收到一条警告，指出存在 eslint 解析错误，指示 ';' 预料之中。如何键入解构函数？

标签： reactjstypescript

解决方案

您需要创建一个类型来分配Start，例如：

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

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

话虽如此，如果你在 React 中创建一个功能组件，你可以简单地利用它们已经存在的FC类型，其中包括一个用于指定 props 的泛型，然后你可以对其进行解构：

import React, { FC } from 'react';

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

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

推荐阅读