Typescript type inference from object

Question

I'm trying to get TypeScript to correctly infer typing in the following code example:

type User = {
  name: string
}
type Product = {
  price: number
}

const userConfig = {
  action: () => [{name: 'John'}] as User[],
}
const productConfig = {
  action: () => [{price: 123}] as Product[],
}

const entityConfig = {
  userConfig,
  productConfig,
}

export const makeApp = <K extends string, R>({
  config,
}: {
  config: Record<K, {action: () => R}>
}) => {
  const actions: Record<K, {action: () => R}> = Object.keys(config).reduce(
    (acc, curr) => {
      const c: {action: () => R} = config[curr as K]
      return {
        ...acc,
        [curr]: c.action(),
      }
    },
    {} as any,
  )

  return {actions}
}

const app = makeApp({config: entityConfig})

const users = app.actions.userConfig.action() // Correctly typed as User[]
const products = app.actions.productConfig.action() // Incorrectly typed as User[] instead of Product[]

I see the following TypeScript error on line const app = makeApp({config: entityConfig})

Type '{ userConfig: { action: () => User[]; }; productConfig: { action: () => Product[]; }; }' is not assignable to type 'Record<"userConfig" | "productConfig", { action: () => User[]; }>'.
  The types returned by 'productConfig.action()' are incompatible between these types.
    Type 'Product[]' is not assignable to type 'User[]'.
      Property 'name' is missing in type 'Product' but required in type 'User'.ts(2322)

How can I get the return types for the app.actions.userConfig.action() and app.actions.productConfig.action() calls to be inferred correctly as User[] and Product[] respectively?

I had to explicitly pass them like const app = makeApp<string, User[] | Product[]>({config: entityConfig}), see here — moonwave99
– moonwave99, Commented Apr 17, 2022 at 9:04
I should clarify in the question that I'd ideally want the types to be correctly inferred, as apposed to having to explicitly add typing. — Jason Russell
– Jason Russell, Commented Apr 17, 2022 at 9:16

Ovidijus Parsiunas · Accepted Answer · 2022-04-18 10:47:28Z

1

You should infer the keys of the passed in object and construct a new interface via { [key in keyof T ]: T[key] }}:

const makeApp = <T, K extends keyof T>({ config }: { config: T }): { actions: { [key in keyof T ]: T[key] } } => {
  const actions: { [key in keyof T ]: T[key] } = Object.keys(config).reduce(
    (acc, curr) => {
      const c = config[curr as K] as unknown as { action: () => void };
      return {
        ...acc,
        [curr]: { action: c.action },
      }
    },
    {} as any,
  )
  return { actions };
}

Because the reducer is not aware that the passed in object properties contain the action key, you can use config[curr as K] as unknown as { action: () => void };.

Playground link.

edited Apr 18, 2022 at 10:47

answered Apr 17, 2022 at 9:50

Ovidijus Parsiunas

2,7723 gold badges14 silver badges24 bronze badges

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

5 Comments

Rich N Over a year ago

For me, with the code above replacing makeApp in the original question, const users = app.actions.userConfig.action() throws with a 'cannot read properties of undefined' error. It looks like actions ends up undefined?

Ovidijus Parsiunas Over a year ago

That is interesting, I have embedded a playground link to the question, it appears to work fine for me.

Rich N Over a year ago

Your types work beautifully, but the code doesn't run! Take 'export' out of your playground script, because the playground doesn't like that, and then click 'Run' at the top. You get an error 'Cannot read properties of undefined (reading 'userConfig')'.

Ovidijus Parsiunas Over a year ago

That is because the reducer code in the provided example is actually incorrect... I have updated my answer. However, it is now different to the example question and you should update the question accordingly.

Ovidijus Parsiunas Over a year ago

Additionally, if my answer has resolved your original question (for the type inference problem, not the javascript runtime problem), can you please accept it. Thankyou.

Rich N · Accepted Answer · 2022-04-18 12:04:45Z

0

I'm not sure you've quite asked the right question, or maybe I've misunderstood it. You've asked to start with an object of form { config: entityConfig }, and to do const app = makeApp({config: entityConfig}) for some function makeApp. You then want const products = app.actions.productConfig.action() to work and be correctly typed.

However, this is fairly trivial because entityConfig is already in the right form, so all we need to do is swap our key. It doesn't need a reduce function. The function below works:

const makeApp = <T>({ config }: { config: T }): { actions: T } 
    => ({ actions: config })

Full code:

type User = {
  name: string
}
type Product = {
  price: number
}

const userConfig = {
  action: () => [{name: 'John'}] as User[],
}
const productConfig = {
  action: () => [{price: 123}] as Product[],
}

const entityConfig = {
  userConfig,
  productConfig,
}

const makeApp = <T>({ config }: { config: T }): { actions: T } 
    => ({ actions: config })

const app = makeApp({config: entityConfig})

const users = app.actions.userConfig.action() // Correctly typed as User[]
const products = app.actions.productConfig.action()  // Correctly typed as Product[]

console.log(users[0].name) // John
console.log(products[0].price) // 123

answered Apr 18, 2022 at 12:04

Rich N

9,5053 gold badges30 silver badges35 bronze badges

1 Comment

Jason Russell Over a year ago

Thanks for your answer. I struggled to ask this question because I think I don't know the correct TypeScript terminology needed to more accurately or correctly phrase the question. Regarding my code example, it is somewhat contrived as its been extracted from some other code to highlight the crux of what I am needing, but Ovidijus Parsiunas's answer with his typing seems to solve my contrived code example as well as my general problem.

Collectives™ on Stack Overflow

Typescript type inference from object

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related