Discover the secret to creating an efficient TypeScript function that offers autocomplete with enum values

Question

Discover the secret to creating an efficient TypeScript function that offers autocomplete with enum values

I'm attempting to achieve a scenario similar to the code below:

enum Color 
{
  RED="RED",
  GREEN="GREEN",
  BLUE="BLUE"
}

function setColor(color:Color)
{

}

However, when I attempt to call the function like this:

setColor("RED"),

I encounter the error message:

Argument of type '"RED"' is not assignable to parameter of type 'Color'.ts(2345),

I am aware that I can use

setColor("Red" as Color),

but my preference is for "RED" to be auto-completed as I type. Is there a way to achieve this functionality?

typescript

Answer 1

Answer №1

To use the function setColor() with a string literal argument like (setColor("RED")), it is recommended to utilize a Union Type instead of an enum.

type Color = "RED" | "Green" | "Blue";
declare function setColor(color: Color): unknown;
setColor("RED");

If you prefer to achieve this dynamically using your enum, you can do so by employing keyof typeof Color.

enum Color {
  RED = "RED",
  GREEN = "GREEN",
  BLUE = "BLUE"
}
declare function setColor(color: keyof typeof Color): unknown;
setColor("RED");

TypeScript Playground

Answer 2

To use the function setColor() with a string literal argument like (setColor("RED")), it is recommended to utilize a Union Type instead of an enum.

type Color = "RED" | "Green" | "Blue";
declare function setColor(color: Color): unknown;
setColor("RED");

If you prefer to achieve this dynamically using your enum, you can do so by employing keyof typeof Color.

enum Color {
  RED = "RED",
  GREEN = "GREEN",
  BLUE = "BLUE"
}
declare function setColor(color: keyof typeof Color): unknown;
setColor("RED");

TypeScript Playground

Discover the secret to creating an efficient TypeScript function that offers autocomplete with enum values

Answer №1

Similar questions

Encountered an issue when utilizing the useRef hook in Next.js version 13

Retrieve information for the designated page exclusively

Executing a component method from a service class in Angular

When initializing a variable in Typescript, it is important to consider that the object may potentially be undefined

What steps can I take to resolve the error message stating "Type X is not compatible with Type Y" in TypeScript?

Determining the correct type for a recursive function

TimeStamp Recorder - Typescript

Using Angular 4 to monitor changes in two-way binding properties

Using TypeScript with makeStyles - how to effectively pass props for styling purposes

"Facing a challenge with Angular 2 where an HTTP request is being triggered twice

Can you explain the concept of `export as namespace` in a TypeScript definition file?

Using arrays as parameters for custom functions leading to add-in loading issues

Is there a method to accurately pinpoint the specific type?

What causes the cursor in an editable div to automatically move to the front of the div?

Selecting ion-tabs causes the margin-top of scroll-content to be destroyed

Arranging a dictionary by its keys using Ramda

Error: Unexpected character U found at the beginning of the JSON data when using JSON.parse in Angular 8

What could be the reason for the crash caused by ngModel?

Errors abound in Angular's implementation of custom reactive form validators

Exploring the depths of nested data retrieval using the fp-ts library: a labyrinth