Transform a Typescript type that includes multiple string options into an array containing those options as values

Question

Transform a Typescript type that includes multiple string options into an array containing those options as values

Sending Status:

const statusArray = ["confirmed", "pending", "canceled"]

Purpose: While the type is automatically generated, I also require it to be in array form.

typescript

Answer 1

Answer №1

Extracting a runtime value from a TypeScript type is not feasible (but the reverse is possible). A workaround is to set up alerts in case you overlook including a member of status. Here are 3 strategies I employ, each with its own advantages and drawbacks.

Approach 1: leveraging permutations. This method works well for small status types with 2-5 members but becomes sluggish with larger unions. However, it's straightforward and only requires an explicit type annotation, while also preventing duplicates.

type Permutations<T extends string> = [T] extends [never] ? [] : {
    [K in T]: [K, ...Permutations<Exclude<T, K>>];
}[T];

type StatusArray = Permutations<status>;

const statusArray: StatusArray = ["confirmed", "pending", "canceled"];

Approach 2: using a function. This approach accommodates all union sizes and provides detailed error messages. The downside is the need for a cumbersome function call.

function createStatusArray<T extends status>(array: (status extends T ? T : { error: `Missing '${Exclude<status, T>}' from status` })[]) { return array; }

const statusArray = createStatusArray(["confirmed", "pending", "canceled"]);

Approach 3: employing an assertion. Similar to Method 2, this method handles all union sizes but might lack clarity in error messaging. Nevertheless, it triggers an error if not all status members are included, although it necessitates an additional variable declaration for the mutable array type.

const _statusArray = ["confirmed", "pending", "canceled"] as const;

type AssertStatusArray<T extends never = Exclude<status, typeof _statusArray[number]>> = T;

const statusArray = [..._statusArray];

Playground (with all 3 methods)

Answer 2

Extracting a runtime value from a TypeScript type is not feasible (but the reverse is possible). A workaround is to set up alerts in case you overlook including a member of status. Here are 3 strategies I employ, each with its own advantages and drawbacks.

Approach 1: leveraging permutations. This method works well for small status types with 2-5 members but becomes sluggish with larger unions. However, it's straightforward and only requires an explicit type annotation, while also preventing duplicates.

type Permutations<T extends string> = [T] extends [never] ? [] : {
    [K in T]: [K, ...Permutations<Exclude<T, K>>];
}[T];

type StatusArray = Permutations<status>;

const statusArray: StatusArray = ["confirmed", "pending", "canceled"];

Approach 2: using a function. This approach accommodates all union sizes and provides detailed error messages. The downside is the need for a cumbersome function call.

function createStatusArray<T extends status>(array: (status extends T ? T : { error: `Missing '${Exclude<status, T>}' from status` })[]) { return array; }

const statusArray = createStatusArray(["confirmed", "pending", "canceled"]);

Approach 3: employing an assertion. Similar to Method 2, this method handles all union sizes but might lack clarity in error messaging. Nevertheless, it triggers an error if not all status members are included, although it necessitates an additional variable declaration for the mutable array type.

const _statusArray = ["confirmed", "pending", "canceled"] as const;

type AssertStatusArray<T extends never = Exclude<status, typeof _statusArray[number]>> = T;

const statusArray = [..._statusArray];

Playground (with all 3 methods)

Answer 3

Answer №2

As mentioned by another user, the approach you are attempting is not feasible in this case. However, you can achieve the desired outcome by starting with the concrete array and using as const as shown below:

const statusArray = ["confirmed", "pending", "canceled"] as const;

type StatusType = typeof statusArray[number];

const myStatus: StatusType = "confirmed";

const myOtherStatus: StatusType = "non_status";
// Type '"non_status"' is not assignable to type '"confirmed" | "pending" | "canceled"'.(2322)

View example on TypeScript Playground

Answer 4

As mentioned by another user, the approach you are attempting is not feasible in this case. However, you can achieve the desired outcome by starting with the concrete array and using as const as shown below:

const statusArray = ["confirmed", "pending", "canceled"] as const;

type StatusType = typeof statusArray[number];

const myStatus: StatusType = "confirmed";

const myOtherStatus: StatusType = "non_status";
// Type '"non_status"' is not assignable to type '"confirmed" | "pending" | "canceled"'.(2322)

View example on TypeScript Playground

Answer 5

Answer №3

If you want to ensure that the statusArray contains all elements, one approach is to create a helper function for this validation:

function checkAllStatusPresent<Type>() {
  return function <T extends Type[]>(
    ...types: [Type] extends [T[number]] ? T : never
  ) {
    return types
  }
}

const checkAllStatusPresent = checkAllAppear<status>()

const statusArray = checkAllStatusPresent("confirmed", "pending", "canceled")

Although these functions do not perform any operation, if certain elements are missing in the arguments (e.g.

checkAllStatusPresent("pending", "canceled")

), it will result in a type error with the argument type becoming never.

Answer 6

If you want to ensure that the statusArray contains all elements, one approach is to create a helper function for this validation:

function checkAllStatusPresent<Type>() {
  return function <T extends Type[]>(
    ...types: [Type] extends [T[number]] ? T : never
  ) {
    return types
  }
}

const checkAllStatusPresent = checkAllAppear<status>()

const statusArray = checkAllStatusPresent("confirmed", "pending", "canceled")

Although these functions do not perform any operation, if certain elements are missing in the arguments (e.g.

checkAllStatusPresent("pending", "canceled")

), it will result in a type error with the argument type becoming never.

Transform a Typescript type that includes multiple string options into an array containing those options as values

Answer №1

Answer №2

Answer №3

Similar questions

`Can you bind ngModel values to make select options searchable?`

Tips for preventing the need to convert dates to strings when receiving an object from a web API

It is not possible for the root segment to contain matrix parameters in Ionic 4

An Axios error message indicates ERR_NETWORK and ERR_EMPTY_RESPONSE

405 we're sorry, but the POST method is not allowed on this page. This page does

`Running ng serve will result in the creation of a 'dist' folder within each app sub

What is the correct way to invoke a static TypeScript class function in JavaScript?

Issue with Material Sort functionality when null objects are present

Switch between classes when hovering over / exiting ngFor elements

In TypeScript, a generic function with an index constraint

The 'in' operator is unable to find 'colour' within true (function return type)

What could be causing the issue of my application not being able to operate on the specified port on Heroku?

Even when I try to access the properties of the arguments object, it remains empty and has a zero

What is the best way to filter out specific data fields from console.log in JavaScript?

Integrating modules in Angular 2

Cloud Formation from CDK doesn't pause for addDependency to finish

When implementing useReducer with TypeScript, the error "Argument of type '(type, action) => { state: (...}' is not assignable to parameter of type 'ReducerWithoutAction<any>'" may occur

I'm encountering difficulties utilizing ternary operators in TypeScript

What is the process for choosing a specific id from a JSON structure?

Combine values from 2 distinct arrays nested within an array of objects and present them as a unified array