Utilize mapping for discriminated union type narrowing instead of switch statements

Question

Utilize mapping for discriminated union type narrowing instead of switch statements

My objective is to utilize an object for rendering a React component based on a data type property. I am exploring ways to avoid utilizing switch cases when narrowing a discriminated union type in TypeScript. The typical method involves using if-else or switch statements, where TS automatically narrows the value:

type AView = {type: 'A', name: string} 
type BView = {type: 'B', count: number} 
type View = AView | BView

const prints =  {
    'A': (view: AView) => `this is A: ${view.name}`,
    'B': (view: BView) => `this is B. Count: ${view.count}`,
} as const

const outputWorks = (view: View): string => {
  switch (view.type) {
    case 'A':
    // or prints['A'](view)
      return prints[view.type](view)
    case 'B':
    // or prints['B'](view)
      return prints[view.type](view)
  }
}

outputWorks({type: 'A', name: 'John'})

I am curious whether there is a way to avoid using the switch statement and convince TS that the object can effectively narrow down the data:


type AView = {type: 'A', name: string} 
type BView = {type: 'B', count: number} 
type View = AView | BView

const prints =  {
    'A': (view: AView) => `this is A: ${view.name}`,
    'B': (view: BView) => `this is B. Count: ${view.count}`,
} as const

const outputFail = (view: View): string => prints[view.type](view)

outputFail({type: 'A', name: 'John'})

When implementing this approach, I encounter the error

The intersection 'AView & BView' was reduced to 'never' because property 'type' has conflicting types in some constituents.

due to TS failing to narrow down the type.

You can view and interact with this code on the TS Playground.

I have been working on resolving this issue for a week now and it seems quite challenging. Despite looking at various related discussions, I haven't been able to solve this problem yet.

typescript discriminated-union

Answer 1

Answer №1

The main issue at hand is the absence of direct support for correlated unions as outlined in microsoft/TypeScript#30581. Within the context of outputFail, the type of prints[view.type] is a union type denoted by

((view: AView) => string) | ((view: BView) => string)

, and the type of view is also a union type AView | BView. If all we know is that there exists a function f with the same type as prints[view.type], and a value v with the same type as view, then calling f(v) would not be considered safe. This uncertainty arises from the possibility that if v is an AView while f expects a (view: BView) => string, it could lead to errors.

However, in reality, this scenario is not valid. The union type of prints[view.type] and view are inherently linked in such a way that they always match. Unfortunately, the compiler lacks the capability to handle correlated unions.

The proposed solution to address this challenge can be found in microsoft/TypeScript#47109. The concept involves replacing unions with generics and restructuring the types to clearly convey to the compiler the compatibility between the function and its argument. In essence, f would have a generic type of (arg: Arg<K>) => void, while v would be of generic type Arg<K>.

Below is one possible implementation:

interface BaseView {
  A: { name: string };
  B: { count: number };
}

type View<K extends keyof BaseView = keyof BaseView> = {
  [P in K]: { type: P } & BaseView[P]
}[K];

In this redefinition, View is transformed into a generic distributive object type constructed from a basic mapping. Using no type argument with View gives the original version, but specifying the correct key allows retrieval of AView and BView types:

type AView = View<"A">;
type BView = View<"B">;


const printA = (view: AView) => {
  return `this is A: ${view.name}`
}

const printB = (view: BView) => {
  return `this is B. Count: ${view.count}`
}

To ensure proper typing when declaring prints, its type needs to be explicitly defined using a mapped type based on the same "base" mapping. This approach ensures the indexing results in a generic type rather than a union:

const prints: { [K in keyof BaseView]: (view: View<K>) => string } = {
  'A': printA,
  'B': printB,
}

Finally, here's how it all comes together:

const output = <K extends keyof BaseView>(view: View<K>): string => {
  const fn = prints[view.type];
  return fn(view); // everything aligns correctly
}

Upon closer inspection, fn has a type equivalent to

(view: View<K>) => string

, and view is of type View<K>, ensuring smooth execution.

Link to Playground with Code

Answer 2

The main issue at hand is the absence of direct support for correlated unions as outlined in microsoft/TypeScript#30581. Within the context of outputFail, the type of prints[view.type] is a union type denoted by

((view: AView) => string) | ((view: BView) => string)

, and the type of view is also a union type AView | BView. If all we know is that there exists a function f with the same type as prints[view.type], and a value v with the same type as view, then calling f(v) would not be considered safe. This uncertainty arises from the possibility that if v is an AView while f expects a (view: BView) => string, it could lead to errors.

However, in reality, this scenario is not valid. The union type of prints[view.type] and view are inherently linked in such a way that they always match. Unfortunately, the compiler lacks the capability to handle correlated unions.

The proposed solution to address this challenge can be found in microsoft/TypeScript#47109. The concept involves replacing unions with generics and restructuring the types to clearly convey to the compiler the compatibility between the function and its argument. In essence, f would have a generic type of (arg: Arg<K>) => void, while v would be of generic type Arg<K>.

Below is one possible implementation:

interface BaseView {
  A: { name: string };
  B: { count: number };
}

type View<K extends keyof BaseView = keyof BaseView> = {
  [P in K]: { type: P } & BaseView[P]
}[K];

In this redefinition, View is transformed into a generic distributive object type constructed from a basic mapping. Using no type argument with View gives the original version, but specifying the correct key allows retrieval of AView and BView types:

type AView = View<"A">;
type BView = View<"B">;


const printA = (view: AView) => {
  return `this is A: ${view.name}`
}

const printB = (view: BView) => {
  return `this is B. Count: ${view.count}`
}

To ensure proper typing when declaring prints, its type needs to be explicitly defined using a mapped type based on the same "base" mapping. This approach ensures the indexing results in a generic type rather than a union:

const prints: { [K in keyof BaseView]: (view: View<K>) => string } = {
  'A': printA,
  'B': printB,
}

Finally, here's how it all comes together:

const output = <K extends keyof BaseView>(view: View<K>): string => {
  const fn = prints[view.type];
  return fn(view); // everything aligns correctly
}

Upon closer inspection, fn has a type equivalent to

(view: View<K>) => string

, and view is of type View<K>, ensuring smooth execution.

Link to Playground with Code

Utilize mapping for discriminated union type narrowing instead of switch statements

Answer №1

Similar questions

What is the best way to handle missing values in a web application using React and TypeScript?

Assign the onClick function to the decoration of a Vscode extension

What is the safest method to convert a nested data structure into an immutable one while ensuring type safety when utilizing Immutable library?

What is the process for transforming a Typescript source file into JavaScript?

Combining the Partial<CssStyleDeclaration> union type with a dictionary can lead to potential typing complications when the implicit any flag is

Is it possible for pdfjs-dist to be used with Typescript?

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

How to Create a Flexible Angular Array Input Component

Guide to utilizing vue-twemoji-picker in TypeScript programming?

Creating a dynamic union return type in Typescript based on input parameters

Revealing the Webhook URL to Users

Can you explain the distinction between employing 'from' and 'of' in switchMap?

Error: Vercel deployment of Next.Js app fails due to undefined localStorage

Issue with Material UI grid not rendering properly in TypeScript environment

Transforming Post Requests into Options Requests

Creating Child Components in Vue Using Typescript

Incorporate Typescript into specific sections of the application

Placing a MongoDB query results in an increase of roughly 120MB in the total JS heap size

Error 2300 in Vetur: Identical identifier found for '(Missing)'

Angular 6 component experiencing issues with animation functionality