Advanced TypeScript- Generic Search, Sorting, and Filtering.png

educative-advanced-typescript-generic-search-sorting-filtering.tar.gz

lesson-3

TypeScript’s generics are a powerful tool that enables developers to ensure their code is flexible and reusable. Using generics can help developers manage exactly what types are used in functions and components around the application.

In this course, we’ll first get an overview of TypeScript generics and create generic search and sort functions. Next, we’ll create a React component for searching that would leverage our generic search function. Then, we’ll create a generic function and a React component for sorting and filtering, respectively. Finally, we’ll bring all these functionalities together to create one component that can manage searching, sorting, and filtering of any data passed to it.

By the end of this course, you'll know how to write generic TypeScript functions and craft React components that use TypeScript generics. You’ll also be able to deploy concise solutions in both business logic and user interface senses for searching, sorting, and filtering data on client side in applications.

Building User Interfaces and Functions with TypeScript and React

## Additional filtering complexities

The behaviors for generic filtering can be a bit more complex than searching or sorting. Let’s review how searching and sorting works on a technical level:

- **Searching**: Comparing a query string to properties of type `string`.
- **Sorting**: Organizing the data either in ascending or descending order on a given property.

Filtering is a bit more complex than either of these two because we can combine multiple properties and filter with activate or deactivate combinations. The `IWidget` data type is a good example to use here. Maybe we want to filter for all the widgets in which `isSpecialCard`, `title` and `description` are evaluated as `truthy`. We must simultaneously filter with three different properties to accomplish this.


# Additional filtering complexities

The behaviors for generic filtering can be a bit more complex than searching or sorting. Let’s review how searching and sorting works on a technical level:

- **Searching**: Comparing a query string to properties of type `string`.
- **Sorting**: Organizing the data either in ascending or descending order on a given property.

Filtering is a bit more complex than either of these two because we can combine multiple properties and filter with activate or deactivate combinations. The `IWidget` data type is a good example to use here. Maybe we want to filter for all the widgets in which `isSpecialCard`, `title` and `description` are evaluated as `truthy`. We must simultaneously filter with three different properties to accomplish this.


Craft a React component that renders toggleable checkboxes, which are useful for filtering.


Building a React Component That Filters

Craft a React component that renders toggleable checkboxes, which are useful for filtering.

Introduction

TypeScript Generics Introduction

Creating Mock Data for the Application

Building a Generic Search Function and UI Component

Building a Generic Sort Function and UI Component

Building a Generic Filter Function and UI Component

Generics in TypeScript

Organizing Everything into a Single Generic Component

Create a Content Management System (CMS)

Course Review and Final Comments

Appendix

Building a React Component That Filters

Additional filtering complexities