Up to speed withTypeScript

React

useMemo()

1const items = useMemo(
2  () => ({ items: data.filter(/* ... */) }),
3  [data]
4)
5// `items` is of type `{ items: any[] }`
6
7
8// we can also pass a type parameter to add a constraint on the callback
9const items = useMemo<{ items: any }>(
10  // the function must be of type `() => { items: any[] }`
11  () => ({ items: data.filter(/* ... */) }),
12  [data]
13
14

1type DependencyList = ReadonlyArray<any>;
2/**
3 * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
4 *
5 * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in
6 * the second argument.
7 *
8 * ```ts
9 * function expensive () { ... }
10 *
11 * function Component () {
12 *   const expensiveResult = useMemo(expensive, [expensive])
13 *   return ...
14 * }
15 * ```
16 *
17 * @version 16.8.0
18 * @see https://reactjs.org/docs/hooks-reference.html#usememo
19 */
20// allow undefined, but don't make it optional as that is very likely a mistake
21function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
22

useCallback()

1useCallback(
2    () => {
3      // do something
4    },
5    []
6)
7
8useCallback(
9    async () => {
10      // do something async
11    },
12    []
13)
14

1/**
2 * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
3 * has changed.
4 *
5 * @version 16.8.0
6 * @see https://reactjs.org/docs/hooks-reference.html#usecallback
7 */
8// TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown>
9function useCallback<
10  T extends (...args: any[]) => any
11>(callback: T, deps: DependencyList): T;
12

lodash

reduce()

1[].reduce(
2  (sum, curr) => sum + curr,
3  0
4) // return a `number` (inferred from the second argument)
5
6// return value can be of another type than the input type
7//  here `array` to `{ total: number }`
8
9// we need to pass `{ total: number }` to `reduce()` since
10//  it cannot infer it from the initial value argument (second argument)
11[].reduce<number, { total: number }>(
12  (acc, curr) => {
13    if (!acc.total) acc.total = 0
14
15    return acc.total = acc.total + curr
16  },
17  {}
18)
19

1/**
2 * Reduces a collection to a value which is the accumulated result of running each
3 * element in the collection through the callback, where each successive callback execution
4 * consumes the return value of the previous execution. If accumulator is not provided the
5 * first element of the collection will be used as the initial accumulator value. The callback
6 * is invoked with four arguments: (accumulator, value, index|key, collection).
7 * @param collection The collection to iterate over.
8 * @param callback The function called per iteration.
9 * @param accumulator Initial value of the accumulator.
10 * @return Returns the accumulated value.
11 */
12reduce<T, TResult>(
13  collection: T[] | null | undefined,
14  callback: MemoListIterator<T, TResult, T[]>,
15  accumulator: TResult
16): TResult;
17
18// ...
19
20type MemoListIterator<T, TResult, TList> = (
21  prev: TResult,
22  curr: T,
23  index: number,
24  list: TList
25) => TResult;
26

• nesting Generic: MemoListIterator<T, TResult, T[]>
• type constraint on the collection argument: T[]
• inferring types from arguments: TResult and T

get()

1let obj: { a: { b: number } } | undefined = { a: { b: 1 } }
2
3get(obj, ['a', 'b']) // => return type is `number | undefined`
4
5get({ a: { b: 1 } }, 'a.b')  // => return type is `any`
6

1/**
2 * Gets the property value at path of object. If the resolved value is undefined the defaultValue is used
3 * in its place.
4 *
5 * @param object The object to query.
6 * @param path The path of the property to get.
7 * @param defaultValue The value returned if the resolved value is undefined.
8 * @return Returns the resolved value.
9 */
10get<TObject extends object, TKey extends keyof TObject>(
11  object: TObject,
12  path: TKey | [TKey]
13): TObject[TKey];
14/**
15 * @see _.get
16 */
17get<TObject extends object, TKey extends keyof TObject>(
18  object: TObject | null | undefined,
19  path: TKey | [TKey]
20): TObject[TKey] | undefined;
21
22// ...
23
24get(object: any, path: PropertyPath, defaultValue?: any): any;
25

1get({ a: { b: { c: 1  } }, [['a', 'b', 'c']]) // return type is `number`!
2