Using Typescript to map a string to an enum

Question

Using Typescript to map a string to an enum

Having trouble mapping a string to an enum and receiving the error message

TypeError: Cannot convert undefined value to object

export enum CallErrorType {
  UNAUTHENTICATED,
}

const handler: {
  [key in CallErrorType]: (message: string) => void;
} = {
  [CallErrorType.UNAUTHENTICATED]: message => {
    console.log('----> Error UNAUTHENTICATED', message);
  },
};

const CallErrorTypeHandler = (errorCode: string, message: string) => {
  console.log({errorCode});

  const mapped =
    CallErrorType[errorCode as keyof typeof CallErrorType];

  if (mapped !== undefined) {
    return handler[mapped](message);
  } else {
    console.error('Invalid error string:', errorCode);
  }
};

Looking for guidance on my approach.

tsconfig (React Native)

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Native",
  "_version": "3.0.2",
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "types": ["react-native", "jest"],
    "lib": [
      "es2019",
      "es2020.bigint",
      "es2020.date",
      "es2020.number",
      "es2020.promise",
      "es2020.string",
      "es2020.symbol.wellknown",
      "es2021.promise",
      "es2021.string",
      "es2021.weakref",
      "es2022.array",
      "es2022.object",
      "es2022.string"
    ],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": false,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Encountering another issue now:

TypeError: 0, _$$_REQUIRE(_dependencyMap[3](...)rror").CallErrorTypeHandler is not a function (it is undefined)

javascript typescript typescript-typings react-typescript

Answer 1

Answer №1

When TypeScript is used, it defaults to number-based mapping.

The issue arises with how TypeScript handles enum mapping based on numbers. When TypeScript compiles an enum, it creates an object that contains mappings for both numbers to strings and strings to numbers for the enum values. For example, for the CallErrorType enum, the resulting object will look like this:

{
  0: "UNAUTHENTICATED",
  "UNAUTHENTICATED": 0
}

Therefore, when you try to access a value using CallErrorType[errorCode as keyof typeof CallErrorType], you are attempting to retrieve the value of the key named after the string in errorCode. If the string is not found, it will return undefined.

The only solution is to define the enum like this:

export enum CallErrorType {
  UNAUTHENTICATED = "UNAUTHENTICATED",
}

const handler: {
  [key in CallErrorType]: (message: string) => void;
} = {
  [CallErrorType.UNAUTHENTICATED]: message => {
    console.log('----> Error UNAUTHENTICATED', message);
  },
};

const CallErrorTypeHandler = (errorCode: string, message: string) => {
  console.log({errorCode});

  const mapped = CallErrorType[errorCode as keyof typeof CallErrorType];

  if (mapped && typeof mapped === 'string') { // Check if it's a string
    return handler[mapped](message);
  } else {
    console.error('Invalid error string:', errorCode);
  }
};

Some Notes 📝:

-Instead of just checking if mapped !== undefined, it is advisable to also ensure that the mapped value is not a string (i.e., verify that it is a number).

-For clarity, consider using a string-based enum. This can help avoid any potential ambiguities in the code.

Answer 2

When TypeScript is used, it defaults to number-based mapping.

The issue arises with how TypeScript handles enum mapping based on numbers. When TypeScript compiles an enum, it creates an object that contains mappings for both numbers to strings and strings to numbers for the enum values. For example, for the CallErrorType enum, the resulting object will look like this:

{
  0: "UNAUTHENTICATED",
  "UNAUTHENTICATED": 0
}

Therefore, when you try to access a value using CallErrorType[errorCode as keyof typeof CallErrorType], you are attempting to retrieve the value of the key named after the string in errorCode. If the string is not found, it will return undefined.

The only solution is to define the enum like this:

export enum CallErrorType {
  UNAUTHENTICATED = "UNAUTHENTICATED",
}

const handler: {
  [key in CallErrorType]: (message: string) => void;
} = {
  [CallErrorType.UNAUTHENTICATED]: message => {
    console.log('----> Error UNAUTHENTICATED', message);
  },
};

const CallErrorTypeHandler = (errorCode: string, message: string) => {
  console.log({errorCode});

  const mapped = CallErrorType[errorCode as keyof typeof CallErrorType];

  if (mapped && typeof mapped === 'string') { // Check if it's a string
    return handler[mapped](message);
  } else {
    console.error('Invalid error string:', errorCode);
  }
};

Some Notes 📝:

-Instead of just checking if mapped !== undefined, it is advisable to also ensure that the mapped value is not a string (i.e., verify that it is a number).

-For clarity, consider using a string-based enum. This can help avoid any potential ambiguities in the code.

Using Typescript to map a string to an enum

Answer №1

Similar questions

Comparing Two Items between Two Arrays

How to update a deeply nested object using a single function in a React component

An issue occurs with the scope of a variable during the compilation of Relay Modern code, resulting in an

Function for calling a CSS callback with jQuery

Is there a way to see the countdown timers in Angular 7?

Presentation of information with loading and error scenarios

Creating a nested array within each parent array and transferring values in JavaScript

Error message: Angular 12 - Event emitter variable is not defined

Initiate the printing process by executing the window.print() function. As the document is being

Fade effect on vectorial HTML map with Javascript (mouseover)

Ways to verify if a firebase timestamp surpasses the present date

Is there a way to adjust the navigator locale on a mobile device?

Enhancing ChoicePrompt with ListStyle.heroCard: Adding Personalized Data

Sending information to a single component among several

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

Reading properties of undefined in React is not possible. The log method only functions on objects

Using Next-Image Relative Paths can lead to 404 errors when being indexed by web crawlers

Guide on emphasizing a div when the page's validity is not true

send the value of a variable from a child component to its parent

The process of integrating a Loader in Javascript