Vue-grid-layout: Is it possible to use vue-grid-layout with TypeScript?

[victory-v]

As I see, no types declaration are provided. Could you please give some tips how to use this plugin in project with typescript?
Thanks in advance.

[gmsa]

I don't know typescript, so can't really help you on that, sorry.

[fuzzzerd]

I'm using it in a typescript project and it works just fine. Since this is packaged and deployed as a vue component, there's not much need for types. Most of the things you'll want to do are configured with vue binding properties and templates.

Additionally, the base library used by this project, interactjs, does have types if you need to work with that directly you can.

[victory-v]

I'm using it in a typescript project and it works just fine. Since this is packaged and deployed as a _vue_ component, there's not much need for types. Most of the things you'll want to do are configured with vue binding properties and templates.

I'm importing vue-grid-layout as it's shown in example:

import VueGridLayout from 'vue-grid-layout';
...
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},

And then I have an error:
Property 'GridLayout' does not exist on type 'typeof import("vue-grid-layout")'.

I'm not really experienced in typescript so I just can't figure out how to deal with components in this case. It would be great if you could share your experience!

[fuzzzerd]

I was wrong in my original statement! Its been a while since it was setup in my project, so the details had long left my memory. When you posted the error I checked how I'm doing it and I realized I ran across the same thing.

I had to change the import to an implicit any, note my own comment directly contradicts my above statement. Oops.

// @ts-ignore -- this doesn't have typings so implicit 'any' will have to be ok.
import * as VueGridLayout from 'vue-grid-layout';
...
@Component({  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
})

Funny how once you get something working, the details become fuzzy and all you can remember is that it works for you now. Sorry for the confusion. I hope this helps.

[victory-v]

@fuzzzerd thank you for reply, I think I'll use @ts-ignore too, it's the simplest way for now.

[tommyo]

I disagree that this doesn't need typing. Specifically when defining the GridItem data list. This vue-grid-item.d.ts should cover most use cases, if not all:

declare module 'vue-grid-layout' {
  import Vue from 'vue';

  export class GridLayout extends Vue {}

  export class GridItem extends Vue {}

  export interface GridItemData {
    x: number;
    y: number;
    w: number;
    h: number;
    i: string;
  }
}

then you get full type support, even for custom data sets:

import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';

interface CustomData extends GridItemData {
  label: string;
}

const layoutData: CustomData[] = [
  { x: 0, y: 0, h: 2, w: 2, i: "0", label: "My First Item" }
];
...

[fuzzzerd]

I wonder if @jbaysolutions would be open to a pull request to incorporate these typings in the published package?