How to create TypeScript declarations for a function that maps an object with function values?

Question

How to create TypeScript declarations for a function that maps an object with function values?

I'm trying to figure out how to implement the transformer function in JavaScript. This function is supposed to take an object that contains various string keys bonded to functions, and transform it such that the functions expect a 'this' argument of type 'MyClass'.

class MyClass {
  public id: string = ''
}

const instance = new MyClass()

function transformer(funcs) {
  return Object.fromEntries(
    Object.entries(funcs)
     .map(([key, func]) => [key, func.bind(instance)])
  )
}

My challenge lies in achieving intelligent typing for this function so that the editor/linter/compiler recognizes that the output maintains the same structure as the input but with the necessary 'this' parameter modified. I'm also struggling with a simpler case where I need to create a function that binds a single function needing a 'this' of type 'MyClass' along with additional parameters and return types.

function transform(fn) {
  return fn.bind(new MyClass())
}

I would greatly appreciate any pointers or insights on how to approach this problem. Generics may play a key role here, but I'm unsure where to begin. Any suggestions for further reading materials on this topic would be highly valued!

typescript generics type-conversion typescript-typings typing

Answer 1

Answer №1

To accomplish this task, you can utilize mapped types and a conditional type to remove the this parameter. I have also made adjustments to your transformer function to make it generic based on the instance while still ensuring that the function's this argument matches the type of the instance provided in order to avoid redundancy later on. Here is the revised solution:

class MyClass {
  public id: string = ''
}

const instance = new MyClass()

type StripThisParam<T extends (...args: any[]) => any> =
    T extends (this: any, ...params: infer $RestParams) => any
        ? (...args: $RestParams) => ReturnType<T>
        : T;

function transformer<
    I,
    T extends Record<string, (this: I, ...otherArgs: any[]) => any>
>(instance: I, funcs: T): { [K in keyof T]: StripThisParam<T[K]> } {
  return Object.fromEntries(
    Object.entries(funcs)
     .map(([key, func]) => [key, func.bind(instance)])
  ) as any;
}

const foo = transformer(instance, {
    bar(this: MyClass, name: string, age: number) {
        console.log(this.id);
    }
});

foo.bar("hey", 23);

TypeScript Playground Link

Answer 2

To accomplish this task, you can utilize mapped types and a conditional type to remove the this parameter. I have also made adjustments to your transformer function to make it generic based on the instance while still ensuring that the function's this argument matches the type of the instance provided in order to avoid redundancy later on. Here is the revised solution:

class MyClass {
  public id: string = ''
}

const instance = new MyClass()

type StripThisParam<T extends (...args: any[]) => any> =
    T extends (this: any, ...params: infer $RestParams) => any
        ? (...args: $RestParams) => ReturnType<T>
        : T;

function transformer<
    I,
    T extends Record<string, (this: I, ...otherArgs: any[]) => any>
>(instance: I, funcs: T): { [K in keyof T]: StripThisParam<T[K]> } {
  return Object.fromEntries(
    Object.entries(funcs)
     .map(([key, func]) => [key, func.bind(instance)])
  ) as any;
}

const foo = transformer(instance, {
    bar(this: MyClass, name: string, age: number) {
        console.log(this.id);
    }
});

foo.bar("hey", 23);

TypeScript Playground Link

Answer 3

Answer №2

Inside a function type, the type of this can be specified. For instance:

const f: (this: MyClass, x: number) => string =
  function(this: MyClass, x: number): string { /* ... */}

There is a predefined utility type called OmitThisParameter which can eliminate or preserve the this parameter:

/**
 * Retrieves the type of the 'this' parameter from a function type,
 * or 'unknown' if it is not present.
 */
type ThisParameterType<T> = T extends (this: infer U, ...args: never) => any
  ? U
  : unknown

/**
 * Excludes the 'this' parameter from a function type.
 */
type OmitThisParameter<T> = unknown extends ThisParameterType<T>
  ? T
  : T extends (...args: infer A) => infer R ? (...args: A) => R : T

You can define transform and transformer like this:

type MyClassFn = (this: MyClass, ...args: never[]) => unknown

function transform<F extends MyClassFn>(fn: F): OmitThisParameter<F> {
  // a type assertion is needed here: fn.bind does not support multiple 
  // parameters with different types in a generic way
  return (fn.bind as (thisArg: MyClass) => OmitThisParameter<F>)(instance)
}

function transformer<T extends Record<string, MyClassFn>>(
  funcs: T
): {[K in keyof T]: OmitThisParameter<T[K]>} {
  return Object.fromEntries(
    Object.entries(funcs)
     .map(([key, func]) => [key, func.bind(instance)])
  ) as {[K in keyof T]: OmitThisParameter<T[K]>}
}

// Usage
declare const f1: (this: MyClass, x: number, y: string) => number
declare const f2: (this: MyClass, x: number, y: boolean) => string
declare const f3: (this: MyClass) => void

// output will be: (x: number, y: string) => number
transform(f1)

// output will be: (x: number, y: boolean) => string
transform(f2)

// output will be: () => void
transform(f3)

// {
//   f1: (x: number, y: string) => number
//   f2: (x: number, y: boolean) => string
//   f3: () => void
// }
transformer({f1, f2, f3})

Playground link

Answer 4

Inside a function type, the type of this can be specified. For instance:

const f: (this: MyClass, x: number) => string =
  function(this: MyClass, x: number): string { /* ... */}

There is a predefined utility type called OmitThisParameter which can eliminate or preserve the this parameter:

/**
 * Retrieves the type of the 'this' parameter from a function type,
 * or 'unknown' if it is not present.
 */
type ThisParameterType<T> = T extends (this: infer U, ...args: never) => any
  ? U
  : unknown

/**
 * Excludes the 'this' parameter from a function type.
 */
type OmitThisParameter<T> = unknown extends ThisParameterType<T>
  ? T
  : T extends (...args: infer A) => infer R ? (...args: A) => R : T

You can define transform and transformer like this:

type MyClassFn = (this: MyClass, ...args: never[]) => unknown

function transform<F extends MyClassFn>(fn: F): OmitThisParameter<F> {
  // a type assertion is needed here: fn.bind does not support multiple 
  // parameters with different types in a generic way
  return (fn.bind as (thisArg: MyClass) => OmitThisParameter<F>)(instance)
}

function transformer<T extends Record<string, MyClassFn>>(
  funcs: T
): {[K in keyof T]: OmitThisParameter<T[K]>} {
  return Object.fromEntries(
    Object.entries(funcs)
     .map(([key, func]) => [key, func.bind(instance)])
  ) as {[K in keyof T]: OmitThisParameter<T[K]>}
}

// Usage
declare const f1: (this: MyClass, x: number, y: string) => number
declare const f2: (this: MyClass, x: number, y: boolean) => string
declare const f3: (this: MyClass) => void

// output will be: (x: number, y: string) => number
transform(f1)

// output will be: (x: number, y: boolean) => string
transform(f2)

// output will be: () => void
transform(f3)

// {
//   f1: (x: number, y: string) => number
//   f2: (x: number, y: boolean) => string
//   f3: () => void
// }
transformer({f1, f2, f3})

Playground link

How to create TypeScript declarations for a function that maps an object with function values?

Answer №1

Answer №2

Similar questions

Identify the moment the user begins or ends typing using jQuery

What is the process of converting the new syntax of SomeFunction() to TypeScript?

Use the rowTemplate in a Kendo grid without replacing the existing one

Understanding TypeScript: Utilizing type intersection and the powerful 'this' keyword

Typescript compilation fails to include require statements in certain files

Differences between Typescript, Tsc, and Ntypescript

Error: The element 'scrollable' is not recognized in Angular2

Remove properties that are not part of a specific Class

Definition of a generator in Typescript using an interface

Adding curly braces around values when using Angular's form group patchValue method

Understanding Vue.js - encountering the error message "property or method is not defined"

Is there a specific side effect that warrants creating a new Subscription?

An error has occurred while trying to declare Symbol InputText during an Angular production build

When I try to add data in Typescript, I am receiving an undefined value

The Observable constructor in Nativescript must be called with the 'new' keyword in order to be invoked

Every checkbox has been selected based on the @input value

Issue "TS2339: Could not find attribute 'X' on type 'Y'" encountered while accessing a data property within a function

What are the steps to successfully launch a Node.js / Express application with typescript on heroku?

Error in TypeScript when utilizing generic callbacks for varying event types

Converting an array of objects into a TypeScript dictionary with IDs as the key mapping