React typescript conditional types

Question

I have a hook that returns data. Its type is depending on the props passed.

interface MyHookProps<T, TF> {
  transform?: (data: T) => TF
}

const myHook = <T extends any = any, TF = any>(props?: MyHookProps<T, TF>) => {
  const [items, setItems] = useState([])

  return { data: items }
}

I want my data to be the return type of transform when it is passed as prop and T when its not

example:

interface User {
  name: string;
  age: number;
}

const { data } = myHook<User[]>();

Its type should be User[], but when you do it like this:

const { data } = myHook<User[]>({
  transform: (data) => data.map(d => ({ ...d, another: 1 }))
})

Its type should be

{
  name: string;
  age: number;
  another: string;
}[]

Tobias S. · Accepted Answer · 2022-11-17 09:08:44Z

1

This is currently not possible as written in the question as TypeScript lacks partial type inference. Providing an explicit type parameter will prevent inference of others.

We can use currying to work around this problem.

const myHook = <T extends any>() => <TF extends any>(props?: MyHookProps<T, TF>) => {
  const [items, setItems] = useState([])

  return { data: items } as { data: unknown extends TF ? T : TF }
}

Here we "chain" two functions together. The first one uses T as the generic type while the second one can infer TF. In the conditional type at the return statement, we check if TF could be inferred. If not, we return T.

interface User {
  name: string;
  age: number;
}

namespace N1 {
  const { data } = myHook<User[]>()();
}

namespace N2 {
  const { data } = myHook<User[]>()({
    transform: (data) => data.map(d => ({ ...d, another: 1 }))
  })
}

Playground

edited Nov 17, 2022 at 9:08

answered Nov 17, 2022 at 9:00

Tobias S.

24.3k7 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React typescript conditional types

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related