TypeScript: How to move event handlers to separate functions

[jamacku]

I'm trying to outsource the Probot.on() callback handler, so I could better structure my project. I was suggested to use the HandlerFunction type from webhooks.js (octokit/webhooks.js#665 (comment)).

It works great in plain webhooks code, but once I want to use some Probot methods I'm lost. 😵

Could you please give me some hint or push me to the right direction or suggest some sources. I would be interested in how to work with those complex types and how to create them.

Thank you in advance!!! 🙏

Code example

import { Probot, Context } from 'probot';

import type { HandlerFunction } from '@octokit/webhooks/dist-types/types';

const webhooks = [
  'pull_request.opened' as const,
  'pull_request.reopened' as const,
];

const callBack: HandlerFunction<
  typeof webhooks[number],
  Context
> = async context => {
  if (context.isBot) {
    return;
  }

  context.payload.pull_request;
};

export = (app: Probot) => {
  app.on(webhooks, callBack);         // <- ts(2345)
};

Error

Argument of type 'HandlerFunction<"pull_request.opened" | "pull_request.reopened", Context<"pull_request.opened" | "pull_request.reopened" | "branch_protection_rule" | "branch_protection_rule.created" | ... 227 more ... | "workflow_run.requested">>' is not assignable to parameter of type 'HandlerFunction<"pull_request.opened" | "pull_request.reopened", Omit<Context<"pull_request.opened" | "pull_request.reopened" | "branch_protection_rule" | "branch_protection_rule.created" | ... 227 more ... | "workflow_run.requested">, "payload" | ... 1 more ... | "name">>'.
  Type 'Omit<Context<"pull_request.opened" | "pull_request.reopened" | "branch_protection_rule" | "branch_protection_rule.created" | "branch_protection_rule.deleted" | "branch_protection_rule.edited" | ... 225 more ... | "workflow_run.requested">, "payload" | ... 1 more ... | "name">' is missing the following properties from type 'Context<"pull_request.opened" | "pull_request.reopened" | "branch_protection_rule" | "branch_protection_rule.created" | "branch_protection_rule.deleted" | "branch_protection_rule.edited" | ... 225 more ... | "workflow_run.requested">': name, id, payloadts(2345)

[gr2m]

Maybe have a look at what I did for the WIP app?

I have the event handler functions in 3 different files and load them here:
https://github.com/wip/app/blob/cfcdcaf1c3146463021ab17d40076491bb27bcbf/index.js#L3-L5

The function itself then looks like this:
https://github.com/wip/app/blob/cfcdcaf1c3146463021ab17d40076491bb27bcbf/lib/handle-pull-request-change.js#L13-L18

Would that approach work for you?

[jamacku]

Thank you, that is exactly what I've been looking for!

[jamacku]

The payload has wrong type. @gr2m Do you have any suggestions? Thank you.

import { Probot, Context } from 'probot';

const webhooks = [
  'pull_request.opened' as const,
  'pull_request.reopened' as const,
];

function probotCallBack(app: Probot, context: Context) {
  if (context.isBot) {
    return;
  }

  app.log(context.payload.pull_request);        // <- ts(2339)
}

export = (app: Probot) => {
  app.on(webhooks, probotCallBack.bind(null, app));
};

[gr2m]

Try this

- function probotCallBack(app: Probot, context: Context) {
+ function probotCallBack(app: Probot, context: Context<"pull_request">) {

[jamacku]

Thank you for your help, I really appreciate it! 👍

[jamacku]

Just for record, there is working example:

import { Probot, Context } from 'probot';

const webhooks = [
  'pull_request.opened' as const,
  'pull_request.reopened' as const,
];

function probotCallBack(
  app: Probot,
  context: Context<typeof webhooks[number]>
) {
  if (context.isBot) {
    return;
  }

  app.log(context.payload.pull_request);
}

export = (app: Probot) => {
  app.on(webhooks, probotCallBack.bind(null, app));
};

Thanks @gr2m