Strongly Typed Fields

.size-snapshot.json

@@ -1,35 +1,35 @@
 {
   "./dist/formik.umd.production.js": {
-    "bundled": 142526,
-    "minified": 39497,
-    "gzipped": 11966
+    "bundled": 142148,
+    "minified": 39462,
+    "gzipped": 11899
   },
   "./dist/formik.umd.development.js": {
-    "bundled": 172706,
-    "minified": 49934,
-    "gzipped": 15075
+    "bundled": 185202,
+    "minified": 53613,
+    "gzipped": 15978
   },
   "./dist/formik.cjs.production.js": {
-    "bundled": 43495,
-    "minified": 21912,
-    "gzipped": 5488
+    "bundled": 45175,
+    "minified": 22112,
+    "gzipped": 5533
   },
   "./dist/formik.cjs.development.js": {
-    "bundled": 44383,
-    "minified": 22795,
-    "gzipped": 5826
+    "bundled": 46074,
+    "minified": 23012,
+    "gzipped": 5875
   },
   "dist/formik.esm.js": {
-    "bundled": 40074,
-    "minified": 22184,
-    "gzipped": 5706,
+    "bundled": 40666,
+    "minified": 22380,
+    "gzipped": 5755,
     "treeshaked": {
       "rollup": {
-        "code": 771,
-        "import_statements": 349
+        "code": 699,
+        "import_statements": 277
       },
       "webpack": {
-        "code": 3661
+        "code": 3704
       }
     }
   }

package.json

@@ -95,7 +95,7 @@
     "tsc-watch": "^1.0.21",
     "tslint": "^5.11.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.1.6",
+    "typescript": "^3.3.3",
     "yup": "0.21.3"
   },
   "lint-staged": {

src/FastField.tsx

@@ -23,7 +23,7 @@ export interface FastFieldProps<V = any> {
   form: FormikProps<V>; // if ppl want to restrict this for a given form, let them.
 }
 
-export interface FastFieldConfig<T> {
+export interface FastFieldConfig<T = any> {
   /**
    * Field component to render. Can either be a string like 'select' or a component.
    */

src/Field.tsx

@@ -29,43 +29,45 @@ import { getIn, isEmptyChildren, isFunction } from './utils';
  *     {form.touched[field.name] && form.errors[field.name]}
  *   </div>
  */
-export interface FieldProps<V = any> {
+export type FieldProps<Values = any, ValueType = any, Props = {}> = Props & {
   field: {
     /** Classic React change handler, keyed by input name */
     onChange: FormikHandlers['handleChange'];
     /** Mark input as touched */
     onBlur: FormikHandlers['handleBlur'];
     /** Value of the input */
-    value: any;
+    value: ValueType;
     /* name of the input */
     name: string;
   };
-  form: FormikProps<V>; // if ppl want to restrict this for a given form, let them.
-}
+  form: FormikProps<Values>; // if ppl want to restrict this for a given form, let them.
+};
 
-export interface FieldConfig {
+export interface FieldConfig<Values = any, ValueType = any, Props = {}> {
   /**
    * Field component to render. Can either be a string like 'select' or a component.
    */
   component?:
     | string
-    | React.ComponentType<FieldProps<any>>
+    | React.ComponentType<FieldProps<Values, ValueType, Props>>
     | React.ComponentType<void>;
 
   /**
    * Render prop (works like React router's <Route render={props =>} />)
    */
-  render?: ((props: FieldProps<any>) => React.ReactNode);
+  render?: ((props: FieldProps<Values, ValueType, Props>) => React.ReactNode);
 
   /**
    * Children render function <Field name>{props => ...}</Field>)
    */
-  children?: ((props: FieldProps<any>) => React.ReactNode) | React.ReactNode;
+  children?:
+    | ((props: FieldProps<Values, ValueType, Props>) => React.ReactNode)
+    | React.ReactNode;
 
   /**
    * Validate a single field value independently
    */
-  validate?: ((value: any) => string | Promise<void> | undefined);
+  validate?: ((value: ValueType) => string | Promise<void> | undefined);
 
   /**
    * Field name
@@ -76,25 +78,34 @@ export interface FieldConfig {
   type?: string;
 
   /** Field value */
-  value?: any;
+  value?: ValueType;
 
   /** Inner ref */
   innerRef?: (instance: any) => void;
 }
 
-export type FieldAttributes<T> = GenericFieldHTMLAttributes & FieldConfig & T;
+export type FieldAttributes<
+  Props,
+  Values,
+  ValueType = any
+> = GenericFieldHTMLAttributes & FieldConfig<Values, ValueType, Props> & Props;
+
+type FieldInnerProps<Props, Values, ValueType = any> = FieldAttributes<
+  Props,
+  Values,
+  ValueType
+> & { formik: FormikContext<Values> };
 
 /**
  * Custom Field component for quickly hooking into Formik
  * context and wiring up forms.
  */
-class FieldInner<Values = {}, Props = {}> extends React.Component<
-  FieldAttributes<Props> & { formik: FormikContext<Values> },
-  {}
-> {
-  constructor(
-    props: FieldAttributes<Props> & { formik: FormikContext<Values> }
-  ) {
+class FieldInner<
+  Values = {},
+  Props = {},
+  ValueType = any
+> extends React.Component<FieldInnerProps<Props, Values, ValueType>, {}> {
+  constructor(props: FieldInnerProps<Props, Values, ValueType>) {
     super(props);
     const { render, children, component } = props;
     warning(
@@ -119,9 +130,7 @@ class FieldInner<Values = {}, Props = {}> extends React.Component<
     this.props.formik.registerField(this.props.name, this);
   }
 
-  componentDidUpdate(
-    prevProps: FieldAttributes<Props> & { formik: FormikContext<Values> }
-  ) {
+  componentDidUpdate(prevProps: FieldInnerProps<Props, Values, ValueType>) {
     if (this.props.name !== prevProps.name) {
       this.props.formik.unregisterField(prevProps.name);
       this.props.formik.registerField(this.props.name, this);
@@ -145,9 +154,7 @@ class FieldInner<Values = {}, Props = {}> extends React.Component<
       component = 'input',
       formik,
       ...props
-    } = (this.props as FieldAttributes<Props> & {
-      formik: FormikContext<Values>;
-    }) as any;
+    } = this.props;
     const {
       validate: _validate,
       validationSchema: _validationSchema,
@@ -162,14 +169,20 @@ class FieldInner<Values = {}, Props = {}> extends React.Component<
       onChange: formik.handleChange,
       onBlur: formik.handleBlur,
     };
-    const bag = { field, form: restOfFormik };
+    const bag: FieldProps<Values, ValueType, Props> = {
+      field,
+      form: restOfFormik,
+      ...this.props,
+    };
 
     if (render) {
-      return (render as any)(bag);
+      return render(bag);
     }
 
     if (isFunction(children)) {
-      return (children as (props: FieldProps<any>) => React.ReactNode)(bag);
+      return (children as (
+        props: FieldProps<Values, ValueType, Props>
+      ) => React.ReactNode)(bag);
     }
 
     if (typeof component === 'string') {
@@ -190,4 +203,4 @@ class FieldInner<Values = {}, Props = {}> extends React.Component<
   }
 }
 
-export const Field = connect<FieldAttributes<any>, any>(FieldInner);
+export const Field = connect<FieldAttributes<any, any, {}>, any>(FieldInner);

src/FieldArray.tsx

@@ -9,17 +9,18 @@ import {
 } from './types';
 import { getIn, isEmptyChildren, isFunction, setIn } from './utils';
 
-export type FieldArrayRenderProps = ArrayHelpers & {
-  form: FormikProps<any>;
+export type FieldArrayRenderProps<Values = any> = ArrayHelpers & {
+  form: FormikProps<Values>;
   name: string;
 };
 
-export type FieldArrayConfig = {
+export type FieldArrayConfig<Values = any> = {
   /** Really the path to the array field to be updated */
   name: string;
   /** Should field array validate the form AFTER array updates/changes? */
   validateOnChange?: boolean;
-} & SharedRenderProps<FieldArrayRenderProps>;
+} & SharedRenderProps<FieldArrayRenderProps<Values>>;
+
 export interface ArrayHelpers {
   /** Imperatively add a value to the end of an array */
   push: (obj: any) => void;
@@ -86,14 +87,16 @@ export const replace = (array: any[], index: number, value: any) => {
   return copy;
 };
 class FieldArrayInner<Values = {}> extends React.Component<
-  FieldArrayConfig & { formik: FormikContext<Values> },
+  FieldArrayConfig<Values> & { formik: FormikContext<Values> },
   {}
 > {
   static defaultProps = {
     validateOnChange: true,
   };
 
-  constructor(props: FieldArrayConfig & { formik: FormikContext<Values> }) {
+  constructor(
+    props: FieldArrayConfig<Values> & { formik: FormikContext<Values> }
+  ) {
     super(props);
     // We need TypeScript generics on these, so we'll bind them in the constructor
     this.remove = this.remove.bind(this) as any;
@@ -293,7 +296,7 @@ class FieldArrayInner<Values = {}> extends React.Component<
       },
     } = this.props;
 
-    const props: FieldArrayRenderProps = {
+    const props: FieldArrayRenderProps<Values> = {
       ...arrayHelpers,
       form: restOfFormik,
       name,

src/Formik.tsx

@@ -3,6 +3,7 @@ import isEqual from 'react-fast-compare';
 import deepmerge from 'deepmerge';
 import { FormikProvider } from './connect';
 import warning from 'tiny-warning';
+
 import {
   FormikActions,
   FormikConfig,

test/Field.test.tsx

@@ -14,7 +14,11 @@ import {
 
 import { noop } from './testHelpers';
 
-const initialValues = { name: 'jared', email: 'hello@reason.nyc' };
+const initialValues = {
+  name: 'jared',
+  email: 'hello@reason.nyc',
+  user: { superPowers: ['Surging', 'Binding'] },
+};
 type Values = typeof initialValues;
 
 function renderForm(
@@ -38,7 +42,7 @@ function renderForm(
 }
 
 const createRenderField = (
-  FieldComponent: React.ComponentClass<FieldConfig>
+  FieldComponent: React.ComponentType<FieldConfig>
 ) => (
   props: Partial<FieldConfig> | Partial<FastFieldConfig> = {},
   formProps?: Partial<FormikConfig<Values>>
@@ -330,7 +334,7 @@ describe('Field / FastField', () => {
   cases('can resolve bracket paths', renderField => {
     const { getProps } = renderField(
       { name: 'user[superPowers][0]' },
-      { initialValues: { user: { superPowers: ['Surging', 'Binding'] } } } // TODO: fix generic type
+      { initialValues }
     );
 
     expect(getProps().field.value).toBe('Surging');
@@ -339,7 +343,7 @@ describe('Field / FastField', () => {
   cases('can resolve mixed dot and bracket paths', renderField => {
     const { getProps } = renderField(
       { name: 'user.superPowers[1]' },
-      { initialValues: { user: { superPowers: ['Surging', 'Binding'] } } } // TODO: fix generic type
+      { initialValues }
     );
 
     expect(getProps().field.value).toBe('Binding');
@@ -348,7 +352,7 @@ describe('Field / FastField', () => {
   cases('can resolve mixed dot and bracket paths II', renderField => {
     const { getProps } = renderField(
       { name: 'user[superPowers].1' },
-      { initialValues: { user: { superPowers: ['Surging', 'Binding'] } } } // TODO: fix generic type
+      { initialValues }
     );
 
     expect(getProps().field.value).toBe('Binding');

yarn.lock

@@ -9741,9 +9741,10 @@ typescript@*:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
 
-typescript@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.6.tgz#b6543a83cfc8c2befb3f4c8fba6896f5b0c9be68"
+typescript@^3.3.3:
+  version "3.3.3333"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
+  integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==
 
 ua-parser-js@^0.7.18:
   version "0.7.18"