What is the best way to search through string enums in TypeScript strict mode?

Question

What is the best way to search through string enums in TypeScript strict mode?

Implementing TypeScript 2.8.4 in strict mode

Here's an enum example:

export enum TabIndex {
  Editor = 'editor',
  Console = 'console',
  Settings = 'settings',
  Outputs = 'outputs'
}

I am creating a Map from this enum:

tabs = new Map(<[string, string][]>Object.keys(TabIndex).map((key: any) => [TabIndex[key], key]));

Later on, I am trying to access a specific member from the Map using a query parameter:

const tabParam = this.urlSerializer.parse(this.location.path()).queryParams.tab; // can be 'editor', 'console', 'settings', etc.

Then I check if the Map has that particular key:

if (this.tabs.has(tabParam)) {
  this.selectTab(TabIndex[this.tabs.get(tabParam)!]);
}

Despite this, TypeScript continues to throw an error:

Element implicitly has an 'any' type because index expression is not of type 'number'.

Although I am aware that the index type is a string, I want to stick with it due to enums supporting string values. Any suggestions on how to resolve this TypeScript error?

After some investigation, I came across a workaround mentioned in this comment utilizing keyof typeof:

const tabParam: keyof typeof TabIndex = this.urlSerializer.parse(this.location.path()).queryParams.tab;

However, using this approach results in another TypeScript error:

Type 'string' is not assignable to type '"Editor" | "Console" | "Settings" | "Outputs"'

typescript typescript-typings

Answer 1

Answer №1

It seems like the issue lies in the type declaration of your map, which is currently set as Map<string, string>. This error is a result of how you initialized the map using

new Map(<[string, string][]> ...)

.

The problem arises when you attempt to retrieve a value from the map using the get method with a key. The map's type dictates that the values are strings, leading to the error message:

Type 'string' is not assignable to type '"Editor" | "Console" | "Settings" | "Outputs"'

Subsequently, in the following code snippet, you pass the retrieved value to TabIndex, which expects one of the specific values

"Editor" | "Console" | "Settings" | "Outputs"

, as indicated by the error message.

To address this issue, you should adjust the type of the map so that TypeScript knows the possible string literal values. This can be achieved by utilizing 'union types of those specific string literals' extracted from the TabIndex definition.

Modify the map creation as follows:

const tabs = new Map(<[string, keyof typeof TabIndex][]>Object.keys(TabIndex).map((key: any) => [TabIndex[key], key]));

This adjustment ensures that the map values, when passed to TabIndex[xxxx], will always be a recognized string literal.

Answer 2

It seems like the issue lies in the type declaration of your map, which is currently set as Map<string, string>. This error is a result of how you initialized the map using

new Map(<[string, string][]> ...)

.

The problem arises when you attempt to retrieve a value from the map using the get method with a key. The map's type dictates that the values are strings, leading to the error message:

Type 'string' is not assignable to type '"Editor" | "Console" | "Settings" | "Outputs"'

Subsequently, in the following code snippet, you pass the retrieved value to TabIndex, which expects one of the specific values

"Editor" | "Console" | "Settings" | "Outputs"

, as indicated by the error message.

To address this issue, you should adjust the type of the map so that TypeScript knows the possible string literal values. This can be achieved by utilizing 'union types of those specific string literals' extracted from the TabIndex definition.

Modify the map creation as follows:

const tabs = new Map(<[string, keyof typeof TabIndex][]>Object.keys(TabIndex).map((key: any) => [TabIndex[key], key]));

This adjustment ensures that the map values, when passed to TabIndex[xxxx], will always be a recognized string literal.

Answer 3

Answer №2

Issue arises in the line where typeParam is defined, as a string (probably queryParam.tab is a string) is being assigned to a keyof typeof TabIndex. Since a string can hold any value, it cannot be assigned to a variable that only accepts four specific values.

However, if you are certain that tab will always be as expected, you can make an assertion:

type TabIndexKey = keyof typeof TabIndex;
const tabParam: TabIndexKey = this.urlSerializer.parse(this.location.path()).queryParams.tab as TabIndexKey.

If queryParams.tab is of type any, the solution remains the same.

UPDATE: To resolve the issue of not using implicit any, enums' index expressions should utilize numbers instead of strings. This means:

TabIndex['editor']; // error with not implicit any
TabIndex[0]; // correct

Hence, it is advised to alter the enum definition and tabs map to use numbers instead of strings:

export enum TabIndex {
  Editor = 0,
  Console = 1,
  Settings = 2,
  Outputs = 3
}

const tabs = new Map(<[string, number][]>Object.keys(TabIndex).map((key: any) => [key, TabIndex[key]]));

Although tabs technically contains both strings and numbers, we can overlook this fact since only string keys are needed in this case.

Now,

TabIndex[this.tabs.get(tabParam)!]

functions correctly as this.tabs.get returns a number.

Hope this explanation proves helpful.

Answer 4

Issue arises in the line where typeParam is defined, as a string (probably queryParam.tab is a string) is being assigned to a keyof typeof TabIndex. Since a string can hold any value, it cannot be assigned to a variable that only accepts four specific values.

However, if you are certain that tab will always be as expected, you can make an assertion:

type TabIndexKey = keyof typeof TabIndex;
const tabParam: TabIndexKey = this.urlSerializer.parse(this.location.path()).queryParams.tab as TabIndexKey.

If queryParams.tab is of type any, the solution remains the same.

UPDATE: To resolve the issue of not using implicit any, enums' index expressions should utilize numbers instead of strings. This means:

TabIndex['editor']; // error with not implicit any
TabIndex[0]; // correct

Hence, it is advised to alter the enum definition and tabs map to use numbers instead of strings:

export enum TabIndex {
  Editor = 0,
  Console = 1,
  Settings = 2,
  Outputs = 3
}

const tabs = new Map(<[string, number][]>Object.keys(TabIndex).map((key: any) => [key, TabIndex[key]]));

Although tabs technically contains both strings and numbers, we can overlook this fact since only string keys are needed in this case.

Now,

TabIndex[this.tabs.get(tabParam)!]

functions correctly as this.tabs.get returns a number.

Hope this explanation proves helpful.

What is the best way to search through string enums in TypeScript strict mode?

Answer №1

Answer №2

Similar questions

Introducing a variety of services into the system

Creating a new endpoint within the Angular2 framework using typescript

Sending user input data from a React text field to a function as arguments

Guide on utilizing TypeScript declarations imported as `* as`

Using Cypress fixtures with TypeScript

Prettier mandates that single-line if-statements without curly braces must be written on the same line

Leverage the power of Typescript to flatten a JSON model with the help of Class

Incorporating TypeScript into a React-Native Expo development venture

DateAdapter not found within Angular/Material/Datepicker - Provider not available

Strategies for extracting information from the database

How can I customize a currency directive in AngularJS using filters?

Having trouble linking tables to Node.js with TypeScriptyntax?

Sundays and last days are excluding React-big-calendar and dayjs longer events from being displayed

Encountered 'DatePickerProps<unknown>' error while attempting to develop a custom component using Material-UI and react-hook-form

Running JavaScript code when the route changes in Angular 6

Implementing strict validation for Angular @Input by allowing only predefined values

It is not possible to access the Angular component using routing capabilities

What are the circumstances under which JavaScript GCP libraries return null values?

What is the process of declaring a global function in TypeScript?

Django and Angular combine to create a floral mapping feature that allows users to easily return to their task list