TypeScript: Typing Dynamic Objects and Subsets with Generics

How to use keyof, in, and extends keywords to type dynamic functions in TypeScript

TypeScript gained popularity over 2020 and is now in the upper bracket of the programming salary range. If you are a JavaScript developer you have most likely been exposed to TypeScript in some project you have worked on.

This article, along with others surrounding it, will introduce the reader to advanced TypeScript concepts by explaining them from the ground up with a typical use case — working with objects and subsets of those objects in a dynamic way such that we do not know the exact structure of these objects, but want to define them without compromise.

Being able to define generic types that successfully type objects without compromises is key when working with API responses and event driven applications, whereby the data you receive is filtered and extracted into various components for various functions to handle.

This article focuses on this use case. Instead of working in live environments, we will keep things straightforward by working with simple functions designed to extract properties from objects and return a smaller object of those properties.