Ensuring Type Safety around FieldComponents ?

[PrinceGupta1999]

When defining field components like in this example, how can I ensure type safety that the TextField can only be used with fields whose value is text.

We are currently manually adding the type as

const field = useFieldContext<string>()

However when using this component in a form like:

<form.AppField
    name="age" // number field
    children={(field) => <field.TextField label="Age" />}
  />

There will be no type errors. We will only find in runtime that the number was transformed into a string.

[juanvilladev]

You can add an additional prop to your TextField component called value that only accepts the correct type.
Then from your parent pass in field.state.value.

<form.AppField
    name="age" // number field
    children={(field) => <field.TextField label="Age" value={field.state.value} />}
  />