title: Simple react-dnd list in typescript is giving me compilation errors when trying to run the example
body: <p>I am trying to get this beautiful-react-dnd example working, and I am getting a few errors currently:</p>
  <pre><code>import * as React from 'react';
  import {
    DragDropContext,
    Draggable,
    Droppable,
    DroppableProvided,
    DraggableLocation,
    DropResult,
    DroppableStateSnapshot, DraggableProvided, DraggableStateSnapshot
  } from 'react-beautiful-dnd';
  import {Flex} from 'grid-styled'
  import './App.css';
  
  interface Item {
    id: string;
    content: string;
  }
  interface IAppState {
    items: Item[];
    selected: Item[];
  }
  interface IMoveResult {
    droppable: Item[];
    droppable2: Item[];
  }
  
  const getItems = (count: number, offset:number = 0): Item[] =&gt; {
    return Array
      .from({length: count}, (v, k) =&gt; k)
      .map(k =&gt; ({
        content: `item ${k + offset}`,
        id: `item-${k + offset}`
      }));
  };
  
  const reorder = (list: Item[], startIndex: number, endIndex: number):Item[] =&gt; {
    const result = [...list];
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
  
    return result;
  };
  
  
  /**
   * Moves an item from one list to another list.
   */
  const move = (source: Item[], destination: Item[], droppableSource:DraggableLocation, droppableDestination:DraggableLocation):IMoveResult | any =&gt; {
    const sourceClone = [...source];
    const destClone = [...destination];
    const [removed] = sourceClone.splice(droppableSource.index, 1);
  
    destClone.splice(droppableDestination.index, 0, removed);
  
    const result = {};
    result[droppableSource.droppableId] = sourceClone;
    result[droppableDestination.droppableId] = destClone;
  
    return result;
  };
  
  const grid:number = 8;
  
  const getItemStyle = (draggableStyle: any, isDragging: boolean):{} =&gt; ({
    userSelect: 'none',
    padding: 2*grid,
    margin: `0 0 ${grid}px 0`,
    background: isDragging ? 'lightgreen' : 'grey',
    ...draggableStyle
  });
  
  const getListStyle = (isDraggingOver: boolean):{} =&gt; ({
    background: isDraggingOver ? 'lightblue' : 'lightgrey',
    padding: grid,
    width: 300,
    minHeight: 400
  });
  
  export default class App extends React.Component&lt;{}, IAppState&gt; {
  
    public id2List = {
      droppable: 'items',
      droppable2: 'selected'
    };
  
    constructor(props:any) {
      super(props);
  
      this.state = {
        items: getItems(10, 0),
        selected: getItems(5, 10)
      };
  
      this.onDragEnd = this.onDragEnd.bind(this);
      this.getList = this.getList.bind(this);
    }
  
    public getList (id:string):Item[] {
      return this.state[this.id2List[id]];
    }
  
    public onDragEnd(result: DropResult):void {
  
      const { source, destination } = result;
  
      if (!destination) {
        return;
      }
  
      if (source.droppableId === destination.droppableId) {
        const items = reorder(
          this.getList(source.droppableId),
          source.index,
          destination.index
        );
  
        let state:IAppState = {...this.state};
  
        if (source.droppableId === &quot;droppable2&quot;) {
          state = { ...this.state, selected: items };
        } else if (source.droppableId === &quot;droppable&quot;) {
          state = {...this.state, items}
        }
  
        this.setState(state);
  
      } else {
        const resultFromMove:IMoveResult = move(
          this.getList(source.droppableId),
          this.getList(destination.droppableId),
          source,
          destination
        );
  
        this.setState({
          items: resultFromMove.droppable,
          selected: resultFromMove.droppable2
        });
      }
    }
  
    public render() {
      return (
        &lt;DragDropContext onDragEnd={this.onDragEnd}&gt;
          &lt;Flex justifyContent={&quot;space-between&quot;}&gt;
            &lt;Flex flexDirection=&quot;column&quot;&gt;
              &lt;Droppable droppableId=&quot;droppable&quot;&gt;
                {(provided:DroppableProvided, snapshot:DroppableStateSnapshot) =&gt; (
                  &lt;div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    style={getListStyle(snapshot.isDraggingOver)}
                  &gt;
                    {this.state.items.map((item, index) =&gt; (
                      &lt;Draggable key={item.id} draggableId={item.id} index={index}&gt;
                        {(providedDraggable:DraggableProvided, snapshotDraggable:DraggableStateSnapshot) =&gt; (
                            &lt;div&gt;
                              &lt;div
                                ref={providedDraggable.innerRef}
                                {...providedDraggable.draggableProps}
                                {...providedDraggable.dragHandleProps}
                                style={getItemStyle(
                                  providedDraggable.draggableProps.style,
                                  snapshotDraggable.isDragging
                                )}
                              &gt;
                                {item.content}
                              &lt;/div&gt;
                              {providedDraggable.placeholder}
                            &lt;/div&gt;
                          )}
                      &lt;/Draggable&gt;
                    ))}
                    {provided.placeholder}
                  &lt;/div&gt;
                )}
              &lt;/Droppable&gt;
            &lt;/Flex&gt;
            &lt;Droppable droppableId=&quot;droppable2&quot;&gt;
              {(providedDroppable2:DroppableProvided, snapshotDroppable2:DroppableStateSnapshot) =&gt; (
                &lt;div
                  ref={providedDroppable2.innerRef}
                  style={getListStyle(snapshotDroppable2.isDraggingOver)}&gt;
                  {this.state.selected.map((item, index) =&gt; (
                    &lt;Draggable
                      key={item.id}
                      draggableId={item.id}
                      index={index}&gt;
                      {(providedDraggable2:DraggableProvided, snapshotDraggable2:DraggableStateSnapshot) =&gt; (
                        &lt;div&gt;
                          &lt;div
                            ref={providedDraggable2.innerRef}
                            {...providedDraggable2.draggableProps}
                            {...providedDraggable2.dragHandleProps}
                            style={getItemStyle(
                              providedDraggable2.draggableProps.style,
                              snapshotDraggable2.isDragging
                            )}&gt;
                            {item.content}
                          &lt;/div&gt;
                          {providedDraggable2.placeholder}
                        &lt;/div&gt;
                      )}
                    &lt;/Draggable&gt;
                  ))}
                  {providedDroppable2.placeholder}
                &lt;/div&gt;
              )}
            &lt;/Droppable&gt;
            &lt;/Flex&gt;
        &lt;/DragDropContext&gt;
      );
    }
  
  }
  </code></pre>
  <p>Reference: <a href="https://github.com/abeaudoin2013/react-beautiful-dnd-multi-list-typescript-example/blob/master/src/App.tsx" rel="nofollow noreferrer">https://github.com/abeaudoin2013/react-beautiful-dnd-multi-list-typescript-example/blob/master/src/App.tsx</a></p>
  <p><strong>The are currently 2 errors that I am seeing when trying to run this example:</strong></p>
  <p>Error#1
  Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.  TS7053</p>
  <blockquote>
  <blockquote>
  <p>result[droppableSource.droppableId] = sourceClone;</p>
  </blockquote>
  </blockquote>
  <p>Error#2
  Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Readonly'.  TS7053</p>
  <p>public getList(id: string): Item[] {</p>
  <blockquote>
  <p>99 |     return this.state[this.id2List[id]];
  |            ^
  100 |   }</p>
  </blockquote>
  <p>Here are my dependencies:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@reduxjs/toolkit&quot;: &quot;^1.5.1&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;@types/jest&quot;: &quot;^24.0.0&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.0&quot;,
      &quot;@types/react-beautiful-dnd&quot;: &quot;^13.1.2&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;@types/react-redux&quot;: &quot;^7.1.7&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.3.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-beautiful-dnd&quot;: &quot;^13.1.0&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-redux&quot;: &quot;^7.2.0&quot;,
      &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;typescript&quot;: &quot;~4.1.5&quot;
    },
  </code></pre>