{"action":"created","issue":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/785","repository_url":"https://api.github.com/repos/react-dnd/react-dnd","labels_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/785/labels{/name}","comments_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/785/comments","events_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/785/events","html_url":"https://github.com/react-dnd/react-dnd/issues/785","id":233363921,"number":785,"title":"TypeScript - Property is missing in type DndComponent","user":{"login":"sundriver","id":1539955,"avatar_url":"https://avatars1.githubusercontent.com/u/1539955?v=4","gravatar_id":"","url":"https://api.github.com/users/sundriver","html_url":"https://github.com/sundriver","followers_url":"https://api.github.com/users/sundriver/followers","following_url":"https://api.github.com/users/sundriver/following{/other_user}","gists_url":"https://api.github.com/users/sundriver/gists{/gist_id}","starred_url":"https://api.github.com/users/sundriver/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sundriver/subscriptions","organizations_url":"https://api.github.com/users/sundriver/orgs","repos_url":"https://api.github.com/users/sundriver/repos","events_url":"https://api.github.com/users/sundriver/events{/privacy}","received_events_url":"https://api.github.com/users/sundriver/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-06-03T11:31:41Z","updated_at":"2018-02-27T14:34:32Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\n\r\n Thanks for the react-dnd library, very nice work.\r\n I have the following two typing issues with the following sample code. I appreciate if someone could tell me what am i doing wrong ?\r\n\r\n```\r\nexport interface TestProps {\r\n\r\n}\r\n@DropTarget<TestProps>(\"TEST\", {\r\n    drop(props: TestProps) {\r\n    }\r\n}, (connect, monitor) => {\r\n    return { dragTarget: connect.dropTarget() };\r\n})\r\nexport class TestComponent extends React.Component<TestProps, undefined> {\r\n    constructor(props: TestProps) {\r\n        super(props);\r\n    }\r\n    someHelper() {\r\n        return (<h1>Test</h1>);\r\n    }\r\n    render() {\r\n        return (this.props as any).dragTarget(this.someHelper());\r\n    }\r\n}\r\n\r\n```\r\n1. Is there a better way of doing \r\n`        return (this.props as any).dragTarget(this.someHelper());`\r\n2. The following code produces the error below, any ideas?\r\n`\r\n    TS1238: Unable to resolve signature of class decorator when called as an expression.\r\n  Type 'DndComponentClass<TestProps>' is not assignable to type 'typeof TestComponent'.\r\n    Type 'DndComponent<TestProps, any>' is not assignable to type 'TestComponent'.\r\n      Property 'someHelper' is missing in type 'DndComponent<TestProps, any>'.\r\n`\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/react-dnd/react-dnd/issues/comments/368897599","html_url":"https://github.com/react-dnd/react-dnd/issues/785#issuecomment-368897599","issue_url":"https://api.github.com/repos/react-dnd/react-dnd/issues/785","id":368897599,"user":{"login":"abelkbil","id":1478274,"avatar_url":"https://avatars0.githubusercontent.com/u/1478274?v=4","gravatar_id":"","url":"https://api.github.com/users/abelkbil","html_url":"https://github.com/abelkbil","followers_url":"https://api.github.com/users/abelkbil/followers","following_url":"https://api.github.com/users/abelkbil/following{/other_user}","gists_url":"https://api.github.com/users/abelkbil/gists{/gist_id}","starred_url":"https://api.github.com/users/abelkbil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/abelkbil/subscriptions","organizations_url":"https://api.github.com/users/abelkbil/orgs","repos_url":"https://api.github.com/users/abelkbil/repos","events_url":"https://api.github.com/users/abelkbil/events{/privacy}","received_events_url":"https://api.github.com/users/abelkbil/received_events","type":"User","site_admin":false},"created_at":"2018-02-27T14:34:31Z","updated_at":"2018-02-27T14:34:31Z","author_association":"NONE","body":"@sundriver , @lukescott , I do face this issue, I removed decorator. Still component method not defined issue arise. Could you please share you sample code.\r\n\r\n```\r\nInterface Props {\r\n    // tslint:disable-next-line:no-any\r\n    connectDropTarget?: any;\r\n\r\n}\r\n\r\ninterface InjectedProps extends Props {\r\n  dashboardStore: DashboardStore;\r\n}\r\n\r\nconst dashboardDropTarget = {\r\n\r\n    // tslint:disable-next-line:typedef\r\n    drop(props, monitor, component) {\r\n        const item = monitor.getItem();\r\n        component.addDropedItem(item);\r\n        return { moved: true };\r\n    }\r\n};\r\n\r\n// tslint:disable-next-line:typedef\r\nfunction collect(connect, monitor) {\r\n    return {\r\n        connectDropTarget: connect.dropTarget(),\r\n        canDrop: monitor.canDrop(),\r\n        itemType: monitor.getItemType()\r\n    };\r\n}\r\n\r\n@inject('dashboardStore')\r\n@observer\r\nclass EditDashboardGrid extends React.Component <Props, {}> {\r\n    static contextTypes = {\r\n        addDropedItem: PropTypes.func\r\n    };\r\n\r\n    dashboardStore: DashboardStore;\r\n\r\n    constructor(props: Props) {\r\n        super(props);\r\n        this.dashboardStore = this.injected.dashboardStore;\r\n    }\r\n\r\n    get injected() {\r\n        return this.props as InjectedProps;\r\n    }\r\n\r\n\r\n    // tslint:disable-next-line:no-any\r\n    addDropedItem(item: any) {\r\n        alert(item);\r\n    }\r\n    render() {\r\n        \r\n        if (!this.dashboardStore.isLayoutLoading) {\r\n            const { connectDropTarget } = this.props;\r\n            return connectDropTarget  (\r\n            <div id=\"widgets-container\">\r\n                <div className=\"startboard-layout edit-flowlayout\">\r\n                    <div className=\"flowlayout-childcontainer\" />\r\n                </div>\r\n            </div>\r\n            );\r\n        }\r\n        return (<Loader/>);\r\n   \r\n    }\r\n}\r\nexport default DropTarget(['WIDGET', 'SIGNAL'], dashboardDropTarget, collect)(EditDashboardGrid);\r\n```\r\n\r\nThank you."}}
{"actor":{"display_login":"abelkbil"}}