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-6767ab2bdd056177140834 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-6767ab2bdd059329180156 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-6767ab2bdd05b665005752 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-6767ab2bdd05d697940142 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.
