How to Create Union of Generic Types that Extend String in TypeScript ?

Creating a union of generic types that extend string in TypeScript involves defining a type that accepts only string literals. This allows for the creation of a type that represents a specific set of strings, providing type safety and flexibility in code.

These are the following ways to do that:

Approach 1: Using an Array of Strings

In this approach, we are using an array of strings, and define a generic type `StringUnion<T extends string>` where `T` represents the string literals. This approach creates a union type from the elements of the array.

Example: We Define a generic ‘StringUnion` type accepting string literals. Creates an array of specific strings, then logs each element in a function taking the same type as an argument.

Javascript

type StringUnion<T extends string> = T[];

type MyStringType = "HTML" | "CSS" | "Javascript";
const myStringArray: StringUnion<MyStringType> = 
    ["HTML", "CSS", "Javascript"];

function resultFunction(language: StringUnion<MyStringType>): void {
    language.forEach(languageItem => console.log(languageItem));
}
resultFunction(myStringArray);

Output:

[ 'HTML', 'CSS', 'Javascript' ]
[ 'HTML', 'CSS', 'Javascript' ]
[ 'HTML', 'CSS', 'Javascript' ]

Approach 2: Using a Mapped Type

In this approach we are using a mapped type, define `StringUnion` accepting string literals. Map over each literal, assigning it to itself, resulting in a union of string literals. Use this type to create an array, enabling a union of strings.

Example: This example shows that it defines a `StringUnion` type mapping over string literals. Assigns a specific string to a variable. Logs the variable in a function taking the same type as an argument.

Javascript

type StringUnion<T extends string> = { [K in T]: K }[T];

type MyStringType = "HTML" | "CSS" | "Javascript";
const myString: StringUnion<MyStringType> = "Javascript";

function myResult(language: StringUnion<MyStringType>): void {
    console.log(language);
}
myResult(myString);

Output:

Javascript

Approach 3: Using Conditional Types:

In TypeScript, using conditional types, a generic type `StringUnion<T>` can be defined to ensure that `T` extends `string`, resulting in a union type of string literals. It checks if `T` extends any type, mapping it to `string`, or else `never`, thus forming the union.

Example: In this example we defines a StringUnion type, which resolves to string literals from a given type. It ensures type safety by restricting assignments to only the specified literals.

JavaScript

type StringUnion<T extends string> = T extends any ? T : never;

// Example usage:
type MyStringType = "HTML" | "CSS" | "JavaScript";

// StringUnion<MyStringType> will resolve to "HTML" | "CSS" | "JavaScript"
let myString: StringUnion<MyStringType>;

myString = "HTML"; // Valid
myString = "CSS"; // Valid
myString = "JavaScript"; // Valid
// myString = "TypeScript"; // Error: 
//"TypeScript" is not assignable to type "HTML" | "CSS" | "JavaScript"

console.log(myString);

Output:

JavaScript