Transform a standard array of strings into a union string literal in TypeScript

Question

Transform a standard array of strings into a union string literal in TypeScript

I'm currently developing a module where users can specify a list of "allowable types" to be utilized in other functions. However, I'm encountering challenges implementing this feature effectively with TypeScript:

function initializeModule<T extends ArrayLike<string>>(types:T) {
  type CustomType = T[number];
  
  function performAction(type:CustomType) {
    console.log(type, types);
  }
  
  return { performAction, types };
}

// It is desired for this to raise an error: 'potato' is not included in ['hello', 'bye']
initializeModule(['hello', 'bye']).performAction('potato');

I'm aware of the technique that converts an array of strings into a const to create a string literal union type:

const types = ['hello', 'bye'] as const
type CustomType = typeof types[number]

but I am unsure how to apply this concept to my situation, where the array is generic

I have found a solution that works, albeit it feels unconventional: I leverage keyof to transform T into a map of <eventType, any>.

function initializeModule<T>(types:(keyof T)[]) {
  type CustomType = keyof T;

  function performAction(type:CustomType) {
    console.log(type, types);
  }
  
  return { performAction, types };
}

// As expected, I receive the following error. This is perfect!
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.
initializeModule(['hello', 'bye']).performAction('potato');

Is there a cleaner way to achieve the same outcome without relying on the unconventional keyof approach and directly creating a union of string literals from the array?

typescript

Answer 1

Answer №1

Your code faces an issue where TypeScript typically assumes that an array literal like ['hello', 'bye'] is of type string[]. This assumption is usually what most people want, as demonstrated by this snippet:

const arr = ['hello', 'bye'];
//    ^? const arr: string[]
arr.push('howdy'); // acceptable

It would be inconvenient if every time you declared a string array, the compiler insisted on only allowing the exact literal values in their exact sequence. However, there are scenarios when you do need the compiler to impose such constraints, which seems to be the case for you (at least concerning the literal values).

As you pointed out, one solution is to utilize a const assertion (avoiding the term "cast") to achieve the desired behavior:

const arr = ['hello', 'bye'] as const;
// const arr: readonly ["hello", "bye"]
arr.push("howdy"); // error

You can also apply this technique with your version of initSomething():

initSomething(['hello', 'bye'] as const).doTheThing('potato'); // error
// -----------------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

However, it might be cumbersome to require the caller to remember to use the assertion.

An alternative is to introduce a const type parameter within your function, such as:

function initSomething<const EventTypes extends ArrayLike<string>>(eventTypes: EventTypes) {
    //                 ^^^^^
    type EventType = EventTypes[number];

    function doTheThing(type: EventType) {
        console.log(type, eventTypes);
    }

    return { doTheThing, eventTypes };
}

This instructs the compiler to deduce EventTypes similar to how it would with as const specified by the caller. This method proves to work as expected:

initSomething(['hello', 'bye']).doTheThing('potato');
// --------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

Still, in this particular example, the complexity may not be necessary. It appears that the focus lies more on the EventType rather than the EventTypes type parameter. In such cases, making the function generic directly in EventType might suffice:

function initSomething<EventType extends string>(eventTypes: ArrayLike<EventType>) {
    function doTheThing(type: EventType) {
        console.log(type, eventTypes);
    }
    return { doTheThing, eventTypes };
}
initSomething(['hello', 'bye']).doTheThing('potato');
// --------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

This approach works because when a type parameter is restricted to string, the compiler automatically maintains its string literal type (or union of such types). Essentially, extends string gives the compiler a reference point to retaining literal types.

Playground link to code

Answer 2

Your code faces an issue where TypeScript typically assumes that an array literal like ['hello', 'bye'] is of type string[]. This assumption is usually what most people want, as demonstrated by this snippet:

const arr = ['hello', 'bye'];
//    ^? const arr: string[]
arr.push('howdy'); // acceptable

It would be inconvenient if every time you declared a string array, the compiler insisted on only allowing the exact literal values in their exact sequence. However, there are scenarios when you do need the compiler to impose such constraints, which seems to be the case for you (at least concerning the literal values).

As you pointed out, one solution is to utilize a const assertion (avoiding the term "cast") to achieve the desired behavior:

const arr = ['hello', 'bye'] as const;
// const arr: readonly ["hello", "bye"]
arr.push("howdy"); // error

You can also apply this technique with your version of initSomething():

initSomething(['hello', 'bye'] as const).doTheThing('potato'); // error
// -----------------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

However, it might be cumbersome to require the caller to remember to use the assertion.

An alternative is to introduce a const type parameter within your function, such as:

function initSomething<const EventTypes extends ArrayLike<string>>(eventTypes: EventTypes) {
    //                 ^^^^^
    type EventType = EventTypes[number];

    function doTheThing(type: EventType) {
        console.log(type, eventTypes);
    }

    return { doTheThing, eventTypes };
}

This instructs the compiler to deduce EventTypes similar to how it would with as const specified by the caller. This method proves to work as expected:

initSomething(['hello', 'bye']).doTheThing('potato');
// --------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

Still, in this particular example, the complexity may not be necessary. It appears that the focus lies more on the EventType rather than the EventTypes type parameter. In such cases, making the function generic directly in EventType might suffice:

function initSomething<EventType extends string>(eventTypes: ArrayLike<EventType>) {
    function doTheThing(type: EventType) {
        console.log(type, eventTypes);
    }
    return { doTheThing, eventTypes };
}
initSomething(['hello', 'bye']).doTheThing('potato');
// --------------------------------------> ~~~~~~~~
// Argument of type '"potato"' is not assignable to parameter of type '"hello" | "bye"'.

This approach works because when a type parameter is restricted to string, the compiler automatically maintains its string literal type (or union of such types). Essentially, extends string gives the compiler a reference point to retaining literal types.

Playground link to code

Transform a standard array of strings into a union string literal in TypeScript

Answer №1

Similar questions

How can I determine the existence of an S3 bucket and, if it doesn't exist, create it using TypeScript CDK?

Using the watch flag in TypeScript across multiple projects - A comprehensive guide

What steps are involved in generating a Typescript module definition for a directory containing a babel-plugin-content-transformer?

How can I incorporate dynamic fields into a Typescript type/interface?

Ionic - Smooth horizontal tab scrolling for sorted categories

Can you provide guidance on how to specifically specify the type for the generics in this TypeScript function?

Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

Using a nodejs module is causing an error in my code

The resolution of Angular 8 resolver remains unresolved

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

Circular referencing in Angular models causes interdependence and can lead to dependency

Display Module within Component using Angular 5

Angular: How can the dropdown arrow in 'ng-select' be eliminated?

What is the best way to simulate an overloaded method in jest?

The data type 'unknown' cannot be assigned to the type 'any[]', 'Iterable<any>', or (Iterable<any> & any[])

What is the best approach to develop a React Component Library adorned with Tailwind CSS and enable the main project to easily customize its theme settings?

The continuous re-rendering is being triggered by the Async/Await Function

Problem encountered in a simple Jest unit test - Unexpected identifier: _Object$defineProperty from babel-runtime

The "isActive" value does not share any properties with the type 'Properties<string | number, string & {}>'. This issue was encountered while using React with TypeScript

How can an additional value be sent to the form validation method?