React-beautiful-dnd: Typescript support

[danielg2002]

There is any plan to support Typescript definition files?

[alexreardon]

Right now the library is typed with flowtype. My ideal would be generating some typescript definitions from the flow definitions themselves. I am not keen to add manual TS definitions to the library. Another option could be adding some definitions to https://github.com/DefinitelyTyped/DefinitelyTyped.

@thejameskyle would your type converter be a good candidate to help solve this?

[danielg2002]

@alexreardon Why are you using flowtype? the world is Typescript! :)

[jamiebuilds]

Why are you using flowtype? the world is Typescript! :)

Please be a better representative of your community by not insulting others

would your type converter be a good candidate to help solve this?

If you want to try using it I can show you how to set it up, but I don't have a lot of time to focus on it right now with the rest of the AK build in progress. It does limit what you're allowed to do in a number of places, so you'll feel some pain right now

[varHarrie]

react-beautiful-dnd.d.ts

declare module 'react-beautiful-dnd' {
  import * as React from 'react'

  export type Id = string

  export type DraggableId = Id

  export type DroppableId = Id

  export type TypeId = Id

  export type DraggableLocation = {
    droppableId: DroppableId
    index: number
  }

  // -------------------------

  export type DragStart = {
    draggableId: DraggableId
    type: TypeId
    source: DraggableLocation
  }

  export type DropResult = {
    draggableId: DraggableId,
    type: TypeId
    source: DraggableLocation
    destination?: DraggableLocation
  }

  export interface IDragDropContextProps {
    onDragStart?: (initial: DragStart) => void
    onDragEnd: (result: DropResult) => void
  }

  export class DragDropContext extends React.Component<IDragDropContextProps> {}

  // -------------------------

  export type DroppableProvided = {
    innerRef: (element: HTMLElement | null) => any
    placeholder?: React.ReactElement<any>
  }

  export type DroppableStateSnapshot = {
    isDraggingOver: boolean
  }

  export interface IDroppableProps {
    droppableId: DroppableId
    type?: TypeId
    isDropDisabled?: boolean
    direction?: 'vertical' | 'horizontal'
    children: (provided: DroppableProvided, snapshot: DroppableStateSnapshot) => React.ReactElement<any>
  }

  export class Droppable extends React.Component<IDroppableProps> {}

  // -------------------------

  export type DraggableStyle = any

  export type DragHandleProps = {
    onMouseDown: (event: MouseEvent) => void
    onKeyDown: (event: KeyboardEvent) => void
    onClick: (event: MouseEvent) => void
    tabIndex: number
    'aria-grabbed': boolean
    draggable: boolean
    onDragStart: () => void
    onDrop: () => void
  }

  export type DraggableProvided = {
    innerRef: (element?: HTMLElement | null) => any
    draggableStyle?: DraggableStyle
    dragHandleProps?: DragHandleProps
    placeholder?: React.ReactElement<any>
  }

  export type DraggableStateSnapshot = {
    isDragging: boolean
  }

  export interface IDraggableProps {
    draggableId: DroppableId
    type?: TypeId
    isDragDisabled?: boolean
    children: (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => React.ReactElement<any>
  }

  export class Draggable extends React.Component<IDraggableProps> {}
}

[alexreardon]

@varHarrie perhaps worth making a PR to https://github.com/DefinitelyTyped/DefinitelyTyped?

[varHarrie]

I made a PR to DefinitelyTyped, and have been merged now.:rocket:

If there is any issue, please let me know.

[alexreardon]

Awesome! We will update the docs to make reference to it :)

[alexreardon]

Now mentioned in the README.md 😄

[RainerAtSpirit]

Thanks @varHarrie! Works like a charm. Here's the converted flow example https://github.com/RainerAtSpirit/react-beautiful-dnd-typescript-example