{"id":14705,"date":"2023-05-17T00:00:00","date_gmt":"2023-05-15T19:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/cse\/?p=14705"},"modified":"2024-07-18T11:50:48","modified_gmt":"2024-07-18T18:50:48","slug":"getting-to-know-typescript-generics","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/ise\/getting-to-know-typescript-generics\/","title":{"rendered":"Getting to Know TypeScript Generics"},"content":{"rendered":"

Introduction<\/h2>\n

DRY. Do Not Repeat Yourself. DRY is an acronym that became synonymous with engineering fundamentals. Using DRY, we ensure that we don’t find ourselves with the same lines of code repeated over and over in a repository; indeed when the inevitable need arises to add a single tweak, we come across the predicament of having to go back to each-and-every-single-repeated piece of code to update each individually.<\/p>\n

Repeating code was a challenge we quickly came to face during an engagement with a customer where we needed to implement card component selection functionality using React Hooks<\/a>. The reason we had to repeat ourselves, was that in multiple instances we needed to implement the card selection state to handle multiple data types (string<\/code>, number<\/code>, etc.). While in the midst of the ctrl+c, ctrl+p<\/code> routine, we decided to refactor our components to be more maintainable and properly “reusable” to embrace React’s full capability of custom hooks, while still allowing us to keep our type safety in the realm of TypeScript.<\/code><\/p>\n

Thus, we had the opportunity to leverage TypeScript Generics<\/code> as a way to keep DRY, increase maintainability, and keep in the recommended pattern of React Reusable components.<\/p>\n

Below, this post will take you through examples of where TypeScript Generics<\/code> can help DRY up your code, while demonstrating both a generic TypeScript function sample and a React Custom Hook example that follows a closer approach that was used during our customer engagement.<\/p>\n

TypeScript Generic Overview<\/h2>\n

A TypeScript generic is a way of creating reusable components that can work with different types of data rather than one. It allows you to specify a placeholder type that represents the actual type that will be used when the code is executed. For example, you can define an array as Array<T><\/code> where T is any type you want.<\/p>\n

TLDR Sample<\/h2>\n

If you prefer to play around with an example, refer to this Code Sandbox React Hook Example<\/a><\/p>\n

Problem Example<\/h2>\n

Let’s say that we have two functions that virtually do the same thing, however the parameter may have multiple types. Let’s say that we have a business, and we sell bikes<\/strong> and tennis racquets<\/strong>. Now, both items are different, albeit they both have a price<\/code> tag attached to them.<\/p>\n

So we have a bike type<\/code>:<\/p>\n

type Bike = {\r\n  price: number;\r\n  name: string;\r\n  productType: number; \/\/enum 1 - Electric, 2 - Mechanical\r\n  tires: string;\r\n  weight: number;\r\n  length: number;\r\n  height: number;\r\n}<\/code><\/pre>\n
and a tennis racquet type<\/code>:<\/p>\n
type TennisRacquet = {\r\n  name: string;\r\n  price: number;\r\n  brand: number;  \/\/ enum 1 - Babolat,  2 - Head, 3- Wilson\r\n  weight: number;\r\n  gripSize: number;\r\n  size: number;\r\n  racquetStrings: []string;\r\n}<\/code><\/pre>\n
Both Bike<\/code> and TennisRacquet<\/code> are pretty different in types, however they have a price<\/code> in common.\nTo find the average cost of our TennisRacquets<\/code> and Bikes<\/code>, we have 2 functions:<\/p>\n
\/\/ Average Bike Cost\r\nconst averageBikeCost: number = (bikes: Bike[]) => {\r\n    const sum: number = bikes.map(bike => bike.price).reduce((val, sum) => val + sum, 0);\r\n    const average = sum \/ bikes.length;\r\n    return average\r\n}\r\n\r\n\/\/ Average Tennis Racquet Cost\r\nconst averageTennisRacquetCost: number = (tennisRacquets: TennisRacquet[]) => {\r\n    const sum: number = tennisRacquets.map(tennisRacquet => tennisRacquet.price).reduce((val, sum) => val + sum, 0);\r\n    const average = sum \/ tennisRacquets.length;\r\n    return average\r\n}<\/code><\/pre>\n
Both these functions look fairly identical, except for the type. We could combine these two functions, without much difficulty since both just use the price<\/code>.<\/p>\n
const averageProductCost: number = (products: TennisRacquet[] | Bike[]) => {\r\n    const sum: number = products.map(product => product.price).reduce((val, sum) => val + sum, 0);\r\n    const average = sum \/ products.length;\r\n    return average\r\n}<\/code><\/pre>\n
However, to introduce a bit more complex functionality to get a mapping of the average of each “type” of racquet and bike, E.g. The average cost of all the electric bikes, and the average cost of all Babolat racquets.<\/p>\n
If we want to wrap this in one function, countSumMap, we will have to type narrow as shown below.<\/p>\n
Now Imagine if we want to extend this by another type if we add to our inventory of products (E.g., type Shoes<\/code>). We would be increasing this example quite a bit, and it will feel very repetitive<\/p>\n
const countSumMap: Map<string, { count: number; sum: number }> = (prods: Tennis[] | Bike[]) => {\r\n    const newMap = new Map<string, { count: number; sum: number }>();\r\n    if (\"tires\" in prods[0]) {\r\n        prods.map(prod => {\r\n          if (newMap.has(prod.productType)){\r\n              const { count, sum } = newMap.get(prod.productType)\r\n              newMap.set(prod.productType, { count: count + 1, sum: prod.price + sum });\r\n          } else {\r\n              newMap.set(prod.productType, { count: 1, sum: prod.price });\r\n          }\r\n        })\r\n    } else if (\"handleSize\" in prods[0]) {\r\n        prods.map(prod => {\r\n            if (newMap.has(prod.racquetBrand)) {\r\n                const { count, sum } = newMap.get(prod.racquetBrand)\r\n                newMap.set(prod.racquetBrand, { count: count + 1, sum: prod.price + sum });\r\n            } else {\r\n                newMap.set(prod.racquetBrand, { count: 1, sum: prod.price });\r\n            }\r\n        })\r\n    } else if (\"shoeSize\" in prods[0]) {\r\n        \/\/ ... conditional logic for type Shoe \r\n    }\r\n    return newMap\r\n}\r\n\r\nconst tennisRacquetsCountPriceMap = countSumMap(tennisRacquets);\r\n\/\/ Map(1) { 'Babolat' => { count: 1, sum: 150 } }\r\n\/\/ ... extra logic to find average \/ mean price\r\nconst bikeCountPriceMap = countSumMap(bikes)\r\n\/\/ Map(1) { 'Electric' => { count: 2, sum: 1500 } }\r\n\/\/ ... extra logic to find average \/ mean price<\/code><\/pre>\n
This is where Typescript Generics come in handy!<\/p>\n
Using Generics<\/h2>\n
We can use a type Generic <T><\/code> to help us reduce this repetitive code.<\/p>\n
Notice the code shown below, this is much more concise, and also reusable.\ncountSumMap<\/code> can be used for any object with a price<\/code>. keyName<\/code> is given to allow us to define how we organize our summation and count.<\/p>\n
const countSumMap: Map<string, { count: number; sum: number }> = <T>(prods: T[], keyName: string) => {\r\n    if (!keyName) return new Map();\r\n\r\n    const newMap = new Map<string, { count: number; sum: number }>();\r\n        prods.map(prod => {\r\n            if (newMap.has(prod[keyName])){\r\n                const { count, sum } = newMap.get(prod[keyName])\r\n                newMap.set(prod[keyName], { count: count + 1, sum: prod.price + sum });\r\n            } else {\r\n                newMap.set(prod[keyName], { count: 1, sum: prod.price });\r\n            }\r\n        })\r\n    return newMap\r\n}\r\n\/\/ console.log(countSumMap(bikes, \"productType\"))\r\n\/\/ Map(2) {\r\n\/\/   'Electric' => { count: 2, sum: 1500 },\r\n\/\/   'Mechanical' => { count: 1, sum: 3000 }\r\n\/\/ }<\/code><\/pre>\n
countSumMap<\/code> will infer <T><\/code>, as whatever type we pass as our parameter to prods<\/code>. If our countSumMap<\/code> takes an argument of Bike[]<\/code>, then it will be able to handle the logic while inferring Bike<\/code> as the type used in the function body. The same goes with TennisRacquet<\/code>.<\/p>\n
Another Example – React Custom Hook<\/h2>\n
NOTE: For a Full Working Example, See this Code Sandbox Demo<\/a><\/p><\/blockquote>\n
For this example, assume that we are attempting to set up an item selection that allows us to define a multiSelect<\/code> mode, so we can either add a single item as our activeItem<\/code>, or we can select multiple<\/code>.<\/p>\n