Strict mode gives weird ts errors
hello, why do i get
Binding element 'isSubmitting' implicitly has an 'any' type and Parameter 'field' implicitly has an 'any' type. for every field or state in the form. form works and i see correct types when hover, no any at all
import { createFormHook, createFormHookContexts, formOptions } from '@tanstack/react-form'
export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts()
export const { useAppForm, withForm } = createFormHook({
fieldContext,
formContext,
fieldComponents: {},
formComponents: {},
})
export const formOpts = formOptions({
defaultValues: {
source: '',
originalText: '',
target: '',
numberOfVersions: 1,
},
})
export const FormCopy = withForm({
...formOpts,
props: {
dropdownOptions: { targetLanguages: [] },
},
render: ({ form, dropdownOptions }) => {
return (
<div>
<form>
<form.Field name="originalText" children={field => <textarea value={field.state.value} />} />
<form.Field
name="target"
children={field => (
<select value={field.state.value} required onChange={e => field.handleChange(e.target.value)}>
{dropdownOptions.targetLanguages.map((language: any) => (
<option key={language.code} value={language.code}>
<p slot="label">{language.label}</p>
</option>
))}
</select>
)}
/>
<form.Subscribe
selector={state => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<div>
<button type="submit" disabled={!canSubmit}>
<div>
<div />
{isSubmitting ? 'Submitting...' : 'Submit'}
</div>
</button>
</div>
)}
/>
</form>
</div>
)
},
})6 Replies
complex-tealOP•6mo ago
Usage on the page
const form = useAppForm({
...formOpts,
onSubmitInvalid: () => {
console.log("")
},
onSubmit: async ({ value }) => {
try {
} catch (error) {
}
},
})
<FormCopy form={form} dropdownOptions={dropdownOptions} />
Upd. For some reason "strict": true in tsconfig adds wrong errors. How to fix it by not removing this line?gradual-turquoise•6mo ago
Can you replicate in stackblitz plz
harsh-harlequin•6mo ago
This is likely not because of strict mode. Strict mode simply disallows any implicit
any values. The underlying issue you're trying to solve is why isSubmitting is implicitly typed as any.
Based off of your example i can't say for certain why this is the case though. A little hard to read the code in its current format.complex-tealOP•6mo ago
https://stackblitz.com/~/github.com/strogan/tanstackbug
But there is one extra error which is not correct at all. And no error in ide. Removing strick mode fixes my initial any problem but this one stays. I dont really care about it.
Form works fine if I just keep it in one file on the page. no problem at all before i tried to refactor
TS2554: Expected 0 arguments, but got 1.
8 | createFormHookContexts();
> 10 | export const { useAppForm, withForm } = createFormHook({ ^
> 11 | fieldContext,
> 12 | formContext,
> 13 | fieldComponents: {},
> 14 | formComponents: {},
> 15 | }); gradual-turquoise•6mo ago
Minimum TS version is 5.4 try upgrading, then make sure other dependencies are also okay to use 5.4
https://tanstack.com/form/latest/docs/typescript
TypeScript | TanStack Form Docs
TanStack Form is written 100% in TypeScript with the highest quality generics, constraints and interfaces to make sure the library and your projects are as type-safe as possible! Things to keep in min...
complex-tealOP•6mo ago
Thanks for checking out, easy fix.