Typescript Issue - Typescript dosen't Infer object properties

Question

I have a trouble with Typescript I am trying to infer the properties of an Object dynamically.

take a look at the below code

const Actions = {
    globalUI: {
        openModal: 'openModal'
    }
}

type Param = keyof typeof Actions;
type T = <T, K extends keyof T>(action: T, key: K) => T[K];
const fn = (param: Param) => {

    const action = mapper(Actions, param);

    return action
}
const mapper:T = (action, name) => {
    return action[name]
}

const action = fn('globalUI');

as you can see Typescript can infer a global UI properties

but When I put the additional property in the Actions Object

Typescript doesn't infer Object properties

const Actions = {
    globalUI: {
        openModal: 'openModal'
    },
    LP: {
        addDirectory: 'addDirectory'
    }
}

type Param = keyof typeof Actions;
type T = <T, K extends keyof T>(action: T, key: K) => T[K];
const fn = (param: Param) => {

    const action = mapper(Actions, param);

    return action
}
const mapper:T = (action, name) => {
    return action[name]
}

const action = fn('globalUI');

How can I achieve it? please give any idea

Matthieu Riegler · Accepted Answer · 2022-06-16 12:25:26Z

1

Your mapper function works as expected :

type T = <T, K extends keyof T>(action: T, key: K) => T[K];

const mapper:T = (action, name) => {
    return action[name]
}

const action = mapper(Actions, 'globalUI');

action.openModel // works greak

The problem lies in the fn function which infers a union as a return type. { openModal: string } | { addDirectory: string } in your example.

So you need to explicit the return type with a generic :

const fn = <S extends Param>(param: S): typeof Actions[S]  => {
    const action = mapper(Actions, param);
    return action
}

const action = fn('globalUI'); 

action.globalUI; // Ok now

Playground

answered Jun 16, 2022 at 12:25

Matthieu Riegler

59.8k27 gold badges158 silver badges208 bronze badges

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

Collectives™ on Stack Overflow

Typescript Issue - Typescript dosen't Infer object properties

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