pushValue argument type confusion
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
11 Replies
conscious-sapphire•3w ago
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 undefinedflat-fuchsiaOP•3w ago
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?
conscious-sapphire•3w ago
it exposed the internal if statement to you
flat-fuchsiaOP•3w ago
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?conscious-sapphire•3w ago
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[]flat-fuchsiaOP•3w ago
I see now it clicked 😄
Thank you for you're time and the explanation the TS type syntax gets me every time again.
conscious-sapphire•3w ago
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
flat-fuchsiaOP•3w ago
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.conscious-sapphire•3w ago
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 actuallyflat-fuchsiaOP•3w ago
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.
conscious-sapphire•3w ago
yeah, we use it at our workplace too. Great library 🎊
Keep in mind, I'm not a Router maintainer. I'll gladly help with some type questions, but I don't know the internals well