feat: add type check

src/controller/hooks/table_drag/Types.ts

@@ -1,15 +1,15 @@
 import { ConnectDragSource, ConnectDropTarget  } from 'react-dnd';
 export interface ColumnItemProps {
   label: string;
-  index?: number;
+  columnIndex?: number;
 }
 
 interface Offset {
   x: number;
   y: number;
 }
 
-type NewOffser = Offset | null;
+type TOffser = Offset | null;
 
 export interface IProps {
   id?: number;
@@ -20,7 +20,7 @@ export interface IProps {
   isOver: boolean;
   connectDropTarget: ConnectDropTarget;
   isOverCurrent: boolean;
-  differenceFromInitialOffset: NewOffser;
+  differenceFromInitialOffset: TOffser;
   onChange: (val: ColumnItemProps, index: number) => void;
 }
 

src/controller/hooks/table_drag/constant.ts

@@ -1,13 +1,12 @@
+import { DragSourceMonitor, DropTargetMonitor, DropTargetConnector, DragSourceConnector } from 'react-dnd';
+import { IProps } from './Types';
+
 export const ItemTypes = {
-  CARD: 'card'
+  COLUMN: 'COLUMN'
 };
 
-/**
- * Specifies the drag source contract.
- * Only `beginDrag` function is required.
- */
-export const cardSource = {
-  beginDrag(props) {
+export const columnSource = {
+  beginDrag(props: IProps) {
     const { columnItem, columnIndex } = props;
     // 传参给target
 
@@ -17,7 +16,7 @@ export const cardSource = {
     };
   },
 
-  endDrag(props, monitor, component) {
+  endDrag(props: IProps, monitor: DragSourceMonitor) {
     if (!monitor.didDrop()) {
       return;
     }
@@ -26,16 +25,16 @@ export const cardSource = {
   }
 };
 
-export const cardTarget = {
-  drop(props, monitor) {
+export const columnTarget = {
+  drop(props: IProps, monitor: DropTargetMonitor) {
     const { columnItem, columnIndex, onChange } = props;
     const dragItem = monitor.getItem();
     const dragIndex = dragItem.columnIndex;
     const hoverIndex = columnIndex;
     console.log(dragItem, hoverIndex, dragIndex, columnItem);
     onChange && onChange(dragItem, hoverIndex);
   },
-  hover(props, monitor) {
+  hover(props: IProps, monitor: DropTargetMonitor) {
     const { columnIndex } = props;
     const dragItem = monitor.getItem();
 
@@ -44,17 +43,14 @@ export const cardTarget = {
   }
 };
 
-export function collect(connect, monitor) {
+export function dragCollect<CollectedProps, RequiredProps>(connect: DragSourceConnector, monitor: DragSourceMonitor) {
   return {
-    // Call this function inside render()
-    // to let React DnD handle the drag events:
     connectDragSource: connect.dragSource(),
-    // You can ask the monitor about the current drag state:
     isDragging: monitor.isDragging()
   };
 }
 
-export function DropCollect(connect, monitor) {
+export function dropCollect<CollectedProps, RequiredProps>(connect: DropTargetConnector, monitor: DropTargetMonitor) {
   return {
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),

src/controller/hooks/table_drag/index.tsx

@@ -3,14 +3,9 @@ import React from 'react';
 import { DragSource, DropTarget, DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { IProps, IState, ColumnItemProps } from './Types';
-import { ItemTypes, cardSource, collect, cardTarget, DropCollect } from './constant';
+import { ItemTypes, columnSource, columnTarget, dragCollect, dropCollect } from './constant';
 
 class TableDrag extends React.Component<IProps, IState> {
-
-  onClick = () => {
-    console.log(1);
-  }
-
   render() {
     const {
       isDragging,
@@ -19,17 +14,17 @@ class TableDrag extends React.Component<IProps, IState> {
       connectDropTarget,
     } = this.props;
 
-    return connectDragSource(connectDropTarget(<div onClick={this.onClick}>
-      I am a draggable card number {columnItem.label} {columnItem.index}
+    return connectDragSource(connectDropTarget(<div>
+      I am a draggable card number {columnItem.label} {columnItem.columnIndex}
       {isDragging && ' (and I am being dragged now)'}
     </div>)
 
     );
   }
 }
 
-const NewTableDrag = DragSource(ItemTypes.CARD, cardSource, collect)(TableDrag);
-const NewTableDrop = DropTarget(ItemTypes.CARD, cardTarget, DropCollect)(NewTableDrag);
+const NewTableDrag = DragSource(ItemTypes.COLUMN, columnSource, dragCollect)(TableDrag);
+const NewTableDrop = DropTarget(ItemTypes.COLUMN, columnTarget, dropCollect)(NewTableDrag);
 
 class DragWrap extends React.Component {
   state: IState = {
@@ -46,11 +41,11 @@ class DragWrap extends React.Component {
     ]
   };
 
-  onChange = (value, targetIndex) => {
+  onChange = (value: ColumnItemProps, targetIndex: number) => {
     console.log(value, targetIndex);
     const data = this.state.data;
     const targetItem = data[targetIndex]; // 需要被替换的项
-    let dragItem: ColumnItemProps | null = null; // 替换的项
+    let dragItem: ColumnItemProps; // 替换的项
     let dragIndex: number = 0;
     data.forEach((item, index) => {
       if (index === value.columnIndex) {