How to Dynamically Determine if a Value Matches a Union Type in Typescript

Question

How to Dynamically Determine if a Value Matches a Union Type in Typescript

After creating a Union type of supported methods, the goal is to verify if a specific method belongs to the set of supported methods and then execute it dynamically. One commonly used approach is to use an array containing the names of the supported methods and utilize methods such as includes to perform the check. However, I am curious if it is possible to achieve the same outcome through type checking.

import * as mathFn from './formula/math';
type SupportedMathFunction = keyof typeof mathFn;
//'fnA'| 'fnB' | ...

For instance, the desired syntax would be:

if( methodName is SupportedMathFunction){
//do something
}

typescript typechecking union-types

Answer 1

Answer №1

To determine if the given method name exists as a key in mathFn, it is important to note that simply checking is not sufficient for the compiler to recognize that the string belongs to type SupportedMathFunction. Instead, one must implement User-Defined Type Guards

function isMemberOfMathFn(methodName: string): methodName is keyof typeof mathFn {
  return methodName in mathFn;
}


function test(methodName: string) {
  if (isMemberOfMathFn(methodName)) {
    const method = mathFn[methodName];
  }
}

Answer 2

To determine if the given method name exists as a key in mathFn, it is important to note that simply checking is not sufficient for the compiler to recognize that the string belongs to type SupportedMathFunction. Instead, one must implement User-Defined Type Guards

function isMemberOfMathFn(methodName: string): methodName is keyof typeof mathFn {
  return methodName in mathFn;
}


function test(methodName: string) {
  if (isMemberOfMathFn(methodName)) {
    const method = mathFn[methodName];
  }
}

How to Dynamically Determine if a Value Matches a Union Type in Typescript

Answer №1

Similar questions

A guide to creating a forward reference in React

Using prevState in setState is not allowed by TypeScript

What is the correct way to interpret a JSON file using TypeScript?

What is the best way to incorporate data types into a React useReducer reducer function?

Revamping elements according to ordered array. Angular version 4.3

choosing between different options within Angular reactive forms

The @input field is failing to show the value entered by the user

Making a HTTP Get request for a single item in Ionic 2

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

After clicking on the "Delete Rows" button in the table, a white color suddenly fills the background in Angular Material

Warning in Typescript: potential undefined access detected when strict mode is enabled

Ways to link information from one entity to another

Best practices for applying the Repository pattern within a NestJS application

Assign a value to a variable using a function in Typescript

Is it possible for Angular to retrieve information from one JSON file but not another?

Angular threw an error saying: "Template parse errors: is not a recognized element"

Updating the navigation bar in Node/Angular 2 and displaying the sidebar once the user has logged in

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

Encountering a 'No overload matches this call.' error when using ApexCharts with Typescript and ReactJS

Encountering a Vueify Typescript error in a Vue project