Antd's @Form.create<Props>() decorator results in ambiguous TypeScript error

Viewed 1451

I've taken a look through existing answers to this area of questions (e.g. How to use antd.Form.create in typescript?) but have found no way out of the current predicament.

Using @Form.create<IProps>() as a decorator, or Form.create<IProps>()(Login) at export, both result in this bizarre error.

Here is the Typescript error I'm seeing:

    [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

Component

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

Package versions

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

The decorator will not work in TypeScript: see this answer. Using Form.create<IProps>()(Login) at export and removing the decorator from the class gives me no error.

Related