DEV Community

Discussion on: CodeAlong: Multi-Column Drag and Drop in React

Collapse
 
gustavojleal profile image
Gustavo Leal

I tried to use on typescript but I got this error when I call columns.
// Set start and end variables App.tsx
const start = columns[source.droppableId]
const end = columns[destination.droppableId]
TypeScript error in /home/gustavo/drag-and-drop/src/App.tsx(37,19):
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ todo: { id: string; list: string[]; }; doing: { id: string; list: never[]; }; done: { id: string; list: never[]; }; }'.
No index signature with a parameter of type 'string' was found on type '{ todo: { id: string; list: string[]; }; doing: { id: string; list: never[]; }; done: { id: string; list: never[]; }; }'. TS7053.

Some idea how to fix it ?

Collapse
 
imjoshellis profile image
Josh Ellis

If you show me your repo, I can give you a more specific answer, but I think what's happening is Typescript thinks the object key should be from a very specific list ("todo"|"doing"|"done", for example) but you (or the library) are giving it a string...

See this for some examples of how to fix: stackoverflow.com/questions/568334...

Collapse
 
gustavojleal profile image
Gustavo Leal

Actually I tried to add your DND on my profile project, but I got this error. So I copy and pasted your code for try to understand if it was an under spelling mistake but I got the same error.
github.com/gustavojleal/dnd-react-....

Thanks so much for your time,