TypeScript function signature help

[syropian]

Hi all!

I'm writing a function that allows me to sync prop values to a Pinia store. It looks like this when used:

const userStore = useUserStore()
const authorizationsStore = useAuthorizationsStore()

useSyncValuesToStores(
  [userStore, 'user', computed(() => props.user)],
  [authorizationsStore, 'abilities', computed(() => props.abilities)],
)

It essentially accepts an array of tuples where the tuple is typed as:

type SyncTuple<TStore extends Store, TKey extends keyof TStore['$state']> = [TStore, TKey, ComputedRef<TStore[TKey]>]

How can I type the useSyncValuesToStores function to properly accept an array of SyncTuples?

Obviously this won't work:

export const useSyncValuesToStores = (...mappings: SyncTuple[]): void => {
  console.log(mappings);
}

as SyncTuple requires 2 generic arguments that we don't know ahead of time. I think the solution might require mapped types (?) but I'm struggling to wrap my head around it this morning. Any help is appreciated!

Here's a minimal repro in the TS Playground

[syropian]

Turns out i was very close! The mappedStoreTuples just didn't need to extend any[]!

Updated TS playground