Typings for TypeScript

[SimonSchick]

I used your project recently and created typings:

declare module 'express-recaptcha' {
  import { Handler, Request } from 'express';

  namespace e {
    type CaptchaError = 'missing-input-secret' | 'invalid-input-secret' | 'missing-input-response' | 'invalid-input-response';
    interface InitOptions {
      /**
       * The callback function that gets called when all the dependencies have loaded.
       */
      onload?(): void;
      /**
       * Value could be explicit OR onload, Whether to render the widget explicitly.
       */
      render?: 'explicit' | 'onload';
      /**
       * Forces the widget to render in a specific language (Auto-detects if unspecified).
       */
      hl?: string
      /**
       * Value could be dark OR light.
       * The color theme of the widget (default light).
       */
      theme?: 'dark' | 'light';
      /**
       * Value could be audio OR image,
       * The type of CAPTCHA to serve.
       */
      type?: 'audio' | 'image';
      /**
       * Your callback function that's executed when the user submits a successful CAPTCHA response.
       */
      callback?: () => void;
      /**
       * Your callback function that's executed when the recaptcha response expires
       * and the user needs to solve a new CAPTCHA.
       */
      expired_callback?: () => void
      /**
       * The size of the widget.
       */
      size?: number | 'invisible';
      /**
       * The tabindex of the widget and challenge.
       * If other elements in your page use tabindex, it should be set to make user navigation easier.
       */
      tabindex?: number;
      /**
       * Adding support of remoteip verification (based on x-forwarded-for header or remoteAddress.Value could be true OR false (default false).
       * more info on : https://developers.google.com/recaptcha/docs/verify
       */
      checkremoteip?: boolean;
    }
  }

  // Technically a class but this wouldn't work right...
  const e: {
    public readonly middleware: {
      verify: Handler;
      render: Handler;
    }
    public init(siteKey: string, privateKey: string): void;
    public render(): string;
    public verify(req: Request, cb: (error: CaptchaError, data?: { hostname: string}) => void): void;
  };
  export = e;

  declare global {
    namespace Express {
      export interface Request {
        /**
         * Will be string when the `render` middleware is used.
         * Will be `{ error: ...}` when the `verify` middleware is used.
         */
        recaptcha?: string | {
          error: 'missing-input-secret' | 'invalid-input-secret' | 'missing-input-response' | 'invalid-input-response';
        }
      }
    }
  }
}

You might want to change your exports tho, exporting an instance of a class as module.exports is very hard to model in TS.

Ideally you'd export exports.Recaptcha = Recaptcha. I'd also suggest changing req.recaptcha to be { template: string; error: string }. Or you just move the entire thing to TS, all of these changes are breaking anyways.

[pdupavillon]

Hi @SimonSchick, I will have a look on this, next week.

[SimonSchick]

@pdupavillon thanks for the fast response 😄

[pdupavillon]

@SimonSchick, I change couple of things as you can see in the PR #14

1. Now express-recaptcha lib returns a class instead of an instance So : new Recaptcha(...) replace recaptcha.init(...) (see readme for more infos)
2. render method, now set the response object instead of request, which means, by using the middleware, you can access to the rendered template with res.recaptcha
3. verify method still populate the requestobject but returns an object with the error property and data (see readme for more infos)

Feel free to test and tell me if it fits your needs :)

[pdupavillon]

Migration to typescript done with PR #17. Definition files are include in the last release.