How to usean Array of Strings in Typescript

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' ]

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:

Table of Content

  • Using an Array of Strings
  • Using a Mapped Type
  • Using Conditional Types:
  • Using Template Literal Types
  • Using Type Aliases with Utility Types

Similar Reads

Approach 1: Using an Array of Strings

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

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....

Approach 3: Using Conditional Types:

In TypeScript, using conditional types, a generic type `StringUnion` 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....

Approach 4: Using Template Literal Types

In this approach, we use template literal types to concatenate string literals into a union type....

Approach 5: Using Type Aliases with Utility Types

Using type aliases with utility types like Extract allows defining a union type constrained to valid strings. For example, `type MyUnion = Extract<‘a’ | ‘b’ | ‘c’, string>` ensures `MyUnion` only includes `’a’`, `’b’`, or `’c’`, enhancing type correctness and safety....