如何修复“以下属性中缺少类型'{}'..." Typescript中的错误? [英] How to fix "Type '{}' is missing in the following properties..." error in Typescript?

问题描述

我是Typescript的新手，因此对此有疑问. 我正在使用Ant Design，并遵循如何在Typescript中使用Form，但要使用FunctionComponent；但是，Typescript引发了错误:

I'm new to Typescript and therefore having a problem about it. I'm using Ant Design and followed how to use Form in Typescript but with FunctionComponent; however, I'm getting an error thrown by 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);

在我的其他组件中，我是这样访问的:

and in my other component, I'm accessing it this way:

import SetupForm from './form';

<SetupForm />

推荐答案

道具界面中的所有道具都是必需的(不能不确定)

All the props in your props interface are required (they can't be undefined)

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

但是您正在使用组件而未从界面指定道具

But you are using your component without specifying the props from the interface

<SetupForm />

所以您应该从界面(SetupFormProps)中指定道具

So you should either specify the props from the interface (SetupFormProps)

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

或使道具成为可选

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

这篇关于如何修复“以下属性中缺少类型'{}'..." Typescript中的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！