Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot infer types on arrays of union of objects #691

Open
Balastrong opened this issue Apr 27, 2024 · 1 comment
Open

Cannot infer types on arrays of union of objects #691

Balastrong opened this issue Apr 27, 2024 · 1 comment

Comments

@Balastrong
Copy link
Contributor

Balastrong commented Apr 27, 2024

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

@irwinarruda
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants