hunk.code_window: - Since Formik 2 is built on top of React Hooks, you must be on React 16.8.x or higher
   - Since Formik 2 uses the `unknown` type, you must be on TypeScript 3.0 or higher (if you use TypeScript)
   **There are only two tiny breaking changes in Formik 2.x.** Luckily, these probably won't impact many people:
   #### `resetForm`
   Because we introduced the new `initialErrors`, `initialTouched`, `initialStatus` props, `resetForm`'s signature has changed since there is more stuff to _reset_. It now accepts the next initial state of Formik (instead of just the next initial values).
  
hunk.labels: keep keep keep replace keep keep keep keep
hunk.after_edit: **There are only three tiny breaking changes in Formik 2.x.** Luckily, these probably won't impact many people:
  
hunk.file_path: packages/formik/MIGRATING-v2.md
hunk.type: replace
file: ---
  id: version-1.5.0-typescript
  title: TypeScript
  custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/guides/typescript.md
  original_id: typescript
  ---
  
  [![TypeScript Types](https://img.shields.io/npm/types/formik.svg)](https://npm.im/formik)
  
  The Formik source code is written in TypeScript, so you can rest easy that Formik's
  types will always be up-to-date. As a mental model, Formik's type signatures are very
  similar to React Router 4's `<Route>`.
  
  #### Render props (`<Formik />` and `<Field />`)
  
  ```typescript
  import * as React from 'react';
  import { Formik, FormikActions, FormikProps, Form, Field, FieldProps } from 'formik';
  
  interface MyFormValues {
    firstName: string;
  }
  
  export const MyApp: React.SFC<{}> = () => {
    return (
      <div>
        <h1>My Example</h1>
        <Formik
          initialValues={{ firstName: '' }}
          onSubmit={(values: MyFormValues, actions: FormikActions<MyFormValues>) => {
              console.log({ values, actions });
              alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false)
           }}
          render={(formikBag: FormikProps<MyFormValues>) => (
            <Form>
              <Field
                name="firstName"
                render={({ field, form }: FieldProps<MyFormValues>) => (
                  <div>
                    <input type="text" {...field} placeholder="First Name" />
                    {form.touched.firstName &&
                      form.errors.firstName &&
                      form.errors.firstName}
                  </div>
                )}
              />
            </Form>
          )}
        />
      </div>
    );
  };
  ```
  
  #### `withFormik()`
  
  ```typescript
  import React from 'react';
  import * as Yup from 'yup';
  import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
  
  // Shape of form values
  interface FormValues {
    email: string;
    password: string;
  }
  
  interface OtherProps {
    message: string;
  }
  
  // Aside: You may see InjectedFormikProps<OtherProps, FormValues> instead of what comes below in older code.. InjectedFormikProps was artifact of when Formik only exported a HoC. It is also less flexible as it MUST wrap all props (it passes them through).
  const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
    const { touched, errors, isSubmitting, message } = props;
    return (
      <Form>
        <h1>{message}</h1>
        <Field type="email" name="email" />
        {touched.email && errors.email && <div>{errors.email}</div>}
  
        <Field type="password" name="password" />
        {touched.password && errors.password && <div>{errors.password}</div>}
  
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    );
  };
  
  // The type of props MyForm receives
  interface MyFormProps {
    initialEmail?: string;
    message: string; // if this passed all the way through you might do this or make a union type
  }
  
  // Wrap our form with the using withFormik HoC
  const MyForm = withFormik<MyFormProps, FormValues>({
    // Transform outer props into form values
    mapPropsToValues: props => {
      return {
        email: props.initialEmail || '',
        password: '',
      };
    },
  
    // Add a custom validation function (this can be async too!)
    validate: (values: FormValues) => {
      let errors: FormikErrors = {};
      if (!values.email) {
        errors.email = 'Required';
      } else if (!isValidEmail(values.email)) {
        errors.email = 'Invalid email address';
      }
      return errors;
    },
  
    handleSubmit: values => {
      // do submitting things
    },
  })(InnerForm);
  
  // Use <MyForm /> wherevs
  const Basic = () => (
    <div>
      <h1>My App</h1>
      <p>This can be anywhere in your application</p>
      <MyForm message="Sign up" />
    </div>
  );
  
  export default Basic;
  ```
  