Antd 的 @Form.create<Props>() 装饰器导致模棱两可的 TypeScript 错误

Question

我查看了该领域问题的现有答案（例如How to use antd.Form.create in typescript?），但没有找到摆脱当前困境的方法。

使用@Form.create<IProps>() 作为装饰器，或在导出时使用Form.create<IProps>()(Login)，都会导致这个奇怪的错误。

这是我看到的 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

组件

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

软件包版本

• react "16.5.2"
• react-dom "16.5.2"
• antd "3.9.2"
• typescript "3.0.3"

Answer 1

装饰器在 TypeScript 中不起作用：请参阅 this answer。在导出时使用 Form.create<IProps>()(Login) 并从类中删除装饰器不会出错。