Enum-centric type guard

Question

Enum-centric type guard

Could I create a custom type guard to verify if a specified string is part of a specific string enum in a more specialized way? Check out the following example:

enum MyEnum {
  Option1 = 'option one',
  Option2 = 'option two',
}

const checkIfMyEnum = (value: any): value is MyEnum => {
  return Object.values(MyEnum).includes(value as MyEnum);
};

Is there a method to convert this into a generic approach, allowing me to apply the same validation logic across various string enums?

typescript

Answer 1

Answer №1

Is this what you're asking for?

const checkEnum = <T>(e: T) => (value: any): value is T[keyof T] =>
    Object.values(e).includes(value as T[keyof T]);

Therefore, checkEnum generates type guard functions based on enum objects. The type T[keyof T] represents the types of property values in T.

const checkMyEnum = checkEnum(MyEnum);
// const checkMyEnum: (value: any) => value is MyEnum

By invoking checkEnum(MyEnum), the type T is automatically deduced as typeof MyEnum, and then T[keyof T] corresponds to the property values of that, which are essentially MyEnum.

I hope that clarifies things. Best of luck!

Link to code

Answer 2

Is this what you're asking for?

const checkEnum = <T>(e: T) => (value: any): value is T[keyof T] =>
    Object.values(e).includes(value as T[keyof T]);

Therefore, checkEnum generates type guard functions based on enum objects. The type T[keyof T] represents the types of property values in T.

const checkMyEnum = checkEnum(MyEnum);
// const checkMyEnum: (value: any) => value is MyEnum

By invoking checkEnum(MyEnum), the type T is automatically deduced as typeof MyEnum, and then T[keyof T] corresponds to the property values of that, which are essentially MyEnum.

I hope that clarifies things. Best of luck!

Link to code

Answer 3

Answer №2

When it comes to TypeScript string enums and number enums, their JavaScript emissions are quite different.

The solution provided works well for scenarios involving string enums.

However, individuals utilizing number enums might mistakenly assume that the same solution applies to their specific situation. It's important to proceed with caution in such cases.

//number enum here
enum E {
  A,
  B,
  C,
}

const isSomeEnum = <T>(e: T) => (token: any): token is T[keyof T] =>
  (Object as any).values(e).includes(token as T[keyof T]);

console.log(isSomeEnum(E)("A")); //expected false, actual true
console.log(isSomeEnum(E)(0));   //expected true , actual true

function isSomeEnum2<T> (e: T) : (token: unknown) => token is T[keyof T] {
  const keys = Object.keys(e)
    .filter((k) => {
      return !/^\d/.test(k);
    });
  const values = keys.map((k) => {
    return (e as any)[k];
  });
  return (token: unknown): token is T[keyof T] => {
    return values.includes(token);
  };
};

console.log(isSomeEnum2(E)("A")); //expected false, actual false
console.log(isSomeEnum2(E)(0));   //expected true , actual true

Playground

Answer 4

When it comes to TypeScript string enums and number enums, their JavaScript emissions are quite different.

The solution provided works well for scenarios involving string enums.

However, individuals utilizing number enums might mistakenly assume that the same solution applies to their specific situation. It's important to proceed with caution in such cases.

//number enum here
enum E {
  A,
  B,
  C,
}

const isSomeEnum = <T>(e: T) => (token: any): token is T[keyof T] =>
  (Object as any).values(e).includes(token as T[keyof T]);

console.log(isSomeEnum(E)("A")); //expected false, actual true
console.log(isSomeEnum(E)(0));   //expected true , actual true

function isSomeEnum2<T> (e: T) : (token: unknown) => token is T[keyof T] {
  const keys = Object.keys(e)
    .filter((k) => {
      return !/^\d/.test(k);
    });
  const values = keys.map((k) => {
    return (e as any)[k];
  });
  return (token: unknown): token is T[keyof T] => {
    return values.includes(token);
  };
};

console.log(isSomeEnum2(E)("A")); //expected false, actual false
console.log(isSomeEnum2(E)(0));   //expected true , actual true

Playground

Answer 5

Answer №3

An alternative approach to @jcalz's solution is to create a simple function that can be easily utilized:

const checkEnumValue = <T extends { [k: string]: string }>(valueToCheck: any, enumType: T): valueToCheck is T[keyof T] =>
    typeof valueToCheck === 'string' && Object.values(enumType).includes(valueToCheck);

As noted by Justin AnyhowStep, this function specifically caters to string enums, hence the

T extends { [k: string]: string }

condition. Here's how it operates:

enum StringEnum {
    A = 'aaa',
    B = 'bbb',
}

enum NumberEnum {
    A,
    B,
}

let example;

if (checkEnumValue(example, StringEnum)) {
    if (example === 'SOMETHING') {
        // Compiler raises an error:
        // This condition will always return 'false' since the types 'StringEnum' and '"SOMETHING"' have no overlap.
    }
}
if (checkEnumValue(example, NumberEnum)) {
    // Compiler raises an error:
    // Argument of type 'typeof NumberEnum' is not assignable to parameter of type '{ [k: string]: string; }'.
    // Property 'A' is incompatible with index signature.
    // Type 'NumberEnum' is not assignable to type 'string'.
}

Answer 6

An alternative approach to @jcalz's solution is to create a simple function that can be easily utilized:

const checkEnumValue = <T extends { [k: string]: string }>(valueToCheck: any, enumType: T): valueToCheck is T[keyof T] =>
    typeof valueToCheck === 'string' && Object.values(enumType).includes(valueToCheck);

As noted by Justin AnyhowStep, this function specifically caters to string enums, hence the

T extends { [k: string]: string }

condition. Here's how it operates:

enum StringEnum {
    A = 'aaa',
    B = 'bbb',
}

enum NumberEnum {
    A,
    B,
}

let example;

if (checkEnumValue(example, StringEnum)) {
    if (example === 'SOMETHING') {
        // Compiler raises an error:
        // This condition will always return 'false' since the types 'StringEnum' and '"SOMETHING"' have no overlap.
    }
}
if (checkEnumValue(example, NumberEnum)) {
    // Compiler raises an error:
    // Argument of type 'typeof NumberEnum' is not assignable to parameter of type '{ [k: string]: string; }'.
    // Property 'A' is incompatible with index signature.
    // Type 'NumberEnum' is not assignable to type 'string'.
}

Answer 7

Answer №4

After searching through npm, I couldn't locate a package that fit my needs. That sparked the idea to develop my own: https://www.npmjs.com/package/is-some-enum. Hopefully, it can be of assistance to someone out there :)

Answer 8

After searching through npm, I couldn't locate a package that fit my needs. That sparked the idea to develop my own: https://www.npmjs.com/package/is-some-enum. Hopefully, it can be of assistance to someone out there :)

Enum-centric type guard

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular Typescript subscription value is null even though the template still receives the data

Finding the perfect pairing: How to align counters with objects?

Understanding and processing HTML strings in typescript

Error: Unable to locate Angular2 Custom Service

Guide on retrieving an ArrayList() from intricate function in Angular

Build upon a class found in an AngularJS 2 library

Improving type definitions in Typescript 2.6 using module augmentation leads to error TS2339: Property '' is not found on type ''

Discover the Hassle-Free Approach to Triggering Angular Material Menu with ViewChild and MatMenuTrigger

When using TypeScript with custom components as children in React, the `type` returned by React.Children is a string representing the function

Using TypeScript to specify data types in the Vue data object

Observable subscription results in a return of undefined

Should an HTML canvas in Angular be classified as a Component or a Service?

Material UI React Autocomplete Component

Retrieving child elements from parent identifiers using Typescript

Splitting the string into individual characters using string.split("").map may cause layout issues on small devices

How can I call a global function in Angular 8?

Limit the elements in an array within a specified range of dates

Prompt user to save changes or cancel before closing modal (if closed by pressing ESC or clicking the backdrop)

Using Angular to include a forward slash "/" in the text input for a date field

Utilize string variables within TypeScript's enumeration feature