Formik: Compilation error with TypeScript in strict mode on

[Havret]

Hi. I tried to use formik with TypeScript but I couldn't be able to make TS examples compile when strict mode is on. When I turn it off it compiles just fine. The problem occur in TS 2.6.1 and TS 2.6.2

[LinusU]

I think I'm having this problem as well, all my <Formik ... /> stoped working when upgrading to TypeScript 2.6.x.

      TS2322: Type '{ initialValues: AddAccountFormValues; onSubmit: (values: AddAccountFormValues, { setErrors, setS...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Formik<FormikConfig<{}>, object>> & Readonly<{ chi...'.
  Type '{ initialValues: AddAccountFormValues; onSubmit: (values: AddAccountFormValues, { setErrors, setS...' is not assignable to type 'Readonly<FormikConfig<{}>>'.
    Types of property 'onSubmit' are incompatible.
      Type '(values: AddAccountFormValues, { setErrors, setSubmitting }: FormikBag<AddAccountFormValues, AddA...' is not assignable to type '(values: {}, formikActions: FormikActions<{}>) => void'.
        Types of parameters 'values' and 'values' are incompatible.
          Type '{}' is not assignable to type 'AddAccountFormValues'.
            Property 'changeComplete' is missing in type '{}'.

In this example AddAccountFormValues are the values of the form, and changeComplete is a boolean value inside the form (checkbox).

[LinusU]

Not very helpful, but I worked around this by switching to withFormik instead

const UnlockPage = (props: UnlockPageProps) => {
  const initialValues = { /* ... */ } as UnlockFormValues

  const onSubmit = async (values: UnlockFormValues) => {
    // ...
    props.onDone()
  }

  const render = ({ values }: FormikProps<UnlockFormValues>) => (
    <Form> ... </Form>
  )

  return <Formik initialValues={initialValues} onSubmit={onSubmit} render={render} />
}

to

function mapPropsToValues (props: UnlockPageProps): UnlockFormValues {
  return { /* ... */ }
}

async function handleSubmit (values: UnlockFormValues, { props }: FormikBag<UnlockPageProps, UnlockFormValues>) {
  // ...
  props.onDone()
}

function render ({ values, ...props }) {
  return (
    <Form> ... </Form>
  )
}

const UnlockPage = withFormik({ mapPropsToValues, handleSubmit })(render)

I guess that one upside is that this doesn't recreate all of the functions every time the component is rendered...

[DanielRosenwasser]

This is possibly a TypeScript 2.6 bug. See https://github.com/Microsoft/TypeScript/issues/20891.

[mvestergaard]

@DanielRosenwasser I just tried this in the 2.7 RC, and it still seems to break.

interface ILoginFormValues {
  organisationCode: string;
  username: string;
  password: string;
}

<Formik
        initialValues={{ organisationCode: 'nis001', username: 'as', password: 'ast' }}
        onSubmit={async (values: ILoginFormValues, { setSubmitting }) => {
          try {
            await store.login(values.organisationCode, values.username, values.password);
            this.setState({ redirectToReferer: true });
          } catch {
            setSubmitting(false);
          }
        }}
      >

file: 'file:///c%3A/Source/Roadmap/master/src/Nordic/UI/src/routes/login/index.tsx'
severity: 'Error'
message: 'Type '{ children: ({ values, touched, errors, isSubmitting }: FormikProps<ILoginFormValues>) => Element...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Formik<FormikConfig<object>, object>> & Readonly<{...'.
  Type '{ children: ({ values, touched, errors, isSubmitting }: FormikProps<ILoginFormValues>) => Element...' is not assignable to type 'Readonly<FormikConfig<object>>'.
    Types of property 'onSubmit' are incompatible.
      Type '(values: ILoginFormValues, { setSubmitting }: FormikActions<Values>) => Promise<void>' is not assignable to type '(values: object, formikActions: FormikActions<object>) => void'.
        Types of parameters 'values' and 'values' are incompatible.
          Type 'object' is not assignable to type 'ILoginFormValues'.
            Property 'organisationCode' is missing in type '{}'.'
at: '37,9'
source: 'ts'
code: '2322'

[DanielRosenwasser]

Can you try out with the nightlies (npm install typescript@next)? There were two found bugs, one of which was merged in yesterday.

[mvestergaard]

@DanielRosenwasser Same thing in the nightly I'm afraid.

[jaredpalmer]

Can we get someone from TS team to look at this?

[jaredpalmer]

Do we know what line of code is actually causing this error?

[mvestergaard]

@jaredpalmer Do you mean in my example above?

onSubmit={async (values: ILoginFormValues, { setSubmitting }) => {
       it's here ^

The type inference from initialValues does not properly apply, so it thinks values is {}

[jaredpalmer]

So how do we fix this?

[mvestergaard]

@jaredpalmer I'm sorry if it caused confusion that I brought this up on a Formik issue. I don't think this is something you can fix in Formik, it's a problem with typescript 2.6 and above. I just wanted to give @DanielRosenwasser a concrete example of something to work off of.

[corydeppen]

I'm still seeing this issue with Formik 0.11.5 and TS 2.7.1 (and 2.6.2) with "strict": true. Are there upcoming changes that support TS 2.7.x and might resolve this issue?

[corydeppen]

Sorry, my mistake. Things seem fine now with TS 2.7.1. I had to explicitly tell VS Code which version of TS to use.

[jaredpalmer]

Fixed with TS 2.7 and v0.11

[abelkbil]

@jaredpalmer do you have some sample code link for typescript state and changes in form
Thank you

[jaredpalmer]

@abelkbil not sure what you mean. Can you elaborate?