I'm a virgin when it comes to formik - but quite eager to get started with it since it looks super useful. In my attempt to play around with it I haven't figured out how to leavage TS with it.
const changePasswordSchema = Yup.object({ currentPassword: Yup.string().required(), password: Yup.string().min(6).max(128).required(), passwordConfirmation: Yup.string() .equals([Yup.ref('password')], 'Adgangskoder stemmer ikke overens') .required(),})type ChangePasswordFormValues = Yup.InferType<typeof changePasswordSchema>// sees it as// type ChangePasswordFormValues = {// currentPassword: string;// password: string;// passwordConfirmation: any;// }export default () => { const formik = useFormik<ChangePasswordFormValues>({ initialValues: { currentPassword: '', password: '', passwordConfirmation: 123, // <-- was hoping this would ts error }, validationSchema: changePasswordSchema, onSubmit: (values: ChangePasswordFormValues) => { // it sees it as // values: AssertsShape<{ // currentPassword: RequiredStringSchema<string | undefined, AnyObject>; // password: RequiredStringSchema<string | undefined, AnyObject>; // passwordConfirmation: any; // and not like // type ChangePasswordFormValues = { // currentPassword: string; // password: string; // passwordConfirmation: any; // } console.log(values) }, }) return (<ScreenContainer><View style={{ height: 400 }} /><View style={{ width: '100%' }}><TextInput {...formik.getFieldProps('')} // <-- was hoping this would auto suggest // {...formik.getFieldProps<ChangePasswordFormValues>('')} // <-- was hoping this would auto suggest // {...formik.getFieldProps<keyof ChangePasswordFormValues>('')} // <-- was hoping this would auto suggest /></View></ScreenContainer> )}
seems like I have to do
{...formik.getFieldProps('' as keyof ChangePasswordFormValues)}
but can't I just pass the type once to useFormik
and not have to type every other place?