pushValue argument type confusion

[north crescent]

Hi everybody,

i am currently working on a project which revolves around a form to add recipes. Therefore I thought this might be the perfect opportunity to dive deeper in the TanStack with forms. I used this library before with a simple form in Angular. My new project now is in React with Tanstack Start.

Now to my question abut pushValue. I have a field where its counterpart in the Forms state is a string array. Therefore I figured out that I can add entries to this array using field.pushValue() like field.pushValue("hi"). Now the Function signature is confusing me a bit because it is showing string array variations for the type of the argument value.

As you can see I figured out how to use through the feedback of my LSP which was mad at me when passing string[] to field.pushValue(). But I'm quite curious here and would like to understand the behind the scenes a bit more despite the risk that I'm might not ready for the answer 😄.

Best wishes and thank you in advance

[brittle kestrel]

What the field's trying to figure out is:

1. Am I an array field (typeof field.state.value extends any[])
2. If I am, I expect the type of the element of my array (T[][number] -> T)

with form.pushFieldValue, it's usually clearer because it only allows you to set field names that are arrays.
However, it's more difficult for the field methods to figure out if they're allowed or not, and it's currently not as consistent as we'd like it to be.

There is an open RFC if you'd like to comment on it: Handling Array Methods Called on null or undefined

[north crescent]

Okay I understand I guess. So the field itself knows for sure that It it should be an Array of strings but hast difficulties to display this info and therefore the type displayed is the array?

[brittle kestrel]

it exposed the internal if statement to you

// from the earlier comment, but with the type
type ValueOrNever = T extends any[] // Am I an array field
  ? T[number] // I am, return the type of my elements
  : never // I am not, resolve to `never`

[north crescent]

Ahhh okay I guess I now know what broke my brain here 😅

So the T[][number] expression returns the type of the elements in that array T[] like in my case string[][number] is then string again?

[brittle kestrel]

yeah, it's an easy way to get the element type

you probably know it well as accessing elements ( foo['myProp'] or myArray[0]), but for TypeScript, we say myArray[<any number>]

also I mistyped the previous code, whoops. T[] extends any[] would always be true since I turned it into an array.

in your code, T = string[]

[north crescent]

I see now it clicked 😄

Thank you for you're time and the explanation the TS type syntax gets me every time again.

[brittle kestrel]

no worries! The whole point of the complex types is that you don't have to worry about them, but apparently your LSP didn't simplify it

[north crescent]

Yeah you're right it could have resolved the ternary and then just showed string

And TanStack is doing a good job with this so far I would say 😁.
But non the less I like to poke around in the complex stuff to learn more about TS and it's types.

[brittle kestrel]

TanStack Form types might look intimidating with the wall of text, but it's basic usage of generics.

If you want more clever usage of types, check out linkOptions in TanStack Router. It's what I'm doing right now actually

[north crescent]

I will check it out by chance. If I encounter something I'd like some clarification on I will open a thread in the router section. Maybe we'll meet again then 😄.

Btw. as I said I am checking out TanStack Start which as far as I know depends heavily on TanStack Router. I realy like the way of creating routes and how I can create server functions.