Starting with basic examples using generics to a full-fledged interactive UI. Featuring TypeScript and React.

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


Welcome to **Advanced TypeScript: Generic Search, Sorting, and Filtering**! This course is going to be all about using generics in TypeScript. What  _are_ generics, exactly? Well, you already may have heard that when we write software, it’s always an advantage to make our code reusable and more flexible. With a **#key# statically typed language: Languages where type safety checks are conducted before runtime. #key#** like TypeScript, we can also make the usage of our data types throughout the application more flexible!





In this course, we’re going to build out three key functionalities leveraging the power of generics in TypeScript:

1. A generic search function
2. A generic sort function
3. A generic filter function

For each function we build, we’ll also see how we can make generic React components, where various UI elements can be created and rendered based on nothing more than the typing of our data!
This course is geared more towards intermediate to advanced TypeScript developers. Generics are a pretty advanced component of the TypeScript language. We don’t go over the basics of TypeScript explicitly in the course, for example, what the notion of interfaces or enums are. We will spend two lessons going over the basics of generics themselves, however, before starting with our real in-app examples.



Get a high-level overview of what this course is all about.

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

Introduction

Welcome to the course!