web-dev-qa-db-ja.com

Typescriptの「タイプ '{}'が次のプロパティにありません...」エラーを修正する方法は？

私はTypeScriptを初めて使用するため、問題が発生します。私はAntDesignを使用しており、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 />
reactjstypescripttypesantd
3
JeromeDL30

小道具インターフェースのすべての小道具が必要です（未定義にすることはできません）

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

ただし、インターフェイスから小道具を指定せずにコンポーネントを使用しています

<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;
}
3
Bsalex