reactjs - 如何修复 Typescript 中的 "Type ' { }' is missing in the following properties..."错误？

Question

我是 Typescript 新手，因此遇到了问题。我正在使用 Ant Design 并遵循如何在 Typescript 中使用 Form，但使用 FunctionComponent ;但是，我收到 Typescript 抛出的错误:

TypeScript error: Type '{}' is missing the following properties from type 'Readonly<RcBaseFormProps & Pick<SetupFormProps, "username" | "email" | "password" | "confirm_password" | "first_name" | "last_name">>': username, email, password, confirm_password, and 2 more. TS2740

代码如下:

import React, { useState } from 'react';
import { Form, Input, Row, Col } from 'antd';
import { FormComponentProps } from 'antd/lib/form';


interface SetupFormProps extends FormComponentProps {
  username: string;
  email: string;
  password: string;
  confirm_password: string;
  first_name: string;
  last_name: string;
}

const SetupForm: React.FC<SetupFormProps> = ({ form }) => {
  ...
  return (
    <Form id="setup-form" layout="vertical" onSubmit={handleSubmit}>...</Form>
  )
}

export default Form.create<SetupFormProps>({ name: 'register' })(SetupForm);

在我的其他组件中，我以这种方式访问​​它:

import SetupForm from './form';

<SetupForm />

Answer 1

Prop 接口(interface)中的所有 Prop 都是必需的(它们不能是未定义的)

interface SetupFormProps extends FormComponentProps {
  username: string;
  email: string;
  password: string;
  confirm_password: string;
  first_name: string;
  last_name: string;
}

但是您正在使用组件而没有指定界面中的 Prop

<SetupForm />

因此，您应该从界面 (SetupFormProps) 指定 Prop

<SetupForm username="myUserName" ...etc />

或者将 props 设置为可选

interface SetupFormProps extends FormComponentProps {
  username?: string;
  email?: string;
  password?: string;
  confirm_password?: string;
  first_name?: string;
  last_name?: string;
}