Repository navigation
Narrowing DeepKeys based on value type #1070
Description
I would like to create a React component that returns a ReactFormExtendedApi.Form component containing an <input> field, passing down to that input some attributes such as the value (field.state.value) and onChange function (field.handleChange(v)).
Since this component returns an input field, it should accept only form keys whose value is of type string in the current form.
I am having problems in achieving that with TypeScript. This is the FormInput code:
import {
DeepKeys,
DeepValue,
ReactFormExtendedApi,
} from "@tanstack/react-form";
type TypedDeepKeys<S, T> = Exclude<
{
[K in DeepKeys<S>]: DeepValue<S, K> extends T ? K : never;
}[DeepKeys<S>],
number
>;
export const FormInput = <FormData, K extends TypedDeepKeys<FormData, string>>({
form,
fieldKey,
}: {
form: ReactFormExtendedApi<FormData>;
fieldKey: K;
}) => {
return (
<form.Field
name={fieldKey}
children={(field) => (
<input
value={field.state.value}
onChange={(v) => field.handleChange(v)}
onBlur={field.handleBlur}
name={fieldKey}
/>
)}
/>
);
};As you can see, there is a type (TypedDeepKeys) that should narrow the accepted keys of the form schema to those that accept a string value.
However, it seems that TypeScript does not recognize that with this constraint the field.state.value can only be a string, as I get the following error:
Type 'DeepValue<FormData, K, IsNullable<FormData>>' is not assignable to type 'string | number | readonly string[] | undefined'.
Type 'FormData | (FormData extends readonly any[] ? K extends `[${infer TBrackets}].${infer TAfter}` ? DeepValue<DeepValue<FormData, TBrackets, IsNullable<FormData>>, TAfter, IsNullable<...>> : K extends `[${infer TBrackets}]` ? DeepValue<...> : K extends keyof FormData ? FormData[K] : FormData[K & number] : FormData exte...' is not assignable to type 'string | number | readonly string[] | undefined'.
Type 'FormData' is not assignable to type 'string | number | readonly string[] | undefined'.
Type 'FormData' is not assignable to type 'readonly string[]'.
Type 'DeepValue<FormData, K, IsNullable<FormData>>' is not assignable to type 'readonly string[]'.
Type 'FormData | (FormData extends readonly any[] ? K extends `[${infer TBrackets}].${infer TAfter}` ? DeepValue<DeepValue<FormData, TBrackets, IsNullable<FormData>>, TAfter, IsNullable<...>> : K extends `[${infer TBrackets}]` ? DeepValue<...> : K extends keyof FormData ? FormData[K] : FormData[K & number] : FormData exte...' is not assignable to type 'readonly string[]'.
Type 'FormData' is not assignable to type 'readonly string[]'.
Looks like that the type of field.state.value may also be FormData, but this doesn't make sense.
Is there something that I'm missing?
Activity
LeCarbonator commentedon Feb 20, 2025
After checking on the Discord, there is an answer provided by Leonardo that references PR #825
Is this what you're looking for?
The type narrowing the keys
A component utilizing it
crutchcorn commentedon Feb 25, 2025
Closing this, as
DeepKeysshould be an internals-only type. To solve the problem you're likely looking for, check: #1179