如何修复 Typescript 中的“以下属性中缺少类型''...”错误？

Posted 2023-02-22

【中文标题】如何修复 Typescript 中的“以下属性中缺少类型\'\'...”错误？

【英文标题】：How to fix "Type '' is missing in the following properties..." error in Typescript?如何修复 Typescript 中的“以下属性中缺少类型''...”错误？

【发布时间】：2019-08-25 08:00:13

【问题描述】：

我是 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 />

【参考方案1】：

你的 props 界面中的所有 props 都是必需的（不能未定义）

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

但是你在使用你的组件时没有从界面中指定 props

<SetupForm />

所以你应该从界面（SetupFormProps）中指定道具

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

或使道具可选

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

【讨论】：

谢谢，我以为它只是一个模拟表单值的接口