Using a Typescript-specific type within a switch case statement

Question

Using a Typescript-specific type within a switch case statement

I'm currently working on a function that, when given an enum value, should return a specific type. I am facing an issue where Typescript does not seem to recognize the properties inside switch and if statements.

interface X {
  x: string;
}

interface Y {
  y: string;
}

enum DataType {
  x = 'x',
  y = 'y',
}

interface Type {
  [DataType.x]: X;
  [DataType.y]: Y;
}

function customFunction<T extends keyof Type>(type: T): Type[T] {
  switch (type) {
    case DataType.x:
      return {x: 'example'}; // <--- Although there's no error, TS fails to recognize the property
  }
}

Developed with Typescript version 4.2.3.

typescript

Answer 1

Answer №1

Perhaps you may find function overloads to be a suitable solution. Should you opt for this approach, you will have to substitute interface Type with a specific overload signature for each scenario.

interface A {
  a: string;
}

interface B {
  b: string;
}

enum DataType {
  a = 'a',
  b = 'b',
}

function test(value: DataType.a): A;
function test(value: DataType.b): B; 
function test(value: DataType): A | B {
  switch (value) {
    case DataType.a:
      return {a: 'testA'};
    case DataType.b:
      return {b: 'testB'};
  }
}

TypeScript playground - live example

Answer 2

Perhaps you may find function overloads to be a suitable solution. Should you opt for this approach, you will have to substitute interface Type with a specific overload signature for each scenario.

interface A {
  a: string;
}

interface B {
  b: string;
}

enum DataType {
  a = 'a',
  b = 'b',
}

function test(value: DataType.a): A;
function test(value: DataType.b): B; 
function test(value: DataType): A | B {
  switch (value) {
    case DataType.a:
      return {a: 'testA'};
    case DataType.b:
      return {b: 'testB'};
  }
}

TypeScript playground - live example

Answer 3

Answer №2

It appears that using a switch statement may not be the ideal approach due to typescript limitations, but there is an alternative solution available.

interface A {
  a: string;
}

interface B {
  b: string;
}

enum DataType {
  a = "a",
  b = "b",
}

interface Type {
  [DataType.a]: A;
  [DataType.b]: B;
}

function test<T extends keyof Type>(type: T): Type[T] {
  return (type === DataType.a ? { a: "test" } : { b: "test" }) as Type[T];
}

Answer 4

It appears that using a switch statement may not be the ideal approach due to typescript limitations, but there is an alternative solution available.

interface A {
  a: string;
}

interface B {
  b: string;
}

enum DataType {
  a = "a",
  b = "b",
}

interface Type {
  [DataType.a]: A;
  [DataType.b]: B;
}

function test<T extends keyof Type>(type: T): Type[T] {
  return (type === DataType.a ? { a: "test" } : { b: "test" }) as Type[T];
}

Answer 5

Answer №3

When dealing with a set of related Types where differentiation is crucial, it is recommended to use a dedicated property for this purpose - TypeScript is designed for optimal performance in such scenarios. For instance:

type KindValues = "a" | "b"

type TT = {
  kind:KindValues,
  body: any
}

type TA = {
  kind:"a",
  body:string
}
function isTA(t:TT):t is TA { return t.kind==="a"; }

type TB = {
  kind:"b",
  body:number
}
function isTB(t:TT):t is TB { return t.kind==="b"; }

function handler(t:TT):void{
  if (isTA(t)){
    //t.body=1  // error: number is not assignable to string
    t.body = 'x';
  }
  else if (isTB(t)){
    //t.body='x'  // error: string is not assignable to number
    t.body = 1;
  }
}

To avoid excessive type checks, it is often more versatile to establish a Map linking kind to corresponding functions.

While TypeScript does not mandate a single discriminator key, it performs efficiently even with an additional key for subtyping types. However, keeping the keys minimal enhances auto-completion capabilities.

Answer 6

When dealing with a set of related Types where differentiation is crucial, it is recommended to use a dedicated property for this purpose - TypeScript is designed for optimal performance in such scenarios. For instance:

type KindValues = "a" | "b"

type TT = {
  kind:KindValues,
  body: any
}

type TA = {
  kind:"a",
  body:string
}
function isTA(t:TT):t is TA { return t.kind==="a"; }

type TB = {
  kind:"b",
  body:number
}
function isTB(t:TT):t is TB { return t.kind==="b"; }

function handler(t:TT):void{
  if (isTA(t)){
    //t.body=1  // error: number is not assignable to string
    t.body = 'x';
  }
  else if (isTB(t)){
    //t.body='x'  // error: string is not assignable to number
    t.body = 1;
  }
}

To avoid excessive type checks, it is often more versatile to establish a Map linking kind to corresponding functions.

While TypeScript does not mandate a single discriminator key, it performs efficiently even with an additional key for subtyping types. However, keeping the keys minimal enhances auto-completion capabilities.

Using a Typescript-specific type within a switch case statement

Answer №1

Answer №2

Answer №3

Similar questions

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Changing the color of a specific span using Angular

I'm experiencing some difficulties utilizing the return value from a function in Typescript

Exploring the parent-child relationship of three components within Angular 2

Learn how to import from a .storybook.ts file in Vue with TypeScript and Storybook, including how to manage Webpack configurations

When assigning JSON to a class object, the local functions within the class became damaged

Having trouble getting the onClick function to work in your Next.js/React component?

SystemJS TypeScript Project

When employing the caret symbol (^) in package.json, it fails to update the minor version

Display <video> component using Angular 2

The npm package has been successfully installed, but VS Code is having trouble locating it

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

Step-by-step guide on setting up pnpm directly, without the need to first

Define a new type in Typescript that is equal to another type, but with the added flexibility of having optional

Omit functions from category

Error encountered: The import of 'createLocation' from 'history' failed. This issue occurred due to conflicting versions of History and React-Router-DOM

Displaying user input data in a separate component post form submission within Angular

Trying to determine the specific key of an object based on its value in TypeScript?

Encountering a problem with Vue StripeCheckout while navigating to a different component

Typescript - A guide on updating the value of a key in a Map object