Javascript Antd&x27；s@Form.create<；道具>；（）decorator导致不明确的TypeScript错误

我已经浏览了这方面问题的现有答案（例如），但没有找到摆脱当前困境的方法

在导出时使用

@Form.create（）

作为装饰程序或

Form.create（）（登录）

，两者都会导致这个奇怪的错误

下面是我看到的Typescript错误：

    [ts]
    Unable to resolve signature of class decorator when called as an expression.
    Type 'ComponentClass<RcBaseFormProps & Pick<IProps, "isLoggedIn" | "goTo" | "login">>' is not assignable to type 'typeof Login'.
        Type 'Component<RcBaseFormProps & Pick<IProps, "isLoggedIn" | "goTo" | "login">, ComponentState, any>' is not assignable to type 'Login'.
        Property 'checkLoggedIn' is missing in type 'Component<RcBaseFormProps & Pick<IProps, "isLoggedIn" | "goTo" | "login">, ComponentState, any>'.

    (alias) class Form
    import Form

[ts]
作为表达式调用时无法解析类装饰器的签名。
类型“ComponentClass”不可分配给类型“typeof Login”。
类型“Component”不可分配给类型“Login”。
类型“Component”中缺少属性“checkLoggedIn”。
（别名）班级表格
进口表格

组成部分

import*作为来自“React”的React
从“antd”导入{输入、表单、按钮、图标}
从“antd/es/form”导入{FormComponentProps}
从“react router dom”导入{Link}
接口IProps扩展了FormComponentProps{
转到：（路径：字符串，状态？：any）=>void
isLoggedIn:布尔值|未定义
登录：（用户名：字符串，密码：字符串）=>承诺
}
@Form.create（）
类登录扩展了React.Component{
建造师（道具：IProps）{
超级（道具）
}
公共组件didmount（）{
this.checkLoggedIn（）
}
公共组件diddupdate（）{
this.checkLoggedIn（）
}
私有checkLoggedIn=（）=>{
if（this.props.isLoggedIn）{
this.props.goTo（“/”）
}
}
私有handleSubmit=async e=>{
e、 预防默认值（）
这是道具&&
this.props.form.validateFields（异步（错误，{username，password}）=>{
如果（！err）{
等待这个.props.login（用户名、密码）
this.props.goTo（“/”）
}
})
}
公共渲染（）{
const getFieldDecorator=this.props.form？this.props.form.getFieldDecorator:未定义
返回getFieldDecorator(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'Email required'}]
})(
)}
{getFieldDecorator（'密码'{
规则：[{required:true，消息：'Password required'}]
})(
)}
忘了我的密码
登录
)：null
}
}
导出默认登录名

软件包版本

• react“16.5.2”

• react dom“16.5.2”

• antd“3.9.2”

• typescript“3.0.3”

---

装饰程序无法在TypeScript中工作：请参阅。在导出时使用

Form.create（）（Login）

并从类中删除decorator不会出错。

。在导出时使用

Form.create（）（Login）

并从类中删除装饰器不会给我带来任何错误。当您不使用装饰器时，这种方法不可能给出关于装饰器的错误。请再试一次，如果您仍然有问题，请更新问题。@MattMcCutchen如果您将此作为答案发布，我将关闭此问题。这听起来像是一个无法在TypeScript中使用decorator方法的简单例子。谢谢你的提醒。

import * as React from 'react'
import { Input, Form, Button, Icon } from 'antd'
import { FormComponentProps } from 'antd/es/form'
import { Link } from 'react-router-dom'

interface IProps extends FormComponentProps {
    goTo: (path: string, state?: any) => void
    isLoggedIn: boolean | undefined
    login: (username: string, password: string) => Promise<void>
}

@Form.create<IProps>()
class Login extends React.Component<IProps> {
constructor(props: IProps) {
    super(props)
}

public componentDidMount() {
    this.checkLoggedIn()
}

public componentDidUpdate() {
    this.checkLoggedIn()
}

private checkLoggedIn = () => {
    if (this.props.isLoggedIn) {
    this.props.goTo('/')
    }
}

private handleSubmit = async e => {
    e.preventDefault()
    this.props.form &&
    this.props.form.validateFields(async (err, { username, password }) => {
        if (!err) {
        await this.props.login(username, password)
        this.props.goTo('/')
        }
    })
}

public render() {
    const getFieldDecorator = this.props.form ? this.props.form.getFieldDecorator : undefined
    return getFieldDecorator ? (
      <div>
        <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
            {getFieldDecorator('username', {
                rules: [{ required: true, message: 'Email required' }]
            })(
                <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="User email"
                size="large"
                />
            )}
            </Form.Item>
            <Form.Item>
            {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Password required' }]
            })(
                <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
                size="large"
                />
            )}
            </Form.Item>
            <Form.Item>
            <Link to="request-password-reset">Forgot my password</Link>
            <Button type="primary" htmlType="submit" className="login-form-button w-100">
                Log in
            </Button>
            </Form.Item>
        </Form>
      </div>
    ) : null
}
}

export default Login