Cannot infer types on arrays of union of objects

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

Have a structure with an array of union of objects
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

@crutchcorn

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.

@irwinarruda

@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!

Should be fixed now

Navigation Menu

Repository navigation

Cannot infer types on arrays of union of objects #691

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Form adapter

TanStack Form version

TypeScript version

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cannot infer types on arrays of union of objects #691

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Form adapter

TanStack Form version

TypeScript version

Additional context

Activity

irwinarruda commented on May 11, 2024

crutchcorn commented on May 28, 2024

crutchcorn commented on Mar 1, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions