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
react-component · Mar 27, 2024 · 178fb19 · 178fb19
1 parent 0c74710
commit 178fb19
Show file tree

Hide file tree

Showing 36 changed files with 174 additions and 84 deletions.
diff --git a/docs/examples/animation.tsx b/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',

diff --git a/docs/examples/aria.tsx b/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',

diff --git a/docs/examples/caption.tsx b/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',

diff --git a/docs/examples/childrenIndent.tsx b/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',

diff --git a/docs/examples/className.tsx b/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',

diff --git a/docs/examples/colspan-rowspan-legacy.tsx 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) {

diff --git a/docs/examples/colspan-rowspan.tsx b/docs/examples/colspan-rowspan.tsx
@@ -97,7 +97,6 @@ const columns: ColumnsType<RecordType> = [
   },
   {
     title: 'Operations',
-    dataIndex: '',
     key: 'f',
     render() {
       return <a href="#">Operations</a>;

diff --git a/docs/examples/column-resize.tsx b/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 (

diff --git a/docs/examples/ellipsis-custom-tooltip.tsx b/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',

diff --git a/docs/examples/ellipsis.tsx b/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 },

diff --git a/docs/examples/expandedRowClassName.tsx b/docs/examples/expandedRowClassName.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 
 import styles from './expandedRowClassName.module.less';
 
-const columns = [
+const columns: TableProps['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

diff --git a/docs/examples/expandedRowRender.tsx b/docs/examples/expandedRowRender.tsx
@@ -57,7 +57,7 @@ const Demo = () => {
     { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
     { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
     { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
-    { title: 'Operation', dataIndex: '', key: 'x', render: renderAction },
+    { title: 'Operation', key: 'x', render: renderAction },
   ];
 
   if (fixColumns) {

diff --git a/docs/examples/fixedColumns-resize.tsx b/docs/examples/fixedColumns-resize.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 import type { ColumnType } from '@/interface';
@@ -45,7 +46,7 @@ const Demo = () => {
   const [isShown, setIsShown] = useState(false);
   const [renderTime, setRenderTime] = useState(0);
   const [isFixed, setIsFixed] = useState(true);
-  const [columns, setColumns] = useState(defaultColumns);
+  const [columns, setColumns] = useState<TableProps<RecordType>['columns']>(defaultColumns);
   const onToggleSideBar = useCallback(() => {
     const s = window.performance.now();
     setIsShown(v => !v);
@@ -82,7 +83,7 @@ const Demo = () => {
     });
   }, []);
 
-  const expandedRowRender = useCallback(({ b, c }) => b || c, []);
+  const expandedRowRender = useCallback<TableProps['expandedRowRender']>(({ b, c }) => b || c, []);
 
   return (
     <div>
@@ -106,7 +107,7 @@ const Demo = () => {
       >
         <div style={{ flex: `0 0 ${isShown ? '10px' : '80px'}` }} />
         <div style={{ flex: 1, overflow: 'hidden' }}>
-          <Table
+          <Table<RecordType>
             columns={columns}
             scroll={isFixed ? { x: 1200 } : null}
             data={data}

diff --git a/docs/examples/grouping-columns-hidden.tsx b/docs/examples/grouping-columns-hidden.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: '姓名',
     dataIndex: 'name',

diff --git a/docs/examples/grouping-columns.tsx b/docs/examples/grouping-columns.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: '姓名',
     dataIndex: 'name',

diff --git a/docs/examples/hide-header.tsx b/docs/examples/hide-header.tsx
@@ -1,10 +1,11 @@
 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', 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',

diff --git a/docs/examples/nested.tsx b/docs/examples/nested.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: 'First Name', dataIndex: ['names', 'first'], key: 'a', width: 100 },
   { title: 'Last Name', dataIndex: ['names', 'last'], key: 'b', width: 100 },
   { title: 'Age', dataIndex: 'age', key: 'c', width: 100 },

diff --git a/docs/examples/react-dnd.tsx b/docs/examples/react-dnd.tsx
@@ -5,9 +5,11 @@ import { createGlobalStyle } from 'styled-components';
 import update from 'immutability-helper';
 import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
+// eslint-disable-next-line @babel/no-unused-expressions
 createGlobalStyle`
   tr.drop-over-downward td {
     border-bottom: 2px dashed red;
@@ -113,9 +115,9 @@ BodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
   }))(BodyRow),
 );
 
-const columns = [
+const 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',

diff --git a/docs/examples/row-hoverable.tsx b/docs/examples/row-hoverable.tsx
@@ -10,14 +10,9 @@ interface RecordType {
 const data = [{ a: 'A' }, { a: 'B' }, { a: 'C' }];
 
 const Demo = () => {
-  const columns: TableProps<any>['columns'] = [
-    {
-      title: 'title',
-      dataIndex: 'a',
-    },
-  ];
+  const columns: TableProps<RecordType>['columns'] = [{ title: 'title', dataIndex: 'a' }];
 
-  return <Table<RecordType> columns={columns} data={data} rowHoverable={false} />;
+  return <Table columns={columns} data={data} rowHoverable={false} />;
 };
 
 export default Demo;
diff --git a/docs/examples/scopeCol.tsx b/docs/examples/scopeCol.tsx
@@ -29,6 +29,8 @@ interface SecondTableRecordType {
   producedVenus?: string;
   soldVenus?: string;
   key?: string;
+  mars?: string;
+  venus?: string;
 }
 
 const secondTableColumns: ColumnsType<SecondTableRecordType> = [

diff --git a/docs/examples/scrollX.tsx b/docs/examples/scrollX.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
+import type { TableProps } from 'rc-table';
 import Table from 'rc-table';
 import '../../assets/index.less';
 
-const columns = [
-  {
-    title: 'title1',
-    dataIndex: 'a',
-    key: 'a',
-    width: 100,
-  },
+const columns: TableProps['columns'] = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
   { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
   { title: 'title4', dataIndex: 'b', key: 'd', width: 100 },

diff --git a/docs/examples/scrollXY.tsx b/docs/examples/scrollXY.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', key: 'a', width: 100 },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
   { title: 'title3', dataIndex: 'c', key: 'c', width: 100 },
@@ -43,12 +44,7 @@ const Demo = () => {
         Trigger Visible
       </button>
       <div style={{ display: visible ? undefined : 'none' }}>
-        <Table
-          style={{ width: 800 }}
-          scroll={{ x: 1500, y: 300 }}
-          columns={columns}
-          data={data}
-        />
+        <Table style={{ width: 800 }} scroll={{ x: 1500, y: 300 }} columns={columns} data={data} />
       </div>
     </div>
   );