Tips to declare a return type for a function that includes an optional formatter function parameter

Question

Tips to declare a return type for a function that includes an optional formatter function parameter

I'm currently exploring how to correctly define the return value when working with an object that includes optional formatter functions.

Everything is running smoothly for a function with a single value.

type Params = {
    id?: number
    created?: string
}

type FormatFn<TParam extends keyof Params, TValue> = (data: Params[TParam]) => TValue

type Result<TValue> = {
    param: TValue
}

declare function query<TParam extends keyof Params, TValue = Params[TParam]>(
    param: TParam,
    formatter?: FormatFn<TParam, TValue>
): Result<TValue>;

// The functionality works as intended, where 'created' is typed as 'Date'
const { param: created } = query('created', (created) => new Date(created || ''))

I am interested in creating a version where you can input both an array of strings and an object containing optional formatter functions.

Here is a Playground showcasing my attempt.

This is what I expect as the output:

queries(['id', 'created'], {
    created: (created) => new Date(created || '')
})

// Instead of the original return type
// {
//     params: {
//         id: number,
//         created: string
//     }
// 
// I am aiming for this structure due to the formatter function
// {
//     params: {
//         id: number,
//         created: Date
//     }
// }

typescript typescript-generics

Answer 1

Answer №1

type Params = {
    id?: number
    created?: string
}

type Elem = keyof Params;

type Fn = (value: any) => any

type Predicate<T extends Elem> = Record<T, (value: Required<Params>[T]) => any>

type Reducer<
    Arr extends ReadonlyArray<Elem>,
    Result extends Record<string, any> = {}
    > = Arr extends []
    ? Result
    : Arr extends readonly [infer H, ...infer Tail]
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? Reducer<Tail, Result & Predicate<H>>
    : never
    : never
    : never;

/**
 * JavaScript/TypeScript comparison
 */

const reducerPredicate = (elem: string) => ({ [elem]: () => null });

const reducer = <Arr extends string[]>(
    arr: Arr,
    result: { [prop: string]: string } = {}
) => {
    if (arr.length === 0) {
        return result; // 1. this marks the end of recursion
    }

    const [head, ...tail] = arr; // 2. from the first element till the second last one

    return reducer(tail, { ...result, ...reducerPredicate(head) });
    // no need for 'never' branch here
};

type Result<
    P extends ReadonlyArray<keyof Params>,
    Defaults extends Partial<Record<keyof Params, Fn>>,
    Cache extends P[number] & keyof Defaults = P[number] & keyof Defaults> =
    & { [Prop in Exclude<P[number], Cache>]: Required<Params>[Prop] }
    & { [Prop in keyof Defaults]: Defaults[Prop] extends Fn ? ReturnType<Defaults[Prop]> : never }

function queries<TParams extends Array<keyof Params>, TValues extends Partial<Reducer<TParams>>>(
    params: [...TParams],
    formatter?: TValues
): Result<TParams, TValues> {
    return null as any
}

const multiple = queries(['id', 'created'], {
    created: (created /** string */) => 42,
    id: (value /** number */) => 42
})

Try it yourself on TypeScript Playground

For more insights, visit my blog here.

Answer 2

type Params = {
    id?: number
    created?: string
}

type Elem = keyof Params;

type Fn = (value: any) => any

type Predicate<T extends Elem> = Record<T, (value: Required<Params>[T]) => any>

type Reducer<
    Arr extends ReadonlyArray<Elem>,
    Result extends Record<string, any> = {}
    > = Arr extends []
    ? Result
    : Arr extends readonly [infer H, ...infer Tail]
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? Reducer<Tail, Result & Predicate<H>>
    : never
    : never
    : never;

/**
 * JavaScript/TypeScript comparison
 */

const reducerPredicate = (elem: string) => ({ [elem]: () => null });

const reducer = <Arr extends string[]>(
    arr: Arr,
    result: { [prop: string]: string } = {}
) => {
    if (arr.length === 0) {
        return result; // 1. this marks the end of recursion
    }

    const [head, ...tail] = arr; // 2. from the first element till the second last one

    return reducer(tail, { ...result, ...reducerPredicate(head) });
    // no need for 'never' branch here
};

type Result<
    P extends ReadonlyArray<keyof Params>,
    Defaults extends Partial<Record<keyof Params, Fn>>,
    Cache extends P[number] & keyof Defaults = P[number] & keyof Defaults> =
    & { [Prop in Exclude<P[number], Cache>]: Required<Params>[Prop] }
    & { [Prop in keyof Defaults]: Defaults[Prop] extends Fn ? ReturnType<Defaults[Prop]> : never }

function queries<TParams extends Array<keyof Params>, TValues extends Partial<Reducer<TParams>>>(
    params: [...TParams],
    formatter?: TValues
): Result<TParams, TValues> {
    return null as any
}

const multiple = queries(['id', 'created'], {
    created: (created /** string */) => 42,
    id: (value /** number */) => 42
})

Try it yourself on TypeScript Playground

For more insights, visit my blog here.

Tips to declare a return type for a function that includes an optional formatter function parameter

Answer №1

Similar questions

Exploring ways to fetch an HTTP response using a TypeScript POST request

I am unable to employ filtering in TypeScript

Prevent accidental misuse of object[index] in Typescript

Absolute file path reference in Node.js

Webpack is encountering difficulties in locating the entry module when working with typescript

What is the process for importing string data into an Excel document using Angular?

Why is it necessary for the required type of a function parameter to be able to be assigned to

Warning in TypeScript when attempting to modify a single state property within a React component

Whenever I attempt to execute yarn build within next.js, an error always seems to occur

Guide to testing error throwing in error events with Jest

Filtering an array of objects based on a specific condition in TypeScript

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

Obtaining the date without the time in TypeScript and MongoDB

The expected input should be either an HTMLElement or an SVGElement, but the received input is currently null

What is the alternative to the deprecated 'combineLatest' method in rxJs and how can it be replaced?

The TN-Models-FP error message states that it is not allowed to use the `create` model without an associated `entity` model

What is the process of launching an Angular component in a new browser tab?

Transform the date format from Google Forms to TypeScript

The functionality of provideRouter and RouterConfig cannot be located in the updated @angular/router version 3.0.0-alpha.3^