Definition of method type within an object literal

Question

Definition of method type within an object literal

I'm facing a situation where I have an async function nested inside an object. In order to maintain proper type declarations, I need to structure it like the example below:

interface Props {
  loading?: boolean | undefined;
  separator?: 'cell' | 'none';
  onRequest?: (requestProp: {
    pagination: {
      sortBy: string;
      descending: boolean;
      page: number;
      rowsPerPage: number;
    };
    filter: string;
  }) => void;
}

const myObj = {
  async myTest({ pagination }) {  // How do I set myTest as Props['onRequest']?
  let $id = this.id;
      /* consume $id and await */
      /* ... */
  },
  id: 521,
  result: '',
};

Is there a specific way to define the type of a method in an object literal?

typescript

Answer 1

Answer №1

Explore the following options:

Implement arrow functions

const object1 = {
    id: 235,
    myTest: async ({pagination}) => {
        console.log(`this = ${this}`);
        console.log(`object1.id = ${object1.id}`, )
    }
}

When using this approach, this is assigned to globalThis, resulting in undefined (refer to here).

[LOG]: "this = undefined" 
[LOG]: "object1.id = 235"

Utilize regular functions

const object2 = {
    id: 813,
    myTest: async function({pagination}) {
        console.log(`this = ${JSON.stringify(this)}`);
        console.log(`object2.id = ${object2.id}`, )
        console.log(`this.id = ${this.id}`)
    }
}

This code snippet will yield:

[LOG]: "this = {"id":813}" 
[LOG]: "object2.id = 813" 
[LOG]: "this.id = 813"

Comment 1 Updates

To begin, I separated the RequestProp type for better function signature usage. The subsequent steps remain consistent:

interface RequestProp {
  pagination: {
    sortBy: string;
    descending: boolean;
    page: number;
    rowsPerPage: number;
  };
  filter: string;
}

interface Props {
  loading?: boolean | undefined;
  separator?: "cell" | "none";
  onRequest?: (requestProp: RequestProp) => Promise<void>;
}

async function main() {
  const x: Props = {
    onRequest: async function (requestProp: RequestProp) {
      console.log(JSON.stringify(requestProp, null, 2));
    },
  };

  if (x.onRequest) {
    const json = await x.onRequest({
      pagination: {
        sortBy: "x",
        descending: true,
        page: 1,
        rowsPerPage: 10,
      },
      filter: "xyz",
    });

    console.log(json);
  }
}

main();

Answer 2

Explore the following options:

Implement arrow functions

const object1 = {
    id: 235,
    myTest: async ({pagination}) => {
        console.log(`this = ${this}`);
        console.log(`object1.id = ${object1.id}`, )
    }
}

When using this approach, this is assigned to globalThis, resulting in undefined (refer to here).

[LOG]: "this = undefined" 
[LOG]: "object1.id = 235"

Utilize regular functions

const object2 = {
    id: 813,
    myTest: async function({pagination}) {
        console.log(`this = ${JSON.stringify(this)}`);
        console.log(`object2.id = ${object2.id}`, )
        console.log(`this.id = ${this.id}`)
    }
}

This code snippet will yield:

[LOG]: "this = {"id":813}" 
[LOG]: "object2.id = 813" 
[LOG]: "this.id = 813"

Comment 1 Updates

To begin, I separated the RequestProp type for better function signature usage. The subsequent steps remain consistent:

interface RequestProp {
  pagination: {
    sortBy: string;
    descending: boolean;
    page: number;
    rowsPerPage: number;
  };
  filter: string;
}

interface Props {
  loading?: boolean | undefined;
  separator?: "cell" | "none";
  onRequest?: (requestProp: RequestProp) => Promise<void>;
}

async function main() {
  const x: Props = {
    onRequest: async function (requestProp: RequestProp) {
      console.log(JSON.stringify(requestProp, null, 2));
    },
  };

  if (x.onRequest) {
    const json = await x.onRequest({
      pagination: {
        sortBy: "x",
        descending: true,
        page: 1,
        rowsPerPage: 10,
      },
      filter: "xyz",
    });

    console.log(json);
  }
}

main();

Answer 3

Answer №2

In my quest for a solution, I stumbled upon the power of utilizing Parameters and NonNullable utilities.

    const newObj = {
      async newTest( {pagination} : Parameters<NonNullable<QTableProps['onRequest']> ) {  
      let $id = this.id;
          // extracting pagination
          /* use $id and await */
          /* ... */
      },
      id: 521,
      outcome: '',
    };

Answer 4

In my quest for a solution, I stumbled upon the power of utilizing Parameters and NonNullable utilities.

    const newObj = {
      async newTest( {pagination} : Parameters<NonNullable<QTableProps['onRequest']> ) {  
      let $id = this.id;
          // extracting pagination
          /* use $id and await */
          /* ... */
      },
      id: 521,
      outcome: '',
    };

Definition of method type within an object literal

Answer №1

Implement arrow functions

Utilize regular functions

Comment 1 Updates

Answer №2

Similar questions

Error: Angular 4.1.3 routing is unable to locate child module within parent module

Encountering a problem with TypeScript while employing Promise.allSettled

Error in Ionic 3: "this is null"

Dealing with API Errors in Ngrx

Encountering issues with accessing the clientWidth and clientHeight references of the DOM in Vue

Modifying the property of an object following retrieval from the server

Error: The 'contains' property is not available for type 'never'

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

Is it possible to import in TypeScript using only the declaration statement?

(NextAuth) Error: The property 'session' is not found within the existing type '{}'

Update the TypeScript definitions in the index.d.ts file using the npm command, by overriding it with the reference types

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

Discovering a locator based on the initial portion of its value

Failing to reach the nested if statements within a switch case block

Can Angular be utilized for developing an email application?

Angular 4 fetches the number obtained from a GET request

Fatal Error: Unable to resolve dependencies for ProductListComponent

I am experiencing difficulties with implementing Angular material components in my project

A peculiar quirk with Nuxt.js radio buttons: they appear clickable but are somehow not disabled