Adding typescript types

[veeral-patel]

Is your feature request related to a problem? Please describe. The repo doesn't have an index.d.ts and the DefinitelyTyped repo doesn't have types for it either.

Describe the solution you'd like Adding types in either location would be great.

Describe alternatives you've considered I could just use plain Javascript in my Typescript app, but that's not clean.

Great project by the way -- thanks!

[rcdexta]

@veeral-patel Thanks for pointing that out. I am torn between migrating this codebase to typescript or provide a type definition to start with. Either ways will address this issue asap.

[G-Rath]

@rcdexta I've made my own typings that I use in my typescript project, that I'll share soon (I have no idea how good they are, only that they work fine with webpack + WebStorm in my project).

While I love this project, it does sadden me slightly to see how inconsistent it is with it's props, which is made more apparent in the typings.

If you're interested, I'd love to help you consolidate the api & clean up the code for this project. It would mean some breaking change-releases, since a number of props would be renamed, but that could be mitigated for the most part by just mapping the old props to the new ones & call console.warn everywhere.

A great example of what I'm talking about can be found with the new code added for adding new lanes. Cards have newCardTemplate, onCardAdd, addCardLink, etc, and so I'd expect lanes to be done using a similar set of props (where feasible / possible of course): newLaneTemplate, onLaneAdd, addLaneLink, etc. Instead, there isn't onLaneAdd, & addLaneLink is for some reason addLaneTitle?

Another example is with drag end event props: The event for cards is just called handleDragEnd, while the one for lanes is handleLaneDragEnd. Personally, I think it's cleaner to have onCardDragEnd & onLaneDragEnd. (on b/c that tends to be the standard convention for React event-function-props).

I really love this project, as it 'just works' which is awesome, but I think it's at the point where some clean up could help make it even better, and I'd love to help where I can with that!

https://gist.github.com/G-Rath/b9331e480aff4c613294b0c2682bf034

^^ My types. These are done for WebStorm, so they're designed to play nice with that.

I do have some improvements to make to it, with some typings being unknown for now. Will update as I go :)

import ReactTrello from 'react-trello';

...
<ReactTrello<{ dbId: number }>
   data={{ lanes: [] }}
/>
...

[rcdexta]

@G-Rath Can you raise a PR including the type definitions. I can try playing around with it in some sample typescript projects and we can publish it...

[G-Rath]

@rcdexta I'll look to do that sometime in the next week - I'm not entirely happy with the definitions right now, as the way you (or "we" now I guess 😛) pass properties on to cards & lanes means you can actually have your own custom properties, which the typings don't support, but I have a good idea of how to type.

It basically means taking an optional generic for lanes & cards, that extend off the base lane & card interfaces.

I'll have a play around over the weekend, and see what I can get done.

[rcdexta]

@G-Rath Any updates on this one? Or should I take a stab at it taking ur initial version as baseline?

[oztek22]

for workaround, I have added "noImplicitAny": false to tsconfig.json.

[rlingineni]

Building on G-Raths work - added a few more types such as eventbus and a few supported custom Elements:

https://gist.github.com/rlingineni/fc95c05897ffc6d7e78fbbc6255dbaa0

[cmacdonnacha]

Hey guys, went to install this library, just wondering if type have been added yet?

[phoenixcoded20]

Its been 8 month since last comment, is there any update on this?

[oscar-gallog]

@phoenixcoded20 I think type defs are not going to happen, I don't know if this is useful to you, but you can add this to your local definitions, it's not perfect or amazing BY ANY MEANS, but it helps a little bit:

declare class ReactTrelloBoard<CardMetaData> extends React.Component<
  ReactTrello.BoardProps<CardMetaData>
> {}

declare namespace ReactTrello {
  /**
   * react-trello uses `React.cloneElement`, so these props
   * will have to be added to `defaultProps`, otherwise
   * TypeScript will (understandably) freak out.
   */
  interface NewCardTemplateProps<CardMetaData = unknown> {
    laneId: string;
    onAdd: (card: Card<CardMetaData>) => void;
    onCancel: () => void;
  }

  interface BoardData<CardMetaData = unknown> {
    lanes: Array<Lane<CardMetaData>>;
  }

  type node = unknown & React.ReactNode;
  type element = unknown & React.ReactElement<unknown>;

  type Special = unknown;

  interface EventBus {
    publish: (any) => void;
  }

  export interface DraggableCard {
    id?: string;
    title: string;
    description?: string;
    label?: string;
    metadata?: any;
  }

  interface Lane {
    id: string;
    title?: string;
    label?: string;
    cards?: Array<DraggableCard>;
    disallowAddingCard?: boolean;
  }

  interface BoardProps<CardMetaData = object> {
    /**
     * Makes all cards and lanes draggable. Default: false
     */
    draggable?: boolean;
    /**
     * Set to false to disable lane dragging. Default: true
     */
    laneDraggable?: boolean;
    /**
     * Set to false to disable card dragging. Default: true
     */
    cardDraggable?: boolean;
    /**
     * Make the lanes with cards collapsible. Default: false
     */
    collapsibleLanes?: boolean;
    /**
     * Makes the entire board editable. Allow cards to be added or deleted Default: false
     */
    editable?: boolean;
    /**
     * Callback function triggered when card drag is started: handleDragStart(cardId, laneId)
     */
    handleDragStart?: (cardId: string, laneId: string) => void;
    /**
     * Callback function triggered when card drag ends: handleDragEnd(cardId, sourceLaneId, targetLaneId, position, cardDetails)
     */
    handleDragEnd?: (
      cardId: string,
      sourceLandId: string,
      targetLaneId: string,
      position: number,
      cardDetails: Card<CardMetaData>
    ) => void;
    /**
     * Callback function triggered when lane drag is started: handleLaneDragStart(laneId)
     */
    handleLaneDragStart?: (laneId: string) => void;
    /**
     * Callback function triggered when lane drag ends: handleLaneDragEnd(laneId, newPosition)
     */
    handleLaneDragEnd?: (laneId: string, newPosition: number) => void;
    /**
     * CSS class to be applied to Card when being dragged
     */
    cardDragClass?: string;
    /**
     * CSS class to be applied to Lane when being dragged
     */
    laneDragClass?: string;
    /**
     * Called when a lane is scrolled to the end: onLaneScroll(requestedPage, laneId)
     */
    onLaneScroll?: (requestedPage: unknown, laneId: string) => void;
    /**
     * Called when a card is clicked: onCardClick(cardId, metadata, laneId)
     */
    onCardClick?: (
      cardId: string,
      metaData: CardMetaData,
      laneId: string
    ) => void;
    /**
     * Called when a new card is added: onCardAdd(card, laneId)
     */
    onCardAdd?: (card: DraggableCard, laneId: string) => void;
    /**
     * Pass custom element to replace the Add Card link at the end of the lane (when board is editable)
     */
    components?: {
      AddCardLink?: React.Element;
      NewCardForm?: React.Element;
      Card?: React.Element;
    };

    addCardLink?: React.Element;
    /**
     * Pass a custom new card template to add new cards to a lane (when board is editable)
     */
    newCardTemplate?: node;
    /**
     * Pass a custom new lane template to add new lanes to a board (when board is editable)
     */
    newLaneTemplate?: node;
    /**
     * Disable showing the delete icon to the top right corner of the card (when board is editable)
     */
    hideCardDeleteIcon?: boolean;
    /**
     * Called when a card is deleted: onCardDelete(cardId, laneId)
     */
    onCardDelete?: (cardId: string, laneId: string) => void;

    onBeforeCardDelete?: (props: any) => void;
    /**
     * Called when a lane is clicked: onLaneClick(laneId). Card clicks are not propagated to lane click event
     */
    onLaneClick?: (laneId: string) => void;
    /**
     * Used to specify the logic to sort cards on a lane: laneSortFunction(card1, card2)
     */
    laneSortFunction?: (card1: Card, card2: Card) => void;
    /**
     * This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section
     */
    eventBusHandle?: (hook: EventBus) => void;
    /**
     * Called everytime the data changes due to user interaction or event bus: onDataChange(newData)
     */
    onDataChange?: (newData: unknown) => void;
    /**
     * Pass css style props to board container
     */
    style?: React.CSSProperties;
    /**
     * Pass css style props to lane container
     */
    laneStyle?: React.CSSProperties;

    /**
     * Pass css style props to card container
     */
    cardStyle?: React.CSSProperties;

    /**
     * Boolean to indicate a custom card template will be specified. Add the card component as child to Board
     */
    customCardLayout?: boolean;
    /**
     * Pass custom lane header as react component to modify appearance
     */
    customLaneHeader?: element;
    /**
     * Actual board data in the form of json
     */
    data: BoardData<CardMetaData>;
    /**
     * If cards have tags, use this prop to modify their style
     */
    tagStyle?: unknown;
    addLaneTitle?: string;
    addCardTitle?: string;
  }
}

declare module 'react-trello' {
  export default ReactTrelloBoard;
}

[phoenixcoded20]

Thanks for the reply, I will try it out and see if it works.

[phoenixcoded20]

So this is a basic JS sandbox demo: https://codesandbox.io/s/react-trello-example-forked-sri7p I tried to create a new demo based on TS from above and added your file, but there are some warnings. I think I am missing something. See TS Demo: https://codesandbox.io/s/react-trello-typescript-w3gvp

I am a newbie to TS so hope you can understand. Also, I believe if we can set up this demo in TS, it will be very helpful for many.

[matheuscamarques]

any solution for this ? It's been years...

[sakgoyal]

Some people write some TS code. I updated it to work with TS v5. its not perfect. but i only spent 5 minutes on it... https://gist.github.com/sakgoyal/701db76182e3f49a6bc709a1ead1461c

edit: i have no idea if its properly typed for any changes since @phoenixcoded20 sent his gist above. thats the one I edited