Cannot infer types on arrays of union of objects

[Leonardo Montini]

Describe the bug

The library cannot infer the right type of fields in a (probably weird) edge case, when an array is an union type of objects.

Take this as example:

type Text = {
  type: 'text';
  answer: string;
  textAnswer: string;
};

type Number = {
  type: 'number';
  answer: number;
};

type FormType = {
  questions: Array<Text | Number>
}

When accessing to questions[0].answer (field in both types) the type is string | number.
When accessing to questions[0].textAnswer (field on one type only) the type is unkown

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-ydorgn?file=src%2Findex.tsx%3AL53-L53

Steps to reproduce

1. Have a structure with an array of union of objects
2. Use field.state in jsx

Expected behavior

Not sure if it's a bug or a missing feature, but I'd like a way to know which is the correct type of the array entry and have all the fields typed accordingly.

The form is handling the values right, typescript isn't.

See the MRE for more comments.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS

TanStack Form adapter

react-form

TanStack Form version

v0.19.4

TypeScript version

No response

Additional context

No response

[Irwin Arruda]

I found this problem interesting so I investigated a little. From what I've gathered, the issue revolves around the DeepValue type and happens because of a default typescript behavior with union types:

type A = { a: string; };
type B = { b: number; };
type C = boolean;
// Getting a value from a union causes some problems and the DeepValue uses this approach
type result1 = (A | B)["a"]; // any
type result2 = (B | C)["b"]; // any

My idea to solve it boils down to creating a new Get type that behaves differently from the default typescript one:

type Get<T, K extends string /* or keyof T*/> = T extends {
  [Key in K]: infer V;
} ? V : never;
type result1 = Get<A | B, "a">; // string
type result2 = Get<B | C, "b">; // number

Though I created it, I don't fully know how the Get type works because it sometimes behaves strangely, so this solution feels a bit hacky. Look at what I found changing the else clause. It might be a typescript bug.

type Get<...> = T extends { ... } ? V : unknown;
type result1 = Get<A | B, "a">; // unknown
type result2 = Get<B | C, "b">; // unknown

type Get<...> = T extends { ... } ? V : undefined;
type result1 = Get<A | B, "a">; // string | undefined
type result2 = Get<B | C, "b">; // number | undefined

type Get<...> = T extends { ... } ? V : never;
type result1 = Get<A | B, "a" | "b">; // never

@crutchcorn, if you and the team think it's a good idea to continue with this issue, I would like to create a PR to solve it. Please let me know if I should.

[Corbin Crutchley]

@irwinarruda please do open a PR! :) We have extensive type tests, so we'll need to make sure they all pass, but any help here would be greatly appreciated!