In this tutorial, I will explain how to effectively use the filter()
method to filter arrays in TypeScript. Filtering arrays is very common in programming, and there are different methods to filter arrays in TypeScript. I will show you different ways to filter arrays of various types, including arrays of objects, and ensure that TypeScript infers the values correctly. By the end of this tutorial, you’ll have a solid understanding of how to filter arrays in TypeScript.
The filter() Method in TypeScript
The filter()
method in TypeScript allows you to create a new array from an existing array by selecting elements based on a provided condition. It iterates over each element of the array and applies the specified condition. Elements that satisfy the condition are included in the resulting array, while those that don’t are filtered out.
Here’s a simple example to illustrate the usage of filter()
:
const numbers: number[] = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
In this example, we have an array of numbers called numbers
. We use the filter()
method to create a new array called evenNumbers
that contains only the even numbers from the original array. The arrow function num => num % 2 === 0
is the condition that checks if a number is even.
You can also see the exact output in the screenshot below:

Filter Arrays of Objects in TypeScript
Let’s consider an example where we have an array of user objects, and we want to filter users based on their age.
interface User {
name: string;
age: number;
country: string;
}
const users: User[] = [
{ name: "John Doe", age: 25, country: "USA" },
{ name: "Jane Smith", age: 30, country: "USA" },
{ name: "Mike Johnson", age: 20, country: "USA" },
];
const adultUsers = users.filter(user => user.age >= 21);
console.log(adultUsers);
/*
Output:
[
{ name: "John Doe", age: 25, country: "USA" },
{ name: "Jane Smith", age: 30, country: "USA" }
]
*/
In this example, we define an interface User
that represents a user object with properties like name
, age
, and country
. We have an array of users
that contains multiple user objects.
To filter adult users (age 21 or above), we use the filter()
method with the condition user => user.age >= 21
. This creates a new array called adultUsers
that only includes users who meet the age criteria.
Check out TypeScript arrays tutorials.
Filter Arrays of Different Types in TypeScript
TypeScript’s type system allows us to work with arrays containing elements of different types. When filtering such arrays, we need to ensure that TypeScript infers the values correctly.
Consider the following example:
type Data = string | number;
const dataArray: Data[] = [1, "hello", 2, "world", 3];
const stringData = dataArray.filter((item): item is string => typeof item === "string");
console.log(stringData); // Output: ["hello", "world"]
In this example, we define a type alias Data
that represents either a string or a number. We have an array called dataArray
that contains elements of both types.
To filter only the string elements from dataArray
, we use the filter()
method with a type guard (item): item is string => typeof item === "string"
. This type guard tells TypeScript that the item
parameter is of type string
if the condition typeof item === "string"
is true.
By using the type guard, TypeScript correctly infers that the resulting array stringData
contains only string elements.
Here is the exact output in the screenshot below:

Read How to Sort Arrays in TypeScript?
Filter Arrays Based on Multiple Conditions in TypeScript
Sometimes, you may need to filter an array based on multiple conditions in TypeScript. You can achieve this by combining multiple conditions using logical operators like &&
(AND) or ||
(OR).
Let me show you an example.
interface Employee {
name: string;
age: number;
department: string;
}
const employees: Employee[] = [
{ name: "Alice Johnson", age: 35, department: "Marketing" },
{ name: "Bob Smith", age: 28, department: "Engineering" },
{ name: "Charlie Brown", age: 42, department: "Sales" },
{ name: "Diana Wilson", age: 31, department: "Engineering" },
];
const seniorEngineers = employees.filter(employee => employee.age > 30 && employee.department === "Engineering");
console.log(seniorEngineers);
/*
Output:
[
{ name: "Diana Wilson", age: 31, department: "Engineering" }
]
*/
In this example, we have an array of employees
with properties like name
, age
, and department
. We want to filter senior engineers who are above 30 years old and belong to the “Engineering” department.
We use the filter()
method with the condition employee => employee.age > 30 && employee.department === "Engineering"
. This condition combines two criteria using the &&
operator, ensuring that only employees satisfying both conditions are included in the resulting array.
Filter TypeScript Arrays Using Custom Functions
For more complex filtering logic, you can define custom functions and use them as the condition in the filter()
method.
Let me show you an example.
interface Product {
name: string;
price: number;
category: string;
}
const products: Product[] = [
{ name: "iPhone 13", price: 999, category: "Electronics" },
{ name: "Samsung Galaxy S21", price: 799, category: "Electronics" },
{ name: "Nike Air Max", price: 129, category: "Footwear" },
{ name: "Adidas Ultraboost", price: 180, category: "Footwear" },
];
function isExpensiveElectronic(product: Product): boolean {
return product.category === "Electronics" && product.price > 500;
}
const expensiveElectronics = products.filter(isExpensiveElectronic);
console.log(expensiveElectronics);
/*
Output:
[
{ name: "iPhone 13", price: 999, category: "Electronics" },
{ name: "Samsung Galaxy S21", price: 799, category: "Electronics" }
]
*/
In this example, we have an array of products
with properties like name
, price
, and category
. We define a custom function called isExpensiveElectronic
that takes a product
object as input and returns true
if the product belongs to the “Electronics” category and has a price greater than 500.
We pass the isExpensiveElectronic
function as the condition to the filter()
method, which filters the products
array and creates a new array called expensiveElectronics
containing only the expensive electronic products.
Conclusion
In this tutorial, I explained how to filter arrays in TypeScript using the filter() method. Also, I have show various examples on filtering arrays such as filtering arrays of objects, filtering arrays of different types, and using advanced filtering techniques like multiple conditions and custom functions.
Now I hope you have a good understanding of how to filter arrays in TypeScript.
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.