Mastering `includes` in TypeScript

In TypeScript, the includes method is a powerful tool that allows developers to check if a certain value exists within an array, string, or other iterable data structures. It simplifies the process of searching for specific elements and is widely used in various programming scenarios. Understanding how to use includes effectively can significantly enhance the efficiency and readability of your TypeScript code. This blog post will explore the fundamental concepts, usage methods, common practices, and best practices of the includes method in TypeScript.

Table of Contents#

  1. Fundamental Concepts of includes
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts of includes#

The includes method is a built - in method in JavaScript, which TypeScript extends. It returns a boolean value indicating whether a specified value exists in the target data structure. For arrays, it checks if an element is present in the array. For strings, it checks if a substring is present in the string.

The basic syntax for arrays is:

array.includes(searchElement: T, fromIndex?: number): boolean;

Here, searchElement is the element you want to search for, and fromIndex (optional) is the index at which to start the search.

The basic syntax for strings is:

string.includes(searchString: string, position?: number): boolean;

Here, searchString is the substring you want to search for, and position (optional) is the position in the string at which to start the search.

Usage Methods#

Using includes with Arrays#

// Example array
const numbers: number[] = [1, 2, 3, 4, 5];
 
// Check if a number exists in the array
const hasThree = numbers.includes(3);
console.log(hasThree); // true
 
// Start the search from a specific index
const hasOneFromIndexTwo = numbers.includes(1, 2);
console.log(hasOneFromIndexTwo); // false

Using includes with Strings#

// Example string
const message: string = "Hello, TypeScript!";
 
// Check if a substring exists in the string
const hasTypeScript = message.includes("TypeScript");
console.log(hasTypeScript); // true
 
// Start the search from a specific position
const hasHelloFromPositionTen = message.includes("Hello", 10);
console.log(hasHelloFromPositionTen); // false

Common Practices#

Filtering Arrays#

You can use includes in combination with the filter method to create a new array that contains only the elements that match a certain condition.

const fruits: string[] = ["apple", "banana", "cherry", "date"];
const filteredFruits = fruits.filter(fruit => fruit.includes("a"));
console.log(filteredFruits); // ['apple', 'banana', 'date']

Validating User Input#

When validating user input, includes can be used to check if the input contains certain characters or words.

function validateEmail(email: string): boolean {
    return email.includes("@");
}
 
const userEmail = "[email protected]";
const isValid = validateEmail(userEmail);
console.log(isValid); // true

Best Practices#

By default, includes is case - sensitive. If you need a case - insensitive search, you can convert both the target and the search value to the same case (either upper or lower).

const text: string = "Hello, World!";
const searchTerm: string = "hello";
 
const isCaseInsensitiveMatch = text.toLowerCase().includes(searchTerm.toLowerCase());
console.log(isCaseInsensitiveMatch); // true

Type Safety in includes Usage#

In TypeScript, it's important to ensure type safety when using includes. Make sure that the type of the search element matches the type of the elements in the array or the type of the substring matches the string type.

const mixedArray: (string | number)[] = ["apple", 1, "banana"];
// Correct way to check for a string element
const hasApple = mixedArray.includes("apple");
console.log(hasApple); // true
 
// Incorrect way (will lead to type - related issues)
// const hasAppleAsNumber = mixedArray.includes(apple as number);

Conclusion#

The includes method in TypeScript is a simple yet powerful tool for searching within arrays and strings. By understanding its fundamental concepts, usage methods, common practices, and best practices, you can write more efficient and readable code. Whether you're filtering arrays, validating user input, or performing other types of searches, includes can be a valuable addition to your TypeScript toolkit.

References#

2025-10