When conditionals are used, Typescript struggles to accurately infer the correct type

Question

When conditionals are used, Typescript struggles to accurately infer the correct type

When using the same type (Options<ST extends SwitchType) for useStrategy options parameter and for toPayload options, I expected Typescript to infer the correct type for toPayload options. However, I encountered an error message:

The argument of type 'FirstOptions | SecondOptions' is not assignable to the parameter of type 'FirstOptions'. Property 'b' is missing in type 'SecondOptions' but required in type 'FirstOptions'.(2345)

Is this a limitation of Typescript or am I overlooking something?

enum SwitchType {
    First = 'first',
    Second = 'second'
}
export type FirstOptions = {
  a: string
  b: number
}
type SecondOptions = {
    a: string
}

export type Options<ST extends SwitchType> = ST extends SwitchType.Second ? SecondOptions : ST extends SwitchType.First ? FirstOptions : never

type Strategy<ST> = ST extends SwitchType.Second ? SecondStrategy : ST extends SwitchType.First ? FirstStrategy : never

type ToPayloadFunction<ST extends SwitchType> = (
  options: Options<ST>
) => any

type FirstStrategy = {
  toPayload: ToPayloadFunction<SwitchType.First>
}
type SecondStrategy = {
  toPayload: ToPayloadFunction<SwitchType.Second>
}

const getStrategy = <ST extends SwitchType>(type: ST): Strategy<ST> => {

    const firstStrategy: FirstStrategy = {
        toPayload: (options) => {
            console.log(options)
        }
    }

    const secondStrategy: SecondStrategy = {
        toPayload: (options) => {
            console.log(options)
        }
    }

if(type === SwitchType.Second) return secondStrategy as any
    if(type === SwitchType.First) return firstStrategy as any

    throw new Error('error')
}

const useStrategy = <ST extends SwitchType>(type: ST, options: Options<ST>): void => {
    const { toPayload } = getStrategy(type)
// Argument of type 'FirstOptions | SecondOptions' is not assignable to parameter of type //'FirstOptions'.
// Property 'b' is missing in type 'SecondOptions' but required in type 'FirstOptions'
    toPayload(options)
}

typescript type-inference inference conditional-types

Answer 1

Answer №1

Let's explore this scenario:

enum SwitchType {
  First = 'first',
  Second = 'second'
}

export type FirstOptions = {
  a: string
  b: number
}

type SecondOptions = {
  a: string
}

export type Strategy = {
  [SwitchType.Second]: SecondOptions,
  [SwitchType.First]: FirstOptions
}

type StrategyHandlers = {
  [S in keyof Strategy]: {
    toPayload: (options: Strategy[S]) => void
  }
}

const firstStrategy: StrategyHandlers[SwitchType.First] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const secondStrategy: StrategyHandlers[SwitchType.Second] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const STRATEGY: StrategyHandlers = {
  [SwitchType.First]: firstStrategy,
  [SwitchType.Second]: secondStrategy
}


// credits goes to https://stackoverflow.com/a/50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  k: infer I
) => void
  ? I
  : never;


function getStrategy<ST extends SwitchType>(type: ST): UnionToIntersection<Values<StrategyHandlers>>
function getStrategy<ST extends SwitchType>(type: ST) {
  return STRATEGY[type]
}

type Values<T> = T[keyof T]

type Params = Values<{
  [T in SwitchType]: [T, Strategy[T]]
}>

const useStrategy = ([type, options]: Params): void => {
  const { toPayload } = getStrategy(type)

  toPayload(options)
}

toPayload function now operates with a union of functions, which may differ from your expectations and lead to errors. Check out my article for more insights.

I have simplified the code by removing conditional types, opting for a straightforward strategy pattern implementation using a Map data structure instead.

The updated toPayload now handles First or Second argument types via overloaded functions.

Although not foolproof, this setup allows unexpected input like:

const useStrategy = ([type, options]: Params): void => {
  const { toPayload } = getStrategy(type)

  toPayload({ a: 's' })
}

Refer to this answer for further clarification.

A more secure approach would involve:

enum SwitchType {
  First = 'first',
  Second = 'second'
}

export type FirstOptions = {
  a: string
  b: number
}

type SecondOptions = {
  a: string
}

export type Strategy = {
  [SwitchType.Second]: SecondOptions,
  [SwitchType.First]: FirstOptions
}

type StrategyHandlers = {
  [S in keyof Strategy]: {
    toPayload: (options: Strategy[S]) => void
  }
}

const firstStrategy: StrategyHandlers[SwitchType.First] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const secondStrategy: StrategyHandlers[SwitchType.Second] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const STRATEGY: StrategyHandlers = {
  [SwitchType.First]: firstStrategy,
  [SwitchType.Second]: secondStrategy
}

function getStrategy<ST extends SwitchType>(type: ST) {
  return STRATEGY[type].toPayload
}

const first = getStrategy(SwitchType.First)
const second = getStrategy(SwitchType.Second)

first({ a: '', b: 2 })
second({ a: '' })

Explore the code in this Playground.

Answer 2

Let's explore this scenario:

enum SwitchType {
  First = 'first',
  Second = 'second'
}

export type FirstOptions = {
  a: string
  b: number
}

type SecondOptions = {
  a: string
}

export type Strategy = {
  [SwitchType.Second]: SecondOptions,
  [SwitchType.First]: FirstOptions
}

type StrategyHandlers = {
  [S in keyof Strategy]: {
    toPayload: (options: Strategy[S]) => void
  }
}

const firstStrategy: StrategyHandlers[SwitchType.First] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const secondStrategy: StrategyHandlers[SwitchType.Second] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const STRATEGY: StrategyHandlers = {
  [SwitchType.First]: firstStrategy,
  [SwitchType.Second]: secondStrategy
}


// credits goes to https://stackoverflow.com/a/50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  k: infer I
) => void
  ? I
  : never;


function getStrategy<ST extends SwitchType>(type: ST): UnionToIntersection<Values<StrategyHandlers>>
function getStrategy<ST extends SwitchType>(type: ST) {
  return STRATEGY[type]
}

type Values<T> = T[keyof T]

type Params = Values<{
  [T in SwitchType]: [T, Strategy[T]]
}>

const useStrategy = ([type, options]: Params): void => {
  const { toPayload } = getStrategy(type)

  toPayload(options)
}

toPayload function now operates with a union of functions, which may differ from your expectations and lead to errors. Check out my article for more insights.

I have simplified the code by removing conditional types, opting for a straightforward strategy pattern implementation using a Map data structure instead.

The updated toPayload now handles First or Second argument types via overloaded functions.

Although not foolproof, this setup allows unexpected input like:

const useStrategy = ([type, options]: Params): void => {
  const { toPayload } = getStrategy(type)

  toPayload({ a: 's' })
}

Refer to this answer for further clarification.

A more secure approach would involve:

enum SwitchType {
  First = 'first',
  Second = 'second'
}

export type FirstOptions = {
  a: string
  b: number
}

type SecondOptions = {
  a: string
}

export type Strategy = {
  [SwitchType.Second]: SecondOptions,
  [SwitchType.First]: FirstOptions
}

type StrategyHandlers = {
  [S in keyof Strategy]: {
    toPayload: (options: Strategy[S]) => void
  }
}

const firstStrategy: StrategyHandlers[SwitchType.First] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const secondStrategy: StrategyHandlers[SwitchType.Second] = {
  toPayload: (options) => {
    console.log(options)
  }
}

const STRATEGY: StrategyHandlers = {
  [SwitchType.First]: firstStrategy,
  [SwitchType.Second]: secondStrategy
}

function getStrategy<ST extends SwitchType>(type: ST) {
  return STRATEGY[type].toPayload
}

const first = getStrategy(SwitchType.First)
const second = getStrategy(SwitchType.Second)

first({ a: '', b: 2 })
second({ a: '' })

Explore the code in this Playground.

When conditionals are used, Typescript struggles to accurately infer the correct type

Answer №1

Similar questions

Form submission returns JSON data with an undefined value from the server

Iterate through each item in an object using Angular

Troubleshooting Puppeteer compatibility issues when using TypeScript and esModuleInterop

Angular 7 Forms: Implementing Conditional "Required" Validation with Reactive Forms

Validation of route parameters in Angular 4

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

What is preventing TypeScript from resolving assignment in object destructuring?

Error: Export keyword unexpectedly found in TypeScript project

Setting up the properties of an object directly from an array - all in one line

How can I arrange selected options at the top in MUI autocomplete?

The DAT GUI controls are mysteriously absent from the scene

Caution - Unable to execute a function on a type that does not have a callable signature

Jasmine: utilizing unit test to spy on the invocation of a nested function

The production build is encountering an issue with a type error stating that the property 'companies' does not exist on the 'PrismaClient' type, while the local build is successful

SPFX web part encounters an issue due to lack of support for property or method "includes" in Object

Tips for displaying an associative object array as td elements within a tbody in Nuxt

Issue: Module './App' not found in webpackSolution: Check if the module path is

Overloading TypeScript functions with Observable<T | T[]>

Fire the props.onChange() function when the TextField component is blurred

Angular 2 Date Input failing to bind to date input value