Introduction
TypeScript is not a purely functional programming language but offers a lot of concepts that are in line with functional programming languages. Most developers are oblivious to these concepts in TypeScript.
A Higher-order-function is a function that accepts one or more functions as parameters or returns another function as a result.
What are Higher-Order Functions?
A Higher-Order Function is a function that either takes another function as an argument or returns a function. So basically we could say, that a Higher-Order Function is wrapping another function.
Example of a higher-order function;
|
1 2 3 4 5 6 7 8 9 |
[crayon-67907b8ba1a78508808064 inline="true" ]const numbers = [1, 2, 3, 4, 5]; function addOne(array) { for (let i = 0; i < array.length; i++) { console.log(array[i] + 1); } } addOne(numbers); |
Creating a Higher-Order Function
Higher-order functions provide a higher level of abstraction for functions.
Step One
The returned function’s argument must be of the same type as the callback’s argument. You could set the type of the callback and arguments as static but then this wouldn’t be a reusable function.
|
1 2 3 4 5 6 7 |
[crayon-67907b8ba1a7b838735910 inline="true" ]const cacheResource = <CallbackFunction extends Function>(callback: CallbackFunction, key: string) => (...args: any[]) => { return callback(...args); } const getUser = (id: string) => ({ name: 'Dude' }); const cachedGetUser = cacheResource(getUser, 'user'); // (...args: any[]) => any |
Step Two
To get TypeScript to infer the type from the callback function we need to connect the type assertions. We need to say that the returned function arguments and return are the same as the CallbackFunction.
|
1 2 3 |
[crayon-67907b8ba1a7e928342922 inline="true" ]const cacheResource = <CallbackFunction extends (...args: any) => any>(callback: CallbackFunction, key: string) => (...args: Parameters<CallbackFunction>): ReturnType<CallbackFunction> => { return callback(...args); } |
Step Three
The last part is making sure you set the callback as a promise. For this, we need to set the return types as Promises.
|
1 2 3 4 5 6 7 8 9 10 |
[crayon-67907b8ba1a80026810659 inline="true" ]type ReturnPromiseType<T extends (...args: any) => Promise<any>> = T extends (...args: any) => Promise<infer R> ? R : any; const cacheResource = <CallbackFunction extends (...args: any[]) => Promise<any>>(callback: CallbackFunction, key: string) => async (...args: Parameters<CallbackFunction>): Promise<ReturnPromiseType<CallbackFunction>> => { const data = await callback(...args); return data; } const getUser = (id: string) => Promise.resolve({ name: 'Dude' }); const cachedGetUser = cacheResource(getUser, 'user'); // (id: string) => Promise<{ name: string; }> |
Conclusion
In TypeScript, functions can be passed as arguments to another function. Functions can also be returned by another function. A function passed to another as an argument is known as a callback. A function that accepts functions as parameters (callbacks) or returns functions is known as a higher-order function. A higher-order function takes at least a function as its argument(s) and returns a new function.
