New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript type error when using Form.create({mapPropsToFields}). #9331

Closed
kevinsperrine opened this Issue Feb 10, 2018 · 9 comments

Comments

Projects
None yet
8 participants
@kevinsperrine

kevinsperrine commented Feb 10, 2018

Version

3.2.0

Environment

Mac OSX Sierra (10.12.6), Firefox 58.0.2, react 16.2.0, antd 3.2.0

Reproduction link

https://github.com/kevinsperrine/ant-design-form-test

Steps to reproduce

Clone the repo and run yarn start. Minimal repo created using:

create-react-app form-test --scripts-version=react-scripts-ts
yarn add antd

What is expected?

No type errors should occur

What is actually happening?

A Typescript type error that the 'form' prop is missing is thrown.

/Users/chuck/Projects/form-test/src/App.tsx
(66,28): Type '{ username: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<CustomFormProps, "username"> & Cust...'.
  Type '{ username: string; }' is not assignable to type 'Readonly<Pick<CustomFormProps, "username"> & CustomFormProps>'.
    Property 'form' is missing in type '{ username: string; }'.
@kevinsperrine

This comment has been minimized.

kevinsperrine commented Feb 11, 2018

Just some extra debugging info, If I make an interface for just my props without extending FormComponentProps it works as expected, so I'm assuming it has something to do with the FormCreateOption type not properly omiting the form prop?

// custom interface for component.
interface OwnProps {
  username: string;
}

// custom type intersected with FormComponentProps
type CustomFormProps = OwnProps & FormComponentProps;

const mapPropsToFields = (props: OwnProps) => {
  const { username } = props;

  return {
    username: Form.createFormField({ value: username })
  };
};

const FormOptions: FormCreateOption<OwnProps> = { mapPropsToFields };

// No longer throws a type error and compiles successfully.
const WrappedCustomForm = Form.create(FormOptions)(CustomForm);
@caoyuanqi

This comment has been minimized.

caoyuanqi commented Feb 16, 2018

Yes, Got this problem as well in create-react-app-typescript

@Nokecy

This comment has been minimized.

Contributor

Nokecy commented Mar 2, 2018

当 CustomForm 继承React.Component<any, {}> 时 问题依旧 , 如 https://github.com/Nokecy/ant-design-form-test

@yesmeck @benjycui

@yesmeck yesmeck reopened this Mar 2, 2018

@JunyuanZheng

This comment has been minimized.

JunyuanZheng commented Mar 5, 2018

Got the same problem after upgrading ANTD from 3.2.0 to 3.2.3

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 5, 2018

@Nokecy your repo is using antd@3.2.0, remove yarn.lock and reinstall node_modules.

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 5, 2018

@JunyuanZheng Plz provide a reproduction repo.

@yesmeck yesmeck closed this Mar 5, 2018

@Nokecy

This comment has been minimized.

Contributor

Nokecy commented Mar 6, 2018

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 6, 2018

@Nokecy 嗯, 不要用 any。

zheeeng added a commit to zheeeng/ant-design that referenced this issue Apr 12, 2018

@qzm

This comment has been minimized.

qzm commented Dec 5, 2018

Use 'FormComponentProps' and 'export default Form.create()(App);'
It work's for me

import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { connect } from 'dva';
import * as React from 'react';

export interface IAppProps extends FormComponentProps {
  visible?: boolean;
}

@connect(({ dispatch }) => ({
  dispatch,
}))
class App extends React.PureComponent<IAppProps, any> {
  public render() {
    return <div />
  }
}
export default Form.create()(App);

@qzm qzm unassigned benjycui Dec 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment