Combining enum values to create a new data type

Question

Combining enum values to create a new data type

Exploring the implementation of type safety in a particular situation. Let’s consider the following:

const enum Color {
  red = 'red',
  blue = 'blue',
}

const enum Shape {
  rectangle = 'rectangle',
  square = 'square',
  circle = 'circle'
}

Is there a way to create a type that can accept values from either of these enums?

Here's what has been attempted:

type Characteristics =
  | `${Color}`
  | `${Shape}`

const characteristic: Characteristics[] = ['circle', 'red']; // currently does not fail as intended

However, the requirements were not fully met as the array was able to take any of the enum values.

The desired outcome is:

const char1: Characteristics[] = ['circle', 'square']; // correct
const char2: Characteristics[] = ['circle', 'red']; // should fail
const char3: Characteristics[] = []; // should fail
const char4: Characteristics[] = ['test', 'red', 'blue']; // should fail

typescript enums union-types

Answer 1

Answer №1

Employ a Union Type

(keyof typeof Color)[] | (keyof typeof Shape)[]

to define an array type containing items that are either exclusively of type Color or solely of type Shape.

To guarantee that the array contains at least one value, declare a Tuple Type with a predefined initial item and an expanded array on the second index.

const enum Color {
  red = "red",
  blue = "blue",
}

const enum Shape {
  rectangle = "rectangle",
  square = "square",
  circle = "circle",
}

type Colors = keyof typeof Color;
type Shapes = keyof typeof Shape;

type Characteristics = [Colors, ...Colors[]] | [Shapes, ...Shapes[]];

let char: Characteristics;

char = ["circle", "square"]; // valid
char = ["red", "blue"]; // valid
char = ["circle", "red"]; // invalid
char = ["circle", "red"]; // invalid
char = []; // invalid
char = ["test", "red", "blue"]; // invalid

TypeScript Playground

Answer 2

Employ a Union Type

(keyof typeof Color)[] | (keyof typeof Shape)[]

to define an array type containing items that are either exclusively of type Color or solely of type Shape.

To guarantee that the array contains at least one value, declare a Tuple Type with a predefined initial item and an expanded array on the second index.

const enum Color {
  red = "red",
  blue = "blue",
}

const enum Shape {
  rectangle = "rectangle",
  square = "square",
  circle = "circle",
}

type Colors = keyof typeof Color;
type Shapes = keyof typeof Shape;

type Characteristics = [Colors, ...Colors[]] | [Shapes, ...Shapes[]];

let char: Characteristics;

char = ["circle", "square"]; // valid
char = ["red", "blue"]; // valid
char = ["circle", "red"]; // invalid
char = ["circle", "red"]; // invalid
char = []; // invalid
char = ["test", "red", "blue"]; // invalid

TypeScript Playground

Answer 3

Answer №2

Looking to create a unique array type in Typescript? Check out this answer: Defining a non empty array type in Typescript

Consider the following solution:

type NonEmptyArray<T> = [T, ...T[]];
type Categories = NonEmptyArray<Genre>|NonEmptyArray<Length>;

Answer 4

Looking to create a unique array type in Typescript? Check out this answer: Defining a non empty array type in Typescript

Consider the following solution:

type NonEmptyArray<T> = [T, ...T[]];
type Categories = NonEmptyArray<Genre>|NonEmptyArray<Length>;

Combining enum values to create a new data type

Answer №1

Answer №2

Similar questions

Subscribing to ngrx store triggers multiple emissions

What is the best way to implement the useCallback hook in Svelte?

Monitor changes in a dynamic child component using Angular fire and TypeScript only (no HTML)

Having Trouble Adding Details to a New Cart for a User in Angular and MongoDB - What's Going On?

Updating the useState() function in React when the value changes can be done by utilizing the

Errors in TypeScript are being brought up by using if-else statements inside a loop

Leveraging the power of APIs to bring in the Chicago Art Institute into a React TypeScript

What is the process for importing components from a Stencil library into a React application?

What is the best way to assign a value to an option element for ordering purposes?

Tips on dynamically translating resources using ngx-translate

Best practices for effectively managing interface design

It seems that every time you save data in Angular, the local storage array gets overwritten

Issue with assigning Type (Date|number)[][] to Array<,Array<,string|number>> in Angular with typescript and google charts

Converting JSON to TypeScript in an Angular project

I'm looking for ways to incorporate TypeScript definition files (.d.ts) into my AngularJS application without using the reference path. Can anyone provide

What is the process for importing the Scale type definition from the Scale module?

Select one of 2 parameters and begin typing

Issue regarding custom CSS implementation in Angular project

An unexpected runtime error occurred: TypeError - Unable to use map function on events

Troubleshooting error "is not assignable to type..." when simulating global fetch using TypeScript