我是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 />
答案 0 :(得分:1)
道具界面中的所有道具都是必需的(不能不确定)
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;
}