Typescript: The Art of Typing Functions

Question

Typescript: The Art of Typing Functions

Hey there! I've been diving into learning typescript and have been working through some exercises. If you're curious, you can check out the exercise here.

I'm a bit stuck on grasping how to approach this particular example.

Here's the code snippet that's giving me trouble:

export function map(mapper, input) {
    if (arguments.length === 0) {
        return map;
    }
    if (arguments.length === 1) {
        return function subFunction(subInput) {
            if (arguments.length === 0) {
                return subFunction;
            }
            return subInput.map(mapper);
        };
    }
    return input.map(mapper);
}

I've tried adding types to it like so:

export function map<T>(mapper: Function, input : T[]| any) : T[] | Function {
    if (arguments.length === 0) {
        return map;
    }
    if (arguments.length === 1) {
        return function subFunction(subInput: T[]|any): T[] | Function {
            if (arguments.length === 0) {
                return subFunction;
            }
            return subInput.map(mapper);
        };
    }
    return input.map(mapper);
}

Although TypeScript isn't throwing any compilation errors, I'm still unable to pass the test cases. I'm feeling a bit lost on what exactly is expected for this to work.

I could peek at the provided solution, but honestly, it feels like magic to me at this point.

Looking into the test.ts file for clues seems daunting with expressions like

const mapResult1 = map()(String)()([1, 2, 3]);

. It's all a bit overwhelming!

typescript

Answer 1

Answer №1

Here is an interesting example showcasing the usage of the map function:

First, when you write map(), the result is the map function itself.
Next, calling map(String) returns a subFunction.
Following that, invoking subFunction() results in the return of the subFunction itself.
Lastly, by using subFunction([1, 2, 3]), we get the value of [1, 2, 3].map(String): ['1', '2', '3']

The resulting type from this operation is a string[], as each element in the final array comes from the invocation of String which always produces a string. The typings are designed to determine this without actually running the code.

In the source code for the exercises being worked on, there is a solution that has been enhanced to be more "functional" (creating a new function for every unresolved parameter).

function toFunctional<T extends Function>(func: T): Function {
    const fullArgCount = func.length;
    function createSubFunction(curriedArgs: unknown[]) {
        return function(this: unknown) {
            const newCurriedArguments = curriedArgs.concat(Array.from(arguments));
            if (newCurriedArguments.length > fullArgCount) {
                throw new Error('Too many arguments');
            }
            if (newCurriedArguments.length === fullArgCount) {
                return func.apply(this, newCurriedArguments);
            }
            return createSubFunction(newCurriedArguments);
        };
    }
    return createSubFunction([]);
}

interface MapperFunc<I, O> {
    (): MapperFunc<I, O>;
    (input: I[]): O[];
}

interface MapFunc {
    (): MapFunc;
    <I, O>(mapper: (item: I) => O): MapperFunc<I, O>;
    <I, O>(mapper: (item: I) => O, input: I[]): O[];
}

/**
 * If 2 arguments are passed: a new array is returned
 * after mapping the input with the specified mapper.
 *
 * If 1 argument is passed: a function is returned that takes
 * an input and returns a new array obtained by mapping the input
 * with the original mapper.
 *
 * If no arguments are passed: it returns itself.
 */
export const map = toFunctional(<I, O>(fn: (arg: I) => O, input: I[]) => input.map(fn)) as MapFunc;

Answer 2

Here is an interesting example showcasing the usage of the map function:

First, when you write map(), the result is the map function itself.
Next, calling map(String) returns a subFunction.
Following that, invoking subFunction() results in the return of the subFunction itself.
Lastly, by using subFunction([1, 2, 3]), we get the value of [1, 2, 3].map(String): ['1', '2', '3']

The resulting type from this operation is a string[], as each element in the final array comes from the invocation of String which always produces a string. The typings are designed to determine this without actually running the code.

In the source code for the exercises being worked on, there is a solution that has been enhanced to be more "functional" (creating a new function for every unresolved parameter).

function toFunctional<T extends Function>(func: T): Function {
    const fullArgCount = func.length;
    function createSubFunction(curriedArgs: unknown[]) {
        return function(this: unknown) {
            const newCurriedArguments = curriedArgs.concat(Array.from(arguments));
            if (newCurriedArguments.length > fullArgCount) {
                throw new Error('Too many arguments');
            }
            if (newCurriedArguments.length === fullArgCount) {
                return func.apply(this, newCurriedArguments);
            }
            return createSubFunction(newCurriedArguments);
        };
    }
    return createSubFunction([]);
}

interface MapperFunc<I, O> {
    (): MapperFunc<I, O>;
    (input: I[]): O[];
}

interface MapFunc {
    (): MapFunc;
    <I, O>(mapper: (item: I) => O): MapperFunc<I, O>;
    <I, O>(mapper: (item: I) => O, input: I[]): O[];
}

/**
 * If 2 arguments are passed: a new array is returned
 * after mapping the input with the specified mapper.
 *
 * If 1 argument is passed: a function is returned that takes
 * an input and returns a new array obtained by mapping the input
 * with the original mapper.
 *
 * If no arguments are passed: it returns itself.
 */
export const map = toFunctional(<I, O>(fn: (arg: I) => O, input: I[]) => input.map(fn)) as MapFunc;

Answer 3

Answer №2

Here is a straightforward solution:

interface SubFunction<I, O> {
  (): SubFunction<I, O>;
  (input: I[]): O[];
}

function map<I, O>(): typeof map;
function map<I, O>(mapper: (i: I) => O): SubFunction<I, O>;
function map<I, O>(mapper: (i: I) => O, input: I[]): O[];

function map<I, O>(mapper?: (i: I) => O, input?: I[]) {
  if (mapper && input) {
    return input.map(mapper);
  }
  if (mapper) {
    const subFunction = (input?: I[]) => input ? input.map(mapper) : subFunction;
    return subFunction;
  }
  return map;
}

const mapResult1 = map()(String)()([1, 2, 3]);

It utilizes a helper type for the SubFunction.
Embraces modern TypeScript practices (no function except top-level, no arguments)
Utilizes function overload to handle differing return types.

Playground

Answer 4

Here is a straightforward solution:

interface SubFunction<I, O> {
  (): SubFunction<I, O>;
  (input: I[]): O[];
}

function map<I, O>(): typeof map;
function map<I, O>(mapper: (i: I) => O): SubFunction<I, O>;
function map<I, O>(mapper: (i: I) => O, input: I[]): O[];

function map<I, O>(mapper?: (i: I) => O, input?: I[]) {
  if (mapper && input) {
    return input.map(mapper);
  }
  if (mapper) {
    const subFunction = (input?: I[]) => input ? input.map(mapper) : subFunction;
    return subFunction;
  }
  return map;
}

const mapResult1 = map()(String)()([1, 2, 3]);

It utilizes a helper type for the SubFunction.
Embraces modern TypeScript practices (no function except top-level, no arguments)
Utilizes function overload to handle differing return types.

Playground

Typescript: The Art of Typing Functions

Answer №1

Answer №2

Similar questions

The persistence of Ionic Native Storage seems to be lost upon app rebuilding

The 'import type' declaration cannot be parsed by the Babel parser

Set the input of a component in Angular to determine its width

Issues arising from TypeScript error regarding the absence of a property on an object

The function "overloading" of the union type is not functioning properly

Should loaders be utilized in an Angular application?

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

TypeScript does not verify keys within array objects

Developing a declaration for an unnamed function in a JavaScript file

"Using Jest's mock to expect a different set of arguments passed with toHave

Guidelines for crafting an intricate selector by utilizing mergeStyleSets and referencing a specific class

Ways to update HTML values using Events

Utilizing a map in conjunction with template literal types results in an error being thrown

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

Issue with binding background images to DIV elements in Angular 4 CSS

employing flush for lodash's throttle wrapper

Problem with timing in token interceptor and authentication guard due to injected service

ngx-datatable is unable to assign a new row model when using [rows]="rows | async"

Ways to pass styling properties to a nested component

Issue with React Context: The type 'Dispatch<SetStateAction<GiftsType>>' cannot be assigned to type '(arr1: string[], arr2: string[]) => void'