How to access to type using function argument

Question

I have been trying to get the specific type based on an function argument but I can't find any way in typescript.

This "step" argument is actually a key in the slice

type Slice1 = {
    info: string
}

type Slice2 = {
    info: string
}

type MyAppState = {
    step1: Slice1;
    step2: Slice2;
}

function useStep<T>(step: keyof T): T[typeof step] {
  const [state] = useContext(ExternalContext);
  return state[step];
}

const step1 = useStep<MyAppState>('step1'); <-- **should return Slice1 type**

I want to get the correct type depending on the key.

would it make sense to pass anything other than MyAppState to the useStep function? The solution is probably to use <T extends keyof MyAppState>(step: T): MyAppState[T] but I'm not sure what your goal is. — Tadhg McDonald-Jensen
– Tadhg McDonald-Jensen, Commented Sep 29, 2020 at 22:00
The important thing is that the key itself needs to be generic, rather than just keyof T, so that your return type can be based on this specific key. In the unlikely case that ExternalContext can have multiple types of state, you can make both the state and the key generic like so function useStep<T, K extends keyof T>(step: K): T[K], but you would no longer be able to specify T without also specifying K, so you couldn't type useStep<MyAppState>('step1'). If the only possible type of state is MyAppState then only the key needs to be generic and it will be what the others have said. — Linda Paiste
– Linda Paiste, Commented Sep 29, 2020 at 23:02
My goal is to keep MyAppState outside useStep hook definition because I want this state to be specified by the consumer. The ideal scenario might be: const mySlice = useStep<AnyState>('keyInAnyState') --> only the slice type — Alexis Patiño
– Alexis Patiño, Commented Sep 30, 2020 at 2:40

gurisko · Accepted Answer · 2020-09-30 07:51:49Z

1

Is the fact that we hardcode MyAppState okay with you?:

function useStep<TKey extends keyof MyAppState>(step: TKey): MyAppState[TKey] {
  const [state] = useContext(ExternalContext);
  return state[step];
}

const step1 = useStep('step1'); // <-- returns Slice1 type

EDIT: Since you don't want to hardcode MyAppState in your type, you can use a curried function:

function useStep<T>() {
  return <TKey extends keyof T>(step: TKey): T[TKey] => {
    const [state] = useContext(ExternalContext);
    return state[step];
  }
}

const step1 = useStep<MyAppState>()('step1'); // <-- returns Slice1 type

edited Sep 30, 2020 at 7:51

answered Sep 29, 2020 at 22:26

gurisko

1,1828 silver badges14 bronze badges

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

3 Comments

Alexis Patiño Over a year ago

My goal is to keep MyAppState outside useStep hook definition because I want this to be specified by the consumer. The ideal scenario might be: const mySlice = useStep<AnyState>('keyInAnyState') --> only the slice type

Alexis Patiño Over a year ago

Wow nice approach, thank you. I came out with this solution inspired by redux: selectors ` function useStep<TState = {}, TSelected = unknown>( selector: (state: TState) => TSelected):TSelected { const [state] = useContext(ExternalContext); return state[step]; } ` ` const step1 = useStep((state: MyAppState) => state.step1); `

gurisko Over a year ago

@AlexisPatiño The issue with your solution is that it doesn't check whether the key of the interface is used: useStep((state: MyAppState) => 12); is valid and it returns number.

Collectives™ on Stack Overflow

How to access to type using function argument

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related