feat: add TypeScript generics to type form values (fixes #70)

[mgcrea]

Enables proper typing of form values through the use of generics.

Probably can be improved, but should be a good start.

The code used a unique Store type while we should separate the internal representation (Store) to the given form values actual typings, so I created a new FormValues type that is more explicit (user values vs. internal representation of this.store).

Added a couple of @NOTE comments when I had to hack around types, might be bugs.

[vercel[bot]]

This pull request is being automatically deployed with ZEIT Now (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/react-component/field-form/qtdaw0gug ✅ Preview: https://field-form-git-fork-mgcrea-feat-typescript-generics.react-component.now.sh

[codecov[bot]]

Codecov Report

Merging #75 into master will decrease coverage by 0.12%. The diff coverage is n/a.

@@            Coverage Diff             @@
##           master      #75      +/-   ##
==========================================
- Coverage   99.87%   99.75%   -0.13%     
==========================================
  Files          13       13              
  Lines         806      815       +9     
  Branches      172      177       +5     
==========================================
+ Hits          805      813       +8     
- Misses          1        2       +1     

Impacted Files	Coverage Δ
src/utils/valueUtil.ts	98.55% <0.00%> (-1.45%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update bc56d70...0f18e23. Read the comment docs.

[zombieJ]

Should provide default any type like FieldProps<T extends FormValues = any>.

[mgcrea]

Should provide default any type like FieldProps<T extends FormValues = any>.

I've added an explicit AnyFormValues type:

export type AnyFormValues = FormValues<unknown>;
...
FieldProps<T extends FormValues = AnyFormValues>

[zombieJ]

Should provide default any type like FieldProps<T extends FormValues = any>.

I've added an explicit AnyFormValues type:

export type AnyFormValues = FormValues<unknown>;
...
FieldProps<T extends FormValues = AnyFormValues>

👍

PS: After change, should also check examples and it should work without ts warning.

[mgcrea]

@zombieJ will do, since the project doesn't have a tsconfig.json lot of errors were missing in vscode. Will check that tomorrow.

[mgcrea]

Had another go at it today and if there is still ts errors in the examples they are not related to the use of generics (mostly untyped code errors).

Had to hack around types a lot (using as) more than I would have hoped. At some point a good refactoring to properly type everything might be in order.

[zombieJ]

Strange, seems test case failed.

[zombieJ]

npm run compile failed:

[mgcrea]

hum, maybe due to the missing tsconfig.json, I'll have a look at it.

[zombieJ]

I've update master branch to fix a ts bug. Please feel free to rebase and check.

[mgcrea]

@zombieJ had a look at it and fixed your screenshot issue, but it won't compile anyway without the tsconfig.json file, I'm encountering dozens of library related errors:

field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2965,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feDropShadow' must be of type 'SVGProps<SVGFEDropShadowElement>', but here has type 'SVGProps<SVGFEDropShadowElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2966,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feFlood' must be of type 'SVGProps<SVGFEFloodElement>', but here has type 'SVGProps<SVGFEFloodElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2967,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feFuncA' must be of type 'SVGProps<SVGFEFuncAElement>', but here has type 'SVGProps<SVGFEFuncAElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2968,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feFuncB' must be of type 'SVGProps<SVGFEFuncBElement>', but here has type 'SVGProps<SVGFEFuncBElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2969,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feFuncG' must be of type 'SVGProps<SVGFEFuncGElement>', but here has type 'SVGProps<SVGFEFuncGElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2970,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feFuncR' must be of type 'SVGProps<SVGFEFuncRElement>', but here has type 'SVGProps<SVGFEFuncRElement>'.
field-form/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index.d.ts(2971,13): error TS2717: Subsequent property declarations must have the same type.  Property 'feGaussianBlur' must be of type 'SVGProps<SVGFEGaussianBlurElement>', but here has type 'SVGProps<SVGFEGaussianBlur

I think it's best anyway to keep the tsconfig.json so that IDE integration works & also the one from father could change (eg. to fix another project using it) and could break the field-form build.

[mgcrea]

Also I had to update dev deps inside package.json so that react types would properly work (eg. you used ForwardRefRenderFunction that did not exist in the @types/react version specified in the package.json). Also bumped typescript (same version thatn ant-design) to avoid any legacy typescript bug.

[zombieJ]

You can add tsconfig.json in your workspace but ignore it in git to make IDE work. Though we found vscode is work normally without the config file.

[mgcrea]

@zombieJ yes but the issue is that the build won't work without the tsconfig.json file. ant-design has a config file checked in, so it makes sense to do the same here?

I can try to push without it to check if it fails for the CI if you want.

[zombieJ]

Last time CI failed is caused by @types/react release new version which cause conflict and I've resolved in master branch : )

It's safe to remove tsconfig.json in CI env. father lib will handle it.

ref: https://github.com/react-component/field-form/commits/master

[dvdvdmt]

When I run tsc --noEmit in my project that uses antd ^4.0.1 I get the error:

node_modules/rc-field-form/lib/Form.d.ts(18,27): error TS2694: Namespace 'React' has no exported member 'ForwardRefRenderFunction'.

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "sourceMap": true
  }
}

Should I also use --skipLibCheck flag for linting purpose?

[zombieJ]

@types/react update its define that you should reinstall to latest version.

[dpyzo0o]

Any progress on this PR? When do we expect this to be merged?

[maasencioh]

@zombieJ @mgcrea do you guys need any help with this?