Converting string literals to an array of enums

Question

Converting string literals to an array of enums

I have a scenario where I am getting the following data in an API response:

{ "roles": [ "ADMIN", "USER" ] }

The response always includes an array of roles (USER, PRESENTER, ORGANIZER, and ADMIN).

I am looking to transform this into a valid TypeScript array (Role[]), where the type Role is defined as:

export type Role = 'USER' | 'PRESENTER' | 'ORGANIZER' | 'ADMIN'

Do you have any suggestions on how to achieve this?

javascript json typescript json-deserialization

Answer 1

Answer №1

Your Position data type is not classified as an enum, but rather a string type with restricted values.

To satisfy TypeScript, you can simply cast the output as a Position[], assuming the input data is always valid!

const info: {positions: Position[]} = JSON.parse('{"positions": ["MANAGER", "EMPLOYEE"]}');
info.positions // TypeScript will recognize it as a Position[]

Answer 2

Your Position data type is not classified as an enum, but rather a string type with restricted values.

To satisfy TypeScript, you can simply cast the output as a Position[], assuming the input data is always valid!

const info: {positions: Position[]} = JSON.parse('{"positions": ["MANAGER", "EMPLOYEE"]}');
info.positions // TypeScript will recognize it as a Position[]

Answer 3

Answer №2

If you wish to convert it to your union type, follow this method:

const apiRoleArray = ["ADMIN", "USER"];
const realRoleArray: Role[] = <Role[]>apiRoleArray;

However, it is advisable to validate its contents rather than solely relying on the API. :-) Utilizing the insight provided in this question's responses, you can define the type by referencing the keys of an object instead of explicitly declaring it (refer to the accepted solution there for clarification):

const roleStrings = {
    USER: "",
    PRESENTER: "",
    ORGANIZER: "",
    ADMIN: ""
};

export type Role = keyof typeof roleStrings;

Establish a validation function as follows:

const isRole = (s: string): s is Role => {
    return roleStrings.hasOwnProperty(s);
};

Then create a robust conversion function, such as:

const rawToRoleArray = (rawArray: string[]): Role[] => {
    return rawArray.map(s => {
        if (!isRole(s)) {
            throw new Error("Invalid Role: " + s);
        }
        return <Role>s;
    });
};

(you can combine these functions if needed)

Finally, put them into action:

// Valid
const realRoleArray: Role[] = rawToRoleArray(["ADMIN", "USER"]); 
console.log(realRoleArray);
// Invalid
const realRoleArray2: Role[] = rawToRoleArray(["ADMIN", "FOO"]); 
console.log(realRoleArray2);

Try it out in the playground | Test it on jsFiddle

Answer 4

If you wish to convert it to your union type, follow this method:

const apiRoleArray = ["ADMIN", "USER"];
const realRoleArray: Role[] = <Role[]>apiRoleArray;

However, it is advisable to validate its contents rather than solely relying on the API. :-) Utilizing the insight provided in this question's responses, you can define the type by referencing the keys of an object instead of explicitly declaring it (refer to the accepted solution there for clarification):

const roleStrings = {
    USER: "",
    PRESENTER: "",
    ORGANIZER: "",
    ADMIN: ""
};

export type Role = keyof typeof roleStrings;

Establish a validation function as follows:

const isRole = (s: string): s is Role => {
    return roleStrings.hasOwnProperty(s);
};

Then create a robust conversion function, such as:

const rawToRoleArray = (rawArray: string[]): Role[] => {
    return rawArray.map(s => {
        if (!isRole(s)) {
            throw new Error("Invalid Role: " + s);
        }
        return <Role>s;
    });
};

(you can combine these functions if needed)

Finally, put them into action:

// Valid
const realRoleArray: Role[] = rawToRoleArray(["ADMIN", "USER"]); 
console.log(realRoleArray);
// Invalid
const realRoleArray2: Role[] = rawToRoleArray(["ADMIN", "FOO"]); 
console.log(realRoleArray2);

Try it out in the playground | Test it on jsFiddle

Answer 5

Answer №3

It seems like that is your desired course of action.

enum RoleEnum {
  USER,
  PRESENTER,
  ORGANIZER,
  ADMIN
}

const parseEnum = (name: String): RoleEnum  => RoleEnum[`${name}`]

const parsed: RoleEnum[] = [ 'ADMIN', 'USER' ].map(parseEnum)

console.log(parsed)

Answer 6

It seems like that is your desired course of action.

enum RoleEnum {
  USER,
  PRESENTER,
  ORGANIZER,
  ADMIN
}

const parseEnum = (name: String): RoleEnum  => RoleEnum[`${name}`]

const parsed: RoleEnum[] = [ 'ADMIN', 'USER' ].map(parseEnum)

console.log(parsed)

Converting string literals to an array of enums

Answer №1

Answer №2

Answer №3

Similar questions

Leverage TypeScript to access custom component properties and URL parameters from react-router-dom

Retrieving JSON data through HttpClient in Angular 7

Solution for repairing the display location button on Android within a React Native Map

Working with JSON object values in a Spring Boot application

Exploring the world of reactive programming in JavaScript by transforming traditional AJAX calls into Bacon.js streams while incorporating

Will the bootstrap carousel continue running in the background even if I hide it?

Converting JSON data to a different format using SwiftJSON

Validation of Regular Expressions in Javascript

Guide on how to bundle a TypeScript project into a single JavaScript file for smooth browser integration

Issue with ng-multiselect-dropdown where clearing selected items programmatically does not visually work as expected

Understanding the proper way to enclose JSX components and exhibit JSON based on user input

What could be causing Vue to not fully parse the JSON object that I am sending from PHP as a prop?

The Nodejs function exits before the internal function finishes executing

Using Javascript to dynamically add form fields based on the selection made in a combo box

What is the best way to convert JSON data from PHP into a ListView on an Android app?

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

The JSON response is being overridden by a catch-all URL and ends up being displayed as a 404 error page

Can you explain the distinction between JSON syntax and object assignment in programming?

Analyze the value of key.name against a string within a JSON reply

The error message "404 Not found" is returned when attempting to retrieve a Google spreadsheet