feat: add dataIndex type check (#1091)

* feat: add dataIndex type check

* fix: ts

* feat: add source

* fix: ts

* fix: ts

* feat: 泛型默认值设置为 any

* feat: add type test

* feat: 优化 ddemo

* feat: support empty string

* feat: support empty string

Author: crazyair

docs/examples/animation.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import CSSMotionList from 'rc-animate/lib/CSSMotionList';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import './animation.less';
@@ -10,7 +11,7 @@ type MotionBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const MotionBody: React.FC<MotionBodyProps> = ({ children, ...props }) => {
   const nodeList = toArray(children);
-  const nodesRef = React.useRef<Record<React.Key, React.ReactElement>>({});
+  const nodesRef = React.useRef<Record<string, React.ReactElement>>({});
 
   // Better apply clean up logic to avoid OOM
   const keys: React.Key[] = [];
@@ -46,9 +47,9 @@ interface DemoState {
 }
 
 class Demo extends React.Component<{}, DemoState> {
-  columns = [
+  columns: TableProps['columns'] = [
     { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
-    { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+    { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
     { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
     {
       title: 'Operations',

docs/examples/aria.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
-const columns = [
+interface FieldType {
+  name?: string;
+  age?: string;
+  address?: string;
+}
+
+const columns: TableProps<FieldType>['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

docs/examples/caption.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
-const columns = [
+const columns: TableProps['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

docs/examples/childrenIndent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
@@ -8,6 +9,7 @@ interface RecordType {
   age: number;
   address: string;
   children?: RecordType[];
+  operation?: string;
 }
 
 function CustomExpandIcon(props) {
@@ -27,7 +29,7 @@ function CustomExpandIcon(props) {
   );
 }
 
-const columns = [
+const columns: TableProps<RecordType>['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

docs/examples/className.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
-const columns = [
+const columns: TableProps['columns'] = [
   {
     title: 'title1',
     dataIndex: 'a',
@@ -11,7 +12,6 @@ const columns = [
     width: 100,
   },
   {
-    id: '123',
     title: 'title2',
     dataIndex: 'b',
     className: 'b',

docs/examples/colspan-rowspan-legacy.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Table from 'rc-table';
 import '../../assets/index.less';
-import { ColumnsType, RenderedCell } from '@/interface';
+import type { ColumnsType, RenderedCell } from '@/interface';
 
 interface RecordType {
   a?: string;
@@ -116,7 +116,6 @@ const columns: ColumnsType<RecordType> = [
   },
   {
     title: 'Operations',
-    dataIndex: '',
     key: 'f',
     render(o, row, index) {
       if (index === 5) {

docs/examples/colspan-rowspan.tsx

@@ -97,7 +97,6 @@ const columns: ColumnsType<RecordType> = [
   },
   {
     title: 'Operations',
-    dataIndex: '',
     key: 'f',
     render() {
       return <a href="#">Operations</a>;

docs/examples/column-resize.tsx

@@ -3,7 +3,7 @@ import { Resizable } from 'react-resizable';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import 'react-resizable/css/styles.css';
-import { ColumnType } from '@/interface';
+import type { ColumnType } from '@/interface';
 
 const ResizableTitle = props => {
   const { onResize, width, ...restProps } = props;
@@ -31,7 +31,6 @@ interface DemoState {
   columns: ColumnType<RecordType>[];
 }
 
-
 class Demo extends React.Component<{}, DemoState> {
   state: DemoState = {
     columns: [
@@ -61,16 +60,18 @@ class Demo extends React.Component<{}, DemoState> {
     { a: '1333', c: 'eee', d: 2, key: '3' },
   ];
 
-  handleResize = index => (e, { size }) => {
-    this.setState(({ columns }) => {
-      const nextColumns = [...columns];
-      nextColumns[index] = {
-        ...nextColumns[index],
-        width: size.width,
-      };
-      return { columns: nextColumns };
-    });
-  };
+  handleResize =
+    index =>
+    (e, { size }) => {
+      this.setState(({ columns }) => {
+        const nextColumns = [...columns];
+        nextColumns[index] = {
+          ...nextColumns[index],
+          width: size.width,
+        };
+        return { columns: nextColumns };
+      });
+    };
 
   render() {
     const columns = this.state.columns.map((col, index) => ({
@@ -79,7 +80,7 @@ class Demo extends React.Component<{}, DemoState> {
         ({
           width: column.width,
           onResize: this.handleResize(index),
-        } as any),
+        }) as any,
     }));
 
     return (

docs/examples/ellipsis-custom-tooltip.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import 'rc-tooltip/assets/bootstrap.css';
@@ -23,7 +24,7 @@ const createColumns = (length: number) => {
   }));
 };
 
-const columns = [
+const columns: TableProps['columns'] = [
   {
     title: 'name',
     dataIndex: 'name',

docs/examples/ellipsis.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
-const columns = [
+const columns: TableProps['columns'] = [
   { title: 'name', dataIndex: 'name', width: 100, ellipsis: true },
   { title: 'descrption', dataIndex: 'descrption', key: 'descrption 1', ellipsis: true, width: 50 },
   { title: 'descrption', dataIndex: 'descrption', key: 'descrption 2', ellipsis: true },