chore: optimize table typescript support (#3087)

* chore: optimize table typescript support

* chore: update table type

* fix: table type error

* fix: columns shuold not have default value

* fix: sortDirections and scroll should not have default value

* chore: rowSelectionType as tuple

Author: Amour1688

components/table/Column.tsx

@@ -1,9 +1,9 @@
 import { defineComponent } from 'vue';
-import { ColumnProps } from './interface';
+import { columnProps } from './interface';
 
 export default defineComponent({
   name: 'ATableColumn',
-  props: ColumnProps,
+  props: columnProps,
   render() {
     return null;
   },

components/table/Table.tsx

@@ -17,11 +17,11 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
 import BaseMixin from '../_util/BaseMixin';
 import { defaultConfigProvider } from '../config-provider';
 import {
-  TableProps,
+  tableProps,
   TableComponents,
   TableState,
-  ITableProps,
-  IColumnProps,
+  TableProps,
+  ColumnProps,
   TableStateFilters,
 } from './interface';
 import Pagination from '../pagination';
@@ -38,15 +38,15 @@ function stopPropagation(e) {
   e.stopPropagation();
 }
 
-function getRowSelection(props: ITableProps) {
+function getRowSelection(props: TableProps) {
   return props.rowSelection || {};
 }
 
-function getColumnKey(column: IColumnProps, index?: number) {
+function getColumnKey(column: ColumnProps, index?: number) {
   return column.key || column.dataIndex || index;
 }
 
-function isSameColumn(a: IColumnProps, b: IColumnProps): boolean {
+function isSameColumn(a: ColumnProps, b: ColumnProps): boolean {
   if (a && b && a.key && a.key === b.key) {
     return true;
   }
@@ -94,16 +94,16 @@ function isTheSameComponents(components1: TableComponents = {}, components2: Tab
   );
 }
 
-function getFilteredValueColumns(state: TableState, columns?: IColumnProps) {
+function getFilteredValueColumns(state: TableState, columns?: ColumnProps) {
   return flatFilter(
     columns || (state || {}).columns || [],
-    (column: IColumnProps) => typeof column.filteredValue !== 'undefined',
+    (column: ColumnProps) => typeof column.filteredValue !== 'undefined',
   );
 }
 
-function getFiltersFromColumns(state: TableState, columns: IColumnProps) {
+function getFiltersFromColumns(state: TableState, columns: ColumnProps) {
   const filters = {};
-  getFilteredValueColumns(state, columns).forEach((col: IColumnProps) => {
+  getFilteredValueColumns(state, columns).forEach((col: ColumnProps) => {
     const colKey = getColumnKey(col);
     filters[colKey] = col.filteredValue;
   });
@@ -117,26 +117,28 @@ function isFiltersChanged(state: TableState, filters: TableStateFilters[]) {
   return Object.keys(filters).some(columnKey => filters[columnKey] !== state.filters[columnKey]);
 }
 
+export const defaultTableProps = initDefaultProps(tableProps, {
+  dataSource: [],
+  useFixedHeader: false,
+  // rowSelection: null,
+  size: 'default',
+  loading: false,
+  bordered: false,
+  indentSize: 20,
+  locale: {},
+  rowKey: 'key',
+  showHeader: true,
+  sortDirections: ['ascend', 'descend'],
+  childrenColumnName: 'children',
+});
+
 export default defineComponent({
   name: 'Table',
   mixins: [BaseMixin],
   inheritAttrs: false,
   Column,
   ColumnGroup,
-  props: initDefaultProps(TableProps, {
-    dataSource: [],
-    useFixedHeader: false,
-    // rowSelection: null,
-    size: 'default',
-    loading: false,
-    bordered: false,
-    indentSize: 20,
-    locale: {},
-    rowKey: 'key',
-    showHeader: true,
-    sortDirections: ['ascend', 'descend'],
-    childrenColumnName: 'children',
-  }),
+  props: defaultTableProps,
 
   setup() {
     return {

components/table/index.tsx

@@ -1,5 +1,5 @@
 import { App, defineComponent } from 'vue';
-import T from './Table';
+import T, { defaultTableProps } from './Table';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import {} from './interface';
@@ -9,7 +9,7 @@ const Table = defineComponent({
   name: 'ATable',
   Column: T.Column,
   ColumnGroup: T.ColumnGroup,
-  props: T.props,
+  props: defaultTableProps,
   inheritAttrs: false,
   methods: {
     normalize(elements = []) {

components/table/interface.ts

@@ -1,21 +1,21 @@
+import { ExtractPropTypes, PropType } from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { PaginationProps as getPaginationProps } from '../pagination';
 import { SpinProps as getSpinProps } from '../spin';
 import { Store } from './createStore';
 import { tuple } from '../_util/type';
-import { ExtractPropTypes } from 'vue';
 
 const PaginationProps = getPaginationProps();
 const SpinProps = getSpinProps();
 
-// export type CompareFn<T> = ((a: T, b: T) => number);
+export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
 export const ColumnFilterItem = PropTypes.shape({
   text: PropTypes.string,
   value: PropTypes.string,
   children: PropTypes.array,
 }).loose;
 
-export const ColumnProps = {
+export const columnProps = {
   title: PropTypes.VNodeChild,
   key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   dataIndex: PropTypes.string,
@@ -52,7 +52,7 @@ export const ColumnProps = {
   // onHeaderCell?: (props: ColumnProps<T>) => any;
 };
 
-export type IColumnProps = Partial<ExtractPropTypes<typeof ColumnProps>>;
+export type ColumnProps = Partial<ExtractPropTypes<typeof columnProps>>;
 
 export interface TableComponents {
   table?: any;
@@ -80,10 +80,10 @@ export const TableLocale = PropTypes.shape({
   collapse: PropTypes.string,
 }).loose;
 
-export const RowSelectionType = PropTypes.oneOf(['checkbox', 'radio']);
+export const RowSelectionType = PropTypes.oneOf(tuple('checkbox', 'radio'));
 // export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any;
 
-export const TableRowSelection = {
+export const tableRowSelection = {
   type: RowSelectionType,
   selectedRowKeys: PropTypes.array,
   // onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
@@ -101,10 +101,12 @@ export const TableRowSelection = {
   columnTitle: PropTypes.any,
 };
 
-export const TableProps = {
+export type SortOrder = 'descend' | 'ascend';
+
+export const tableProps = {
   prefixCls: PropTypes.string,
   dropdownPrefixCls: PropTypes.string,
-  rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, Object]),
+  rowSelection: PropTypes.oneOfType([PropTypes.shape(tableRowSelection).loose, Object]),
   pagination: withUndefined(
     PropTypes.oneOfType([
       PropTypes.shape({
@@ -117,7 +119,9 @@ export const TableProps = {
   size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')),
   dataSource: PropTypes.array,
   components: PropTypes.object,
-  columns: PropTypes.array,
+  columns: {
+    type: Array as PropType<ColumnProps>,
+  },
   rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   rowClassName: PropTypes.func,
   expandedRowRender: PropTypes.any,
@@ -137,10 +141,18 @@ export const TableProps = {
   showHeader: PropTypes.looseBool,
   footer: PropTypes.func,
   title: PropTypes.func,
-  scroll: PropTypes.object,
+  scroll: {
+    type: Object as PropType<{
+      x?: boolean | number | string;
+      y?: boolean | number | string;
+      scrollToFirstRowOnChange?: boolean;
+    }>,
+  },
   childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  bodyStyle: PropTypes.any,
-  sortDirections: PropTypes.array,
+  bodyStyle: PropTypes.style,
+  sortDirections: {
+    type: Array as PropType<SortOrder[]>,
+  },
   tableLayout: PropTypes.string,
   getPopupContainer: PropTypes.func,
   expandIcon: PropTypes.func,
@@ -153,9 +165,9 @@ export const TableProps = {
   // children?: React.ReactNode;
 };
 
-export type ITableRowSelection = Partial<ExtractPropTypes<typeof TableRowSelection>>;
+export type TableRowSelection = Partial<ExtractPropTypes<typeof tableRowSelection>>;
 
-export type ITableProps = Partial<ExtractPropTypes<typeof TableProps>>;
+export type TableProps = Partial<ExtractPropTypes<typeof tableProps>>;
 
 export interface TableStateFilters {
   [key: string]: string[];
@@ -164,9 +176,9 @@ export interface TableStateFilters {
 export interface TableState {
   pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>;
   filters?: TableStateFilters;
-  sortColumn?: Partial<ExtractPropTypes<typeof ColumnProps>> | null;
+  sortColumn?: ColumnProps | null;
   sortOrder?: string;
-  columns?: IColumnProps[];
+  columns?: ColumnProps[];
 }
 
 // export type SelectionItemSelectFn = (key: string[]) => any;