Typescript support

[adamalfredsson]

I'm not sure how I would import the Moment type through this package. Would I need to also include the momentjs dependency for types in my project?

[takahser]

Either

• use the js syntax Vue.use(require('vue-moment')); or
• leverage the typescript default exports:

import VueMoment from 'vue-moment';
Vue.use(VueMoment);

[adamalfredsson]

I'm still not able to get the types working:

in main.ts:

import moment from 'vue-moment';
Vue.use(moment);

in MyComponent.vue:

[BrockReece]

I haven't done that much in Typescript before, does anyone have any experience with this that can point me in the right direction?

[takahser]

@nomadoda you can't use intellisense yet, since there are not typings for this project. You can, however, still use it together with typescript.

@BrockReece you need to provide some typescript typings for that. Maybe this helps: https://www.triplet.fi/blog/three-ways-to-provide-typescript-type-definitions-to-3rd-party-libraries/

[Rouche]

https://github.com/brockpetrie/vue-moment/pull/111

[jayporta]

This is kind of old but it's still open. I'm actually here for something else but I worked around lack of @types package by creating vue-moment.d.ts in a /types directory. It contains the following:

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $moment: any
  }
}

And then in main.ts

Vue.use(moment as any)

[demianh]

I fixed typings by creating a d.ts file with the following contents:

import Vue, { VueConstructor } from 'vue';
import moment from 'moment';

declare module 'vue/types/vue' {
  interface Vue {
    $moment(inp?: moment.MomentInput, format?: moment.MomentFormatSpecification, strict?: boolean): moment.Moment;
    $moment(inp?: moment.MomentInput, format?: moment.MomentFormatSpecification, language?: string, strict?: boolean): moment.Moment;
  }
  interface VueConstructor {
    $moment(inp?: moment.MomentInput, format?: moment.MomentFormatSpecification, strict?: boolean): moment.Moment;
    $moment(inp?: moment.MomentInput, format?: moment.MomentFormatSpecification, language?: string, strict?: boolean): moment.Moment;
  }
}

[alvaro-canepa]

Based on @demianh script, I made some changes, because it doesn't work using this.$moment, only work calling method this.$moment(). I needed because I use moment-timer extension.

With below vue.d.ts changes it is possible to use like this lines:

this.$moment
     .duration(5, "minutes")
     .timer({ start: true }, callback);

const tokensExpiry = this.$moment().add(data.expires_in, 's').toISOString();

// @types/vue.d.ts
import * as moment from "moment";

interface ITimerAttr {
  wait?: number;
  loop?: boolean;
  start?: boolean;
}

interface Callback {
  (): void;
}

interface Timer {
  start(): boolean;
  stop(): boolean;
  clearTime(): boolean;
  updateStartEndTickFromDuration(duration: number): boolean;
  getDuration(): number;
  getRemainingDuration(): number;
  isStopped(): boolean;
  isStarted(): boolean;
}

interface IMoment extends moment.Moment, Timer {
  (
    inp?: moment.MomentInput,
    format?: moment.MomentFormatSpecification,
    language?: string,
    strict?: boolean
  ): IMoment;
  duration(
    inp?: moment.DurationInputArg1,
    unit?: moment.DurationInputArg2
  ): IMoment;

  timer(attributes: ITimerAttr, callback?: Callback): IMoment;
}

declare module "vue/types/vue" {
  interface Vue {
    $moment: IMoment;
  }
  interface VueConstructor {
    $moment: IMoment;
  }
}

[lifenautjoe]

I think this works too given that the moment dependent package already contains extensive typings.

Type declarations:

import Vue from 'vue'
import moment from 'moment';

declare module 'vue/types/vue' {
    interface Vue {
        $moment: typeof moment
    }
}

[cafe01]

Perfect! Thanks guys!