How to get specific type from a generic hook?

I am trying to create a generic hook that connects to Firebase/Firestore and returns all items from a given collection. I am trying to get the correct type of returned items by creating an ICollectionMap interface specifying their types. This is what I have so far:

export const useCollection = <TCollectionMap extends Record<string, any>>(
  collectionName: keyof TCollectionMap
): {
  collection: TCollectionMap[keyof TCollectionMap]
} => {
  const [collection, setCollection] = useState<TCollectionMap[keyof TCollectionMap]>([])

  useEffect(() => {
    // fetch data from Firebase here
    ...
    const data = ...
    setCollection(data)
  }, [])

  return { collection }
}

So then, let's say we have the following types:

interface INames { name: string }

interface IAges { age: number }

interface ICollectionMap {
  names: INames[]
  ages: IAges[]
}

Now when I use the hook:

  const { collection } = useCollection<ICollectionMap>('names')

I'd like to see the type of collection to be INames[], but TypeScript claims it is INames[] | IAges[]. Is there a proper way to handle it with TS?

While it is possible to do in one function like so:

export const useCollection = <TCollectionMap extends Record<string, any>, K extends keyof TCollectionMap>(
  collectionName: K
): {
  collection: TCollectionMap[K]
} => null!
const { collection } = useCollection<ICollectionMap, 'names'>('names')
//   ^? collection: INames[]

It comes with the express limitation that you have to specify all type parameters. This is a consequence of typescript not yet having partial type inferencing.

Don't use a generic TCollectionMap (?)

Is there any particular reason you need such an abstract useCollection function? Consider the following

export const useICollection = <K extends keyof ICollectionMap>(
  collectionName: K
): {
  collection: ICollectionMap[K]
} => null!
const { collection } = useICollection('names')
//   ^? collection: INames[]

However, if this is a non-answer consider the next answer

Wrapping your function with another function

To get around the lack of partial type inferencing we can use another way, just wrap your function with another generic function

export const createCollection = <TCollectionMap extends Record<string, any>>() => <K extends keyof TCollectionMap>(
  collectionName: K
): {
  collection: TCollectionMap[K]
} => null!
const useICollection = createCollection<ICollectionMap>()
const { collection } = useICollection('names')
//   ^? collection: INames[]

Note that this layer of abstraction is purely used for the sake of implementing our own sort of partial type inferencing.

As a side node: if you do go this route, I recommend creating createdICollection = createCollection<ICollectionMap>() outside the React component, some more reading about this can be answered by this excellent answer to the question: Where should functions in function components go?
In short:

> In most cases you should declare the functions outside the component function so you declare them only once and always reuse the same reference. When you declare the function inside, every time the component is rendered the function will be defined again.

View all Examples on TS Playground