4 Typescript 제네릭 함수의 힘을 활용하는 방법에 대한 아이디어

interface Item<T = any> {
  [key: string]: T
}

function mapByKey<T extends Item>(array: T[], key: keyof T): Item<T> {
  return array.reduce((map, item) => ({...map, [item[key]]: item}), {})
}

Let's look closer to what happens here:

1. interface Item<T = any> { ... } is a generic interface, with a default value of any (yes you can have default values in generics 🚀)
2. <T extends Item>(array: T[], key: keyof T) : Type T is inferred from the parameter, but it must satisfy the condition <T extends Item> (in other words T must be an object).
3. key: keyof T second parameter is constrained to the keys which are only available in T . If we are using Book , then available keys are id | author .
4. (...): Item<T> is a definition of the return type: key-value pairs, where values are of type T

Let's try it in action:

mapByKey(books, "wrongKey") // error. Not keyof T -> (not key of Book)

mapByKey(books, "id") // {"1":{"id":1,"author":"A"},"2":{"id":2,"author":"A"},"3":{"id":3,"author":"C"}}

As you can see, we can now benefit from knowing in advance available keys. They are automatically inferred from the type of the first argument. Warning: this helper is handy with unique values like ids; however, if you have non-unique values, you might end up overwriting a value which was previously stored for that key.

This method is beneficial, if you need to aggregate data based on a particular key, for instance, by author name.

We start by creating a new interface, which will define our expected output.

interface ItemGroup<T> {
  [key: string]: T[];
}

function groupByKey<T extends Item>(array: T[], key: keyof T): ItemGroup<T> {
  return array.reduce<ItemGroup<T>>((map, item) => {
    const itemKey = item[key]
    if(map[itemKey]) {
      map[itemKey].push(item);
    } else {
      map[itemKey] = [item]
    }

    return map
  }, {})
}

It's interesting to note, that Array.prototype.reduce is a generic function on its own, so you can specify the expected return type of the reduce to have better typing support.

In this example, we are using the same trick with keyof T which under the hood resolves into the union type of available keys.

groupByKey(books, "randomString") // error. Not keyof T -> (not key of Book)
groupByKey(books, "author") // {"A":[{"id":1,"author":"A"},{"id":2,"author":"A"}],"C":[{"id":3,"author":"C"}]}

function merge<T extends Item, K extends Item>(a: T, b: K): T & K {
  return {...a, ...b};
}

In the merge example T & K is an intersection type. That means that the returned type will have keys from both T and K .

const result = merge(books[0], recipes[0]) // {"id":1,"author":"A","cookingTime":10,"ingredients":["bread"]}
result.author // "A"
result.randomKey // error

What is the problem with Array.prototype.sort method? → It mutates the initial array. Therefore I decided to suggest a more flexible implementation of the sorting function, which would return a new array.

type ValueGetter<T = any> = (item: T) => string | number;
type SortingOrder = "ascending" | "descending";

function sortBy<T extends Item>(array: T[], key: ValueGetter<T>, order: SortingOrder = "ascending") {
  if(order === "ascending") {
    return [...array].sort((a, b) => key(a) > key(b) ? 1 : -1 )
  }
  return [...array].sort((a, b) => key(a) > key(b) ? -1 : 1 )
}

We will use a ValueGetter generic function, which will return a primitive type: string or number. It is a very flexible solution because it allows us to deal with nested objects efficiently.

// Sort by author
sortBy(books, (item) => item.author, "descending")

// Sort by number of ingredients
sortBy(recipes, (item) => item.ingredients.length)

// Sort very nested objects
const arrayOfNestedObjects = [{ level1: { level2: { name: 'A' } } }]
sortBy(arrayOfNestedObjects, (item) => item.level1.level2.name)