Check if a String is in Union type in TypeScript

avatar
Borislav Hadzhiev

Last updated: Feb 27, 2024
2 min

banner

# Check if a String is in Union type in TypeScript

To check if a string is in a union type:

  1. Create a reusable function that takes a string as a parameter.
  2. Add the values of the union type of an array.
  3. Use the includes() method to check if the string is contained in the array.
index.ts
type Sizes = 'small' | 'medium' | 'large'; function isOfType(value: string): value is Sizes { return ['small', 'medium', 'large'].includes(value); } console.log(isOfType('small')); // ๐Ÿ‘‰๏ธ true console.log(isOfType('medium')); // ๐Ÿ‘‰๏ธ true console.log(isOfType('test')); // ๐Ÿ‘‰๏ธ false

check if string is in union type

The code for this article is available on GitHub

We created a reusable function that takes a string as a parameter and returns true if the string is a part of the union type and false otherwise.

The Array.includes() method returns true if the supplied value is contained in the array and false otherwise.

The value is Sizes syntax is a type predicate.

A predicate takes the form of parameter is Type, where parameter is the name of a parameter from the function signature.

This allows TypeScript to narrow down the variable to a specific type if it is compatible with the original type.

# Using the function in an if statement

Let's look at how this works in an if statement.

index.ts
type Sizes = 'small' | 'medium' | 'large'; function isOfType(value: string): value is Sizes { return ['small', 'medium', 'large'].includes(value); } const sm = 'small'; if (isOfType(sm)) { // ๐Ÿ‘‡๏ธ const sm: "small" console.log(sm); } else { // ๐Ÿ‘‡๏ธ const sm: never console.log(sm); }

using function in if statement

The code for this article is available on GitHub

Notice that in the if block, the sm variable is correctly typed and it's typed as never in the else block.

Had we not used a type predicate, TypeScript would not be able to differentiate between the type of the variable in the if and else blocks.

index.ts
type Sizes = 'small' | 'medium' | 'large'; // ๐Ÿ‘‡๏ธ removed type predicate function isOfType(value: string) { return ['small', 'medium', 'large'].includes(value); } const sm = 'small'; if (isOfType(sm)) { // ๐Ÿ‘‡๏ธ const sm: "small" console.log(sm); } else { // ๐Ÿ‘‡๏ธ const sm: "small" console.log(sm); }

Now the type of the sm variable is the same in the if and else blocks.

If I add the type predicate back and call the function with a string that is not in the union, the type of the sm variable in the if block will be never.

index.ts
type Sizes = 'small' | 'medium' | 'large'; function isOfType(value: string): value is Sizes { return ['small', 'medium', 'large'].includes(value); } const sm = 'TEST'; if (isOfType(sm)) { // ๐Ÿ‘‡๏ธ const sm: never console.log(sm); } else { // ๐Ÿ‘‡๏ธ const sm: "TEST" console.log(sm); }

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev