How to add methods from custom plugin to Dayjs type in TypeScript

[hollg]

Hi,

I've written a custom plugin that adds two methods to dayjs objects: displayShort and displayLong. It works great in JavaScript, but I get a TypeScript error when I call dayjs().displayShort() or dayjs().displayLong() because TypeScript doesn't know about those methods.

How can I solve this problem? I've looked at the type files for the plugins in this repo and tried to extrapolate from them, but if I add the following to a custom type file, I get more TypeScript errors because I seem to be effectively overwriting the Dayjs type rather than adding to it.

import 'dayjs/locale/en-gb'

import dayjs, { PluginFunc } from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import localizedFormat from 'dayjs/plugin/localizedFormat'

declare module 'dayjs' {
  class Dayjs {
    displayShort(input: any): string
    displayLong(input: any): string
  }
}

My plugin looks like this:

const LONG_DATE_FORMATS = {
  dayDateMonth: 'dddd Do MMMM',
  dayMonthDate: 'dddd MMMM Do'
}

const displayPlugin: PluginFunc = (option, dayjsClass, dayjsFactory) => {
  dayjsClass.prototype['displayShort'] = function () {
    return this.format('L')
  }

  dayjsClass.prototype['displayLong'] = function () {
    switch (this.locale()) {
      case 'en': // US English
        return this.format(LONG_DATE_FORMATS.dayMonthDate)
      case 'en-gb':
        return this.format(LONG_DATE_FORMATS.dayDateMonth)
      default:
        return this.format(LONG_DATE_FORMATS.dayDateMonth)
    }
  }
}

Many thanks for any help, and for this excellent library!

[iamkun]

ref https://github.com/iamkun/dayjs/tree/dev/types/plugin

[BePo65]

Use interface instead of class when extending a class (see typescript documentation).
The type definition should look like this:

import 'dayjs/locale/en-gb'

import { PluginFunc } from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import localizedFormat from 'dayjs/plugin/localizedFormat'

declare const plugin: PluginFunc
export = plugin

declare module 'dayjs' {
  interface Dayjs {
    displayShort(input: any): string
    displayLong(input: any): string
  }
}