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

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`

SwitchMap in Typescript allows you to switch to a

What steps should I take to import a module with type definitions? (receiving error TS2656: ...not a module)

Update each number in an array by appending a string within a table in an Angular component, rather than the

Using JSDoc to Include TypeScript Definitions

Using TypeScript to return an empty promise with specified types

Learn how to connect a formArray from the parent component to the child component in Angular with reactive forms, allowing you to easily modify the values within the formArray

Ways to retrieve the quantity of a particular value within an object using TypeScript

show additional worth on the console

Component not appearing in Storybook during rendering

What is the proper way to define the scope for invoking the Google People API using JavaScript?

I attempted to execute an art configuration on Metaplex, but I keep encountering the same issue. Despite numerous attempts to modify various settings, the problem persists

Troubleshooting Date library timezone problems in Typescript locale

Unable to use console log in shorthand arrow function while working with Typescript

Separate the string by commas, excluding any commas that are within quotation marks - javascript

Organizing a mat-table by date does not properly arrange the rows

Matching packages with mismatched @types in Webpack 2: A comprehensive guide

Using Angular components to manipulate the CSS in the DOM

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Issue with rendering React Toastify

Using a Typescript-specific type within a switch case statement

Answer №1

Answer №2

Answer №3

Similar questions

Creating encoded objects for a content-type of `application/x-www-form-urlencoded`

SwitchMap in Typescript allows you to switch to a

What steps should I take to import a module with type definitions? (receiving error TS2656: ...not a module)

Update each number in an array by appending a string within a table in an Angular component, rather than the

Using JSDoc to Include TypeScript Definitions

Using TypeScript to return an empty promise with specified types

Learn how to connect a formArray from the parent component to the child component in Angular with reactive forms, allowing you to easily modify the values within the formArray

Ways to retrieve the quantity of a particular value within an object using TypeScript

show additional worth on the console

Component not appearing in Storybook during rendering

What is the proper way to define the scope for invoking the Google People API using JavaScript?

I attempted to execute an art configuration on Metaplex, but I keep encountering the same issue. Despite numerous attempts to modify various settings, the problem persists

Troubleshooting Date library timezone problems in Typescript locale

Unable to use console log in shorthand arrow function while working with Typescript

Separate the string by commas, excluding any commas that are within quotation marks - javascript

Organizing a mat-table by date does not properly arrange the rows

Matching packages with mismatched @types in Webpack 2: A comprehensive guide

Using Angular components to manipulate the CSS in the DOM

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Issue with rendering React Toastify

Using Angular components to manipulate the CSS in the DOM