typescript @types issue

[hovorun]

When installing the library in my Vue application, I get the next error Cannot resolve definitions for module 'vue-dndrop' seems like it's missing types declaration, can it be solved somehow? Thanks in advance

[amendx]

@hovorun can you show me how you're importing the lib? And its component usage?

[xyhxx]

maybe you can refer to DefinitelyTyped, i hope it can run in typescript

[Lyokolux]

At the moment:

• no types are recognized when importing something by vue-dndrop
• @types/vue-dndrop does not exist

So if you use typescript for your vue project, these package should be treated with an any type. It removes errors but does not provide safety.

I use a stub of it in my env.d.ts:

declare module "vue-dndrop" {
  const Container: any
  const Draggable: any
  export {
    Container,
    Draggable
  }
}

[philiprenich]

@hovorun can you show me how you're importing the lib? And its component usage?

I have the same issue (typescript'd Vue 2 app) and it's a simple module import in my .vue single file component.

...
<script lang="ts">
import { Container } from "vue-dndrop";`
...
</script>
...

Using @Lyokolux removes the errors and allows a build. It would be nice to have TS support, but I understand not everyone wants to do that :)

[cin12211]

Hey you can try this @philiprenich @Lyokolux @amendx @hovorun @xyhxx

declare module 'vue-dndrop' {
  import { type DefineComponent } from 'vue'

  interface DropResult {
    removedIndex: number
    addedIndex: number
    payload: Payload
    element: Element
  }

  interface DragEvent {
    payload: Payload
    isSource: boolean
    willAcceptDrop: boolean
  }

  type Payload = any

  interface NodeDescription {
    value: string
    props: Record<string, any>
  }

  interface DraggableProps {
    dragNotAllowed?: boolean
    tag?: string | NodeDescription
  }

  interface ContainerProps {
    dragStart?: (dragEvent: DragEvent) => void
    dragEnd?: (dragEvent: DragEvent) => void
    dragEnter?: () => void
    dragLeave?: () => void
    dragReady?: (dropResult: DropResult) => void
    drop?: (dropResult: DropResult) => void
    dropNotAllowed?: (dropResult: { payload: any; container: any }) => void

    getChildPayload?: (index: number) => Payload
    shouldAnimateDrop?: (sourceContainerOptions: ContainerProps, payload: Payload) => boolean
    shouldAcceptDrop?: (sourceContainerOptions: ContainerProps, payload: Payload) => boolean
    getGhostParent?: () => Element

    orientation: 'horizontal' | 'vertical'
    behaviour: 'move' | 'copy' | 'drop-zone' | 'contain'
    tag?: string | NodeDescription
    groupName?: string
    lockAxis?: 'x' | 'y'
    dragHandleSelector?: string
    nonDragAreaSelector?: string
    dragBeginDelay?: number
    animationDuration?: number
    autoScrollEnabled?: boolean
    dragClass?: string
    dropClass?: string
    removeOnDropOut?: boolean
    dropPlaceholder?:
      | boolean
      | {
          className: string
          animationDuration: number
          showOnTop: boolean
        }
    fireRelatedEventsOnly?: boolean
  }

  const Draggable: DefineComponent<DraggableProps>

  const Container: DefineComponent<ContainerProps>

  export { Draggable, Container, DropResult, DragEvent }
}