Fix implicit any error for Table

components/pagination/Pagination.tsx

@@ -7,12 +7,12 @@ import Select from '../select';
 import MiniSelect from './MiniSelect';
 
 export interface PaginationProps {
-  total: number;
+  total?: number;
   defaultCurrent?: number;
   current?: number;
   defaultPageSize?: number;
   pageSize?: number;
-  onChange?: (page: number, pageSize: number) => void;
+  onChange?: (page: number, pageSize?: number) => void;
   showSizeChanger?: boolean;
   pageSizeOptions?: string[];
   onShowSizeChange?: (current: number, size: number) => void;

components/table/Column.tsx

@@ -1,28 +1,4 @@
 import * as React from 'react';
-
+import { ColumnProps } from './interface';
-export interface ColumnProps<T> {
-  title?: React.ReactNode;
-  key?: string;
-  dataIndex?: string;
-  render?: (text: any, record: T, index: number) => React.ReactNode;
-  filters?: { text: string; value: string, children?: any[] }[];
-  onFilter?: (value: any, record: T) => boolean;
-  filterMultiple?: boolean;
-  filterDropdown?: React.ReactNode;
-  filterDropdownVisible?: boolean;
-  onFilterDropdownVisibleChange?: (visible: boolean) => void;
-  sorter?: boolean | ((a: any, b: any) => number);
-  defaultSortOrder?: 'ascend' | 'descend';
-  colSpan?: number;
-  width?: string | number;
-  className?: string;
-  fixed?: boolean | ('left' | 'right');
-  filterIcon?: React.ReactNode;
-  filteredValue?: any[];
-  sortOrder?: boolean | ('ascend' | 'descend');
-  children?: ColumnProps<T>[];
-  onCellClick?: (record: T, event: any) => void;
-  onCell?: (record: T) => any;
-}
 
 export default class Column<T> extends React.Component<ColumnProps<T>, React.ComponentState> {}

components/table/SelectionBox.tsx

@@ -1,21 +1,12 @@
 import * as React from 'react';
 import Checkbox from '../checkbox';
 import Radio from '../radio';
-import { Store } from './createStore';
+import { SelectionBoxProps, SelectionBoxState } from './interface';
 
-export interface SelectionBoxProps {
+export default class SelectionBox extends React.Component<SelectionBoxProps, SelectionBoxState> {
-  store: Store;
-  type: string;
-  defaultSelection: string[];
-  rowIndex: string;
-  disabled?: boolean;
-  onChange: (e) => void;
-}
-
-export default class SelectionBox extends React.Component<SelectionBoxProps, any> {
   unsubscribe: () => void;
 
-  constructor(props) {
+  constructor(props: SelectionBoxProps) {
     super(props);
 
     this.state = {
@@ -41,7 +32,7 @@ export default class SelectionBox extends React.Component<SelectionBoxProps, any
     });
   }
 
-  getCheckState(props) {
+  getCheckState(props: SelectionBoxProps) {
     const { store, defaultSelection, rowIndex } = props;
     let checked = false;
     if (store.getState().selectionDirty) {

components/table/SelectionCheckboxAll.tsx

@@ -1,36 +1,17 @@
 import * as React from 'react';
 import Checkbox from '../checkbox';
-import { Store } from './createStore';
 import Dropdown from '../dropdown';
 import Menu from '../menu';
 import Icon from '../icon';
 import classNames from 'classnames';
+import { SelectionCheckboxAllProps, SelectionCheckboxAllState, SelectionItem } from './interface';
 
-export interface SelectionDecorator {
+export default class SelectionCheckboxAll<T> extends
-  key: string;
+  React.Component<SelectionCheckboxAllProps<T>, SelectionCheckboxAllState> {
-  text: React.ReactNode;
-  onSelect: (changeableRowKeys: string[]) => void;
-}
-
-export interface SelectionCheckboxAllProps {
-  store: Store;
-  locale: any;
-  disabled: boolean;
-  getCheckboxPropsByItem: (item: any, index: number) => any;
-  getRecordKey: (record: any, index?: number) => string;
-  data: any[];
-  prefixCls: string | undefined;
-  onSelect: (key: string, index: number, selectFunc: any) => void;
-  hideDefaultSelections?: boolean;
-  selections?: SelectionDecorator[] | boolean;
-  getPopupContainer: (triggerNode?: Element) => HTMLElement;
-}
-
-export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> {
   unsubscribe: () => void;
-  defaultSelections: SelectionDecorator[];
+  defaultSelections: SelectionItem[];
 
-  constructor(props) {
+  constructor(props: SelectionCheckboxAllProps<T>) {
     super(props);
 
     this.defaultSelections = props.hideDefaultSelections ? [] : [{
@@ -53,7 +34,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     this.subscribe();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: SelectionCheckboxAllProps<T>) {
     this.setCheckState(nextProps);
   }
 
@@ -70,7 +51,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     });
   }
 
-  checkSelection(data, type, byDefaultChecked) {
+  checkSelection(data: T[], type: string, byDefaultChecked: boolean) {
     const { store, getCheckboxPropsByItem, getRecordKey } = this.props;
     // type should be 'every' | 'some'
     if (type === 'every' || type === 'some') {
@@ -84,7 +65,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return false;
   }
 
-  setCheckState(props) {
+  setCheckState(props: SelectionCheckboxAllProps<T>) {
     const checked = this.getCheckState(props);
     const indeterminate = this.getIndeterminateState(props);
     if (checked !== this.state.checked) {
@@ -95,7 +76,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     }
   }
 
-  getCheckState(props) {
+  getCheckState(props: SelectionCheckboxAllProps<T>) {
     const { store, data } = props;
     let checked;
     if (!data.length) {
@@ -112,7 +93,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return checked;
   }
 
-  getIndeterminateState(props) {
+  getIndeterminateState(props: SelectionCheckboxAllProps<T>) {
     const { store, data } = props;
     let indeterminate;
     if (!data.length) {
@@ -132,12 +113,12 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
     return indeterminate;
   }
 
-  handleSelectAllChagne = (e) => {
+  handleSelectAllChagne = (e: React.ChangeEvent<HTMLInputElement>) => {
     let checked = e.target.checked;
     this.props.onSelect(checked ? 'all' : 'removeAll', 0, null);
   }
 
-  renderMenus(selections: SelectionDecorator[]) {
+  renderMenus(selections: SelectionItem[]) {
     return selections.map((selection, index) => {
       return (
         <Menu.Item

components/table/Table.tsx

@@ -5,23 +5,34 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Pagination, { PaginationProps } from '../pagination';
 import Icon from '../icon';
-import Spin, { SpinProps } from '../spin';
+import Spin from '../spin';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import warning from '../_util/warning';
 import FilterDropdown from './filterDropdown';
 import createStore, { Store } from './createStore';
 import SelectionBox from './SelectionBox';
-import SelectionCheckboxAll, { SelectionDecorator } from './SelectionCheckboxAll';
+import SelectionCheckboxAll from './SelectionCheckboxAll';
-import Column, { ColumnProps } from './Column';
+import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import createBodyRow from './createBodyRow';
 import { flatArray, treeMap, flatFilter, normalizeColumns } from './util';
+import {
+  TableProps,
+  TableState,
+  TableComponents,
+  RowSelectionType,
+  TableLocale,
+  ColumnProps,
+  CompareFn,
+  TableStateFilters,
+  SelectionItemSelectFn,
+} from './interface';
 
 function noop() {
 }
 
-function stopPropagation(e) {
+function stopPropagation(e: React.SyntheticEvent<any>) {
   e.stopPropagation();
   if (e.nativeEvent.stopImmediatePropagation) {
     e.nativeEvent.stopImmediatePropagation();
@@ -39,72 +50,7 @@ const defaultPagination = {
  */
 const emptyObject = {};
 
-export type TableColumnConfig<T> = ColumnProps<T>;
+export default class Table<T> extends React.Component<TableProps<T>, TableState<T>> {
-
-export interface TableComponents {
-  table?: any;
-  header?: {
-    wrapper?: any;
-    row?: any;
-    cell?: any;
-  };
-  body?: {
-    wrapper?: any;
-    row?: any;
-    cell?: any;
-  };
-}
-
-export interface TableRowSelection<T> {
-  type?: 'checkbox' | 'radio';
-  selectedRowKeys?: string[] | number[];
-  onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
-  getCheckboxProps?: (record: T) => Object;
-  onSelect?: (record: T, selected: boolean, selectedRows: Object[]) => any;
-  onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
-  onSelectInvert?: (selectedRows: Object[]) => any;
-  selections?: SelectionDecorator[] | boolean;
-  hideDefaultSelections?: boolean;
-  fixed?: boolean;
-}
-
-export interface TableProps<T> {
-  prefixCls?: string;
-  dropdownPrefixCls?: string;
-  rowSelection?: TableRowSelection<T>;
-  pagination?: PaginationProps | boolean;
-  size?: 'default' | 'middle' | 'small';
-  dataSource?: T[];
-  components?: TableComponents;
-  columns?: ColumnProps<T>[];
-  rowKey?: string | ((record: T, index: number) => string);
-  rowClassName?: (record: T, index: number) => string;
-  expandedRowRender?: any;
-  defaultExpandedRowKeys?: string[] | number[];
-  expandedRowKeys?: string[] | number[];
-  expandIconAsCell?: boolean;
-  expandIconColumnIndex?: number;
-  onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void;
-  onExpand?: (expanded: boolean, record: T) => void;
-  onChange?: (pagination: PaginationProps | boolean, filters: string[], sorter: Object) => any;
-  loading?: boolean | SpinProps;
-  locale?: Object;
-  indentSize?: number;
-  onRowClick?: (record: T, index: number, event: Event) => any;
-  onRow?: (record: T, index: number) => any;
-  useFixedHeader?: boolean;
-  bordered?: boolean;
-  showHeader?: boolean;
-  footer?: (currentPageData: Object[]) => React.ReactNode;
-  title?: (currentPageData: Object[]) => React.ReactNode;
-  scroll?: { x?: boolean | number | string, y?: boolean | number | string };
-  childrenColumnName?: string;
-  bodyStyle?: React.CSSProperties;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export default class Table<T> extends React.Component<TableProps<T>, any> {
   static Column = Column;
   static ColumnGroup = ColumnGroup;
 
@@ -141,12 +87,14 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     showHeader: true,
   };
 
-  CheckboxPropsCache: Object;
+  CheckboxPropsCache: {
+    [key: string]: any;
+  };
   store: Store;
   columns: ColumnProps<T>[];
   components: TableComponents;
 
-  constructor(props) {
+  constructor(props: TableProps<T>) {
     super(props);
 
     warning(
@@ -155,7 +103,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       'fixed columns instead, see: https://u.ant.design/fixed-columns.',
     );
 
-    this.columns = props.columns || normalizeColumns(props.children);
+    this.columns = props.columns || normalizeColumns(props.children as React.ReactChildren);
 
     this.createComponents(props.components);
 
@@ -174,7 +122,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  getCheckboxPropsByItem = (item, index) => {
+  getCheckboxPropsByItem = (item: T, index: number) => {
     const { rowSelection = {} } = this.props;
     if (!rowSelection.getCheckboxProps) {
       return {};
@@ -193,12 +141,12 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       return [];
     }
     return this.getFlatData()
-      .filter((item, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).defaultChecked)
+      .filter((item: T, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).defaultChecked)
       .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
   }
 
-  getDefaultPagination(props) {
+  getDefaultPagination(props: TableProps<T>) {
-    const pagination = props.pagination || {};
+    const pagination: PaginationProps = props.pagination || {};
     return this.hasPagination(props) ?
       {
         ...defaultPagination,
@@ -208,8 +156,8 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       } : {};
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: TableProps<T>) {
-    this.columns = nextProps.columns || normalizeColumns(nextProps.children);
+    this.columns = nextProps.columns || normalizeColumns(nextProps.children as React.ReactChildren);
     if ('pagination' in nextProps || 'pagination' in this.props) {
       this.setState(previousState => {
         const newPagination = {
@@ -265,7 +213,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     this.createComponents(nextProps.components, this.props.components);
   }
 
-  onRow = (record, index) => {
+  onRow = (record: T, index: number) => {
     const { onRow, prefixCls } = this.props;
     const custom = onRow ? onRow(record, index) : {};
     return {
@@ -276,8 +224,8 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     };
   }
 
-  setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }: any) {
+  setSelectedRowKeys(selectedRowKeys: string[], { selectWay, record, checked, changeRowKeys }: any) {
-    const { rowSelection = {} } = this.props;
+    const { rowSelection = {} as any } = this.props;
     if (rowSelection && !('selectedRowKeys' in rowSelection)) {
       this.store.setState({ selectedRowKeys });
     }
@@ -307,7 +255,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return (props || this.props).pagination !== false;
   }
 
-  isFiltersChanged(filters) {
+  isFiltersChanged(filters: TableStateFilters) {
     let filtersChanged = false;
     if (Object.keys(filters).length !== Object.keys(this.state.filters).length) {
       filtersChanged = true;
@@ -321,26 +269,33 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return filtersChanged;
   }
 
-  getSortOrderColumns(columns?) {
+  getSortOrderColumns(columns?: ColumnProps<T>[]) {
-    return flatFilter(columns || this.columns || [], column => 'sortOrder' in column);
+    return flatFilter(
+      columns || this.columns || [],
+      (column: ColumnProps<T>) => 'sortOrder' in column,
+    );
   }
 
-  getFilteredValueColumns(columns?) {
+  getFilteredValueColumns(columns?: ColumnProps<T>[]) {
-    return flatFilter(columns || this.columns || [], column => typeof column.filteredValue !== 'undefined');
+    return flatFilter(
+      columns || this.columns || [],
+      (column: ColumnProps<T>) => typeof column.filteredValue !== 'undefined',
+    );
   }
 
-  getFiltersFromColumns(columns?) {
+  getFiltersFromColumns(columns?: ColumnProps<T>[]) {
-    let filters = {};
+    let filters: any = {};
-    this.getFilteredValueColumns(columns).forEach(col => {
+    this.getFilteredValueColumns(columns).forEach((col: ColumnProps<T>) => {
-      filters[this.getColumnKey(col)] = col.filteredValue;
+      const colKey = this.getColumnKey(col) as string;
+      filters[colKey] = col.filteredValue;
     });
     return filters;
   }
 
-  getDefaultSortOrder(columns?) {
+  getDefaultSortOrder(columns?: ColumnProps<T>[]) {
     const definedSortState = this.getSortStateFromColumns(columns);
 
-    let defaultSortedColumn = flatFilter(columns || [], column => column.defaultSortOrder != null)[0];
+    let defaultSortedColumn = flatFilter(columns || [], (column: ColumnProps<T>) => column.defaultSortOrder != null)[0];
 
     if (defaultSortedColumn && !definedSortState.sortColumn) {
       return {
@@ -352,10 +307,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return definedSortState;
   }
 
-  getSortStateFromColumns(columns?) {
+  getSortStateFromColumns(columns?: ColumnProps<T>[]) {
     // return first column which sortOrder is not falsy
     const sortedColumn =
-      this.getSortOrderColumns(columns).filter(col => col.sortOrder)[0];
+      this.getSortOrderColumns(columns).filter((col: ColumnProps<T>) => col.sortOrder)[0];
 
     if (sortedColumn) {
       return {
@@ -376,8 +331,9 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
         typeof sortColumn.sorter !== 'function') {
       return;
     }
-    return (a, b) => {
+
-      const result = sortColumn.sorter(a, b);
+    return (a: T, b: T) => {
+      const result = (sortColumn!.sorter as CompareFn<T>)(a, b);
       if (result !== 0) {
         return (sortOrder === 'descend') ? -result : result;
       }
@@ -385,7 +341,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     };
   }
 
-  toggleSortOrder(order, column) {
+  toggleSortOrder(order: string, column: ColumnProps<T>) {
     let { sortColumn, sortOrder } = this.state;
     // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题
     let isSortColumn = this.isSortColumn(column);
@@ -419,18 +375,18 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     }
   }
 
-  handleFilter = (column, nextFilters) => {
+  handleFilter = (column: ColumnProps<T>, nextFilters: string[]) => {
     const props = this.props;
     let pagination = { ...this.state.pagination };
     const filters = {
       ...this.state.filters,
-      [this.getColumnKey(column)]: nextFilters,
+      [this.getColumnKey(column) as string]: nextFilters,
     };
     // Remove filters not in current columns
     const currentColumnKeys: string[] = [];
     treeMap(this.columns, c => {
       if (!c.children) {
-        currentColumnKeys.push(this.getColumnKey(c));
+        currentColumnKeys.push(this.getColumnKey(c) as string);
       }
     });
     Object.keys(filters).forEach((columnKey) => {
@@ -442,7 +398,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     if (props.pagination) {
       // Reset current prop
       pagination.current = 1;
-      pagination.onChange(pagination.current);
+      pagination.onChange!(pagination.current);
     }
 
     const newState = {
@@ -451,7 +407,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     };
     const filtersToSetState = { ...filters };
     // Remove filters which is controlled
-    this.getFilteredValueColumns().forEach(col => {
+    this.getFilteredValueColumns().forEach((col: ColumnProps<T>) => {
       const columnKey = this.getColumnKey(col);
       if (columnKey) {
         delete filtersToSetState[columnKey];
@@ -485,7 +441,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  handleSelect = (record, rowIndex, e) => {
+  handleSelect = (record: T, rowIndex: number, e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked;
     const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
@@ -493,7 +449,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     if (checked) {
       selectedRowKeys.push(this.getRecordKey(record, rowIndex));
     } else {
-      selectedRowKeys = selectedRowKeys.filter((i) => key !== i);
+      selectedRowKeys = selectedRowKeys.filter((i: string) => key !== i);
     }
     this.store.setState({
       selectionDirty: true,
@@ -505,7 +461,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  handleRadioSelect = (record, rowIndex, e) => {
+  handleRadioSelect = (record: T, rowIndex: number, e: React.ChangeEvent<HTMLInputElement>) => {
     const checked = e.target.checked;
     const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
@@ -521,7 +477,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  handleSelectRow = (selectionKey, index, onSelectFunc) => {
+  handleSelectRow = (selectionKey: string, index: number, onSelectFunc: SelectionItemSelectFn) => {
     const data = this.getFlatCurrentPageData();
     const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
     const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
@@ -588,7 +544,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  handlePageChange = (current, ...otherArguments) => {
+  handlePageChange = (current: number, ...otherArguments: any[]) => {
     const props = this.props;
     let pagination = { ...this.state.pagination };
     if (current) {
@@ -596,7 +552,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     } else {
       pagination.current = pagination.current || 1;
     }
-    pagination.onChange(pagination.current, ...otherArguments);
+    pagination.onChange!(pagination.current, ...otherArguments);
 
     const newState = {
       pagination,
@@ -626,11 +582,11 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     }
   }
 
-  renderSelectionBox = (type) => {
+  renderSelectionBox = (type: RowSelectionType | undefined) => {
-    return (_, record, index) => {
+    return (_: any, record: T, index: number) => {
       let rowIndex = this.getRecordKey(record, index); // 从 1 开始
       const props = this.getCheckboxPropsByItem(record, index);
-      const handleChange = (e) => {
+      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         type === 'radio' ? this.handleRadioSelect(record, rowIndex, e) :
                            this.handleSelect(record, rowIndex, e);
       };
@@ -650,10 +606,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     };
   }
 
-  getRecordKey = (record, index): string => {
+  getRecordKey = (record: T, index: number) => {
     const rowKey = this.props.rowKey;
     const recordKey = (typeof rowKey === 'function') ?
-      rowKey(record, index) :  record[rowKey as string];
+      rowKey(record, index) :  (record as any)[rowKey as string];
     warning(recordKey !== undefined,
       'Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key,' +
       'see https://u.ant.design/table-row-key',
@@ -665,7 +621,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return ReactDOM.findDOMNode(this) as HTMLElement;
   }
 
-  renderRowSelection(locale) {
+  renderRowSelection(locale: TableLocale) {
     const { prefixCls, rowSelection } = this.props;
     const columns = this.columns.concat();
     if (rowSelection) {
@@ -716,19 +672,19 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return columns;
   }
 
-  getColumnKey(column, index?) {
+  getColumnKey(column: ColumnProps<T>, index?: number) {
     return column.key || column.dataIndex || index;
   }
 
-  getMaxCurrent(total) {
+  getMaxCurrent(total: number) {
     const { current, pageSize } = this.state.pagination;
-    if ((current - 1) * pageSize >= total) {
+    if ((current! - 1) * pageSize! >= total) {
-      return Math.floor((total - 1) / pageSize) + 1;
+      return Math.floor((total - 1) / pageSize!) + 1;
     }
     return current;
   }
 
-  isSortColumn(column) {
+  isSortColumn(column: ColumnProps<T>) {
     const { sortColumn } = this.state;
     if (!column || !sortColumn) {
       return false;
@@ -736,12 +692,12 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return this.getColumnKey(sortColumn) === this.getColumnKey(column);
   }
 
-  renderColumnsDropdown(columns, locale) {
+  renderColumnsDropdown(columns: ColumnProps<T>[], locale: TableLocale) {
     const { prefixCls, dropdownPrefixCls } = this.props;
     const { sortOrder } = this.state;
     return treeMap(columns, (originColumn, i) => {
       let column = { ...originColumn };
-      let key = this.getColumnKey(column, i);
+      let key = this.getColumnKey(column, i) as string;
       let filterDropdown;
       let sortButton;
       if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
@@ -797,9 +753,9 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     });
   }
 
-  handleShowSizeChange = (current, pageSize) => {
+  handleShowSizeChange = (current: number, pageSize: number) => {
     const pagination = this.state.pagination;
-    pagination.onShowSizeChange(current, pageSize);
+    pagination.onShowSizeChange!(current, pageSize);
     const nextPagination = {
       ...pagination,
       pageSize,
@@ -860,7 +816,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return [pagination, filters, sorter];
   }
 
-  findColumn(myKey) {
+  findColumn(myKey: string | number) {
     let column;
     treeMap(this.columns, c => {
       if (this.getColumnKey(c) === myKey) {
@@ -872,16 +828,16 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
 
   getCurrentPageData() {
     let data = this.getLocalData();
-    let current;
+    let current: number;
-    let pageSize;
+    let pageSize: number;
     let state = this.state;
     // 如果没有分页的话，默认全部展示
     if (!this.hasPagination()) {
       pageSize = Number.MAX_VALUE;
       current = 1;
     } else {
-      pageSize = state.pagination.pageSize;
+      pageSize = state.pagination.pageSize as number;
-      current = this.getMaxCurrent(state.pagination.total || data.length);
+      current = this.getMaxCurrent(state.pagination.total || data.length) as number;
     }
 
     // 分页
@@ -904,9 +860,9 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return flatArray(this.getCurrentPageData());
   }
 
-  recursiveSort(data, sorterFn) {
+  recursiveSort(data: T[], sorterFn: (a: any, b: any) => number): T[] {
     const { childrenColumnName = 'children' } = this.props;
-    return data.sort(sorterFn).map(item => (item[childrenColumnName] ? {
+    return data.sort(sorterFn).map((item: any) => (item[childrenColumnName] ? {
       ...item,
       [childrenColumnName]: this.recursiveSort(item[childrenColumnName], sorterFn),
     } : item));
@@ -954,7 +910,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     }
   }
 
-  renderTable = (contextLocale) => {
+  renderTable = (contextLocale: TableLocale) => {
     const locale = { ...contextLocale, ...this.props.locale };
     const { style, className, prefixCls, showHeader, ...restProps } = this.props;
     const data = this.getCurrentPageData();

components/table/createBodyRow.tsx

@@ -21,7 +21,7 @@ export default function createTableRow(Component = 'tr') {
     private store: Store;
     private unsubscribe: () => void;
 
-    constructor(props) {
+    constructor(props: BodyRowProps) {
       super(props);
 
       this.store = props.store;

components/table/createStore.tsx

@@ -4,11 +4,11 @@ export interface Store {
   subscribe: (listener: () => void) => () => void;
 }
 
-export default function createStore(initialState): Store {
+export default function createStore(initialState: object): Store {
   let state = initialState;
   const listeners: any[] = [];
 
-  function setState(partial) {
+  function setState(partial: object) {
     state = {
       ...state,
       ...partial,
@@ -22,7 +22,7 @@ export default function createStore(initialState): Store {
     return state;
   }
 
-  function subscribe(listener) {
+  function subscribe(listener: () => any) {
     listeners.push(listener);
 
     return function unsubscribe() {

components/table/filterDropdown.tsx

@@ -8,26 +8,9 @@ import Icon from '../icon';
 import Checkbox from '../checkbox';
 import Radio from '../radio';
 import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper';
+import { FilterMenuProps, FilterMenuState, ColumnProps, ColumnFilterItem } from './interface';
 
-export interface FilterMenuProps {
+export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState> {
-  locale: any;
-  selectedKeys: string[];
-  column: {
-    filterMultiple?: boolean,
-    filterDropdown?: React.ReactNode,
-    filters?: { text: string; value: string, children?: any[] }[],
-    filterDropdownVisible?: boolean,
-    onFilterDropdownVisibleChange?: (visible: boolean) => any,
-    fixed?: boolean | string,
-    filterIcon?: React.ReactNode;
-  };
-  confirmFilter: (column: Object, selectedKeys: string[]) => any;
-  prefixCls: string;
-  dropdownPrefixCls: string;
-  getPopupContainer: (triggerNode?: Element) => HTMLElement;
-}
-
-export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   static defaultProps = {
     handleFilter() {},
     column: {},
@@ -35,7 +18,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
 
   neverShown: boolean;
 
-  constructor(props) {
+  constructor(props: FilterMenuProps<T>) {
     super(props);
 
     const visible = ('filterDropdownVisible' in props.column) ?
@@ -53,7 +36,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     this.setNeverShown(column);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: FilterMenuProps<T>) {
     const { column } = nextProps;
     this.setNeverShown(column);
     const newState = {} as {
@@ -64,14 +47,14 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
       newState.selectedKeys = nextProps.selectedKeys;
     }
     if ('filterDropdownVisible' in column) {
-      newState.visible = column.filterDropdownVisible;
+      newState.visible = column.filterDropdownVisible as boolean;
     }
     if (Object.keys(newState).length > 0) {
       this.setState(newState);
     }
   }
 
-  setNeverShown = (column) => {
+  setNeverShown = (column: ColumnProps<T>) => {
     const rootNode = ReactDOM.findDOMNode(this);
     const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`);
     if (filterBelongToScrollBody) {
@@ -83,11 +66,11 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     }
   }
 
-  setSelectedKeys = ({ selectedKeys }) => {
+  setSelectedKeys = ({ selectedKeys }: { selectedKeys: string[] }) => {
     this.setState({ selectedKeys });
   }
 
-  setVisible(visible) {
+  setVisible(visible: boolean) {
     const { column } = this.props;
     if (!('filterDropdownVisible' in column)) {
       this.setState({ visible });
@@ -108,7 +91,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     this.confirmFilter();
   }
 
-  onVisibleChange = (visible) => {
+  onVisibleChange = (visible: boolean) => {
     this.setVisible(visible);
     if (!visible) {
       this.confirmFilter();
@@ -121,7 +104,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     }
   }
 
-  renderMenuItem(item) {
+  renderMenuItem(item: ColumnFilterItem) {
     const { column } = this.props;
     const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
     const input = multiple ? (
@@ -143,7 +126,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     return filters.some(item => !!(item.children && item.children.length > 0));
   }
 
-  renderMenus(items) {
+  renderMenus(items: ColumnFilterItem[]): React.ReactElement<any>[] {
     return items.map(item => {
       if (item.children && item.children.length > 0) {
         const { keyPathOfSelectedItem } = this.state;
@@ -161,7 +144,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     });
   }
 
-  handleMenuItemClick = (info) => {
+  handleMenuItemClick = (info: { keyPath: string, key: string }) => {
     if (info.keyPath.length <= 1) {
       return;
     }
@@ -210,7 +193,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
           onDeselect={this.setSelectedKeys}
           selectedKeys={this.state.selectedKeys}
         >
-          {this.renderMenus(column.filters)}
+          {this.renderMenus(column.filters!)}
         </Menu>
         <div className={`${prefixCls}-dropdown-btns`}>
           <a

components/table/index.tsx

@@ -1,11 +1,5 @@
 import Table from './Table';
 
-export { ColumnProps } from './Column';
+export * from './interface';
-export { ColumnGroupProps } from './ColumnGroup';
-export { FilterMenuProps } from './filterDropdown';
-export { FilterDropdownMenuWrapperProps } from './FilterDropdownMenuWrapper';
-export { SelectionBoxProps } from './SelectionBox';
-export { SelectionCheckboxAllProps } from './SelectionCheckboxAll';
-export { TableProps, TableRowSelection, TableColumnConfig } from './Table';
 
 export default Table;

components/table/interface.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { PaginationProps } from '../pagination';
+import { SpinProps } from '../spin';
+import { Store } from './createStore';
+
+export type CompareFn<T> = ((a: T, b: T) => number);
+export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] };
+
+export interface ColumnProps<T> {
+  title?: React.ReactNode;
+  key?: React.Key;
+  dataIndex?: string;
+  render?: (text: any, record: T, index: number) => React.ReactNode;
+  filters?: ColumnFilterItem[];
+  onFilter?: (value: any, record: T) => boolean;
+  filterMultiple?: boolean;
+  filterDropdown?: React.ReactNode;
+  filterDropdownVisible?: boolean;
+  onFilterDropdownVisibleChange?: (visible: boolean) => void;
+  sorter?: boolean | CompareFn<T>;
+  defaultSortOrder?: 'ascend' | 'descend';
+  colSpan?: number;
+  width?: string | number;
+  className?: string;
+  fixed?: boolean | ('left' | 'right');
+  filterIcon?: React.ReactNode;
+  filteredValue?: any[];
+  sortOrder?: boolean | ('ascend' | 'descend');
+  children?: ColumnProps<T>[];
+  onCellClick?: (record: T, event: any) => void;
+  onCell?: (record: T) => any;
+}
+
+export interface TableComponents {
+  table?: any;
+  header?: {
+    wrapper?: any;
+    row?: any;
+    cell?: any;
+  };
+  body?: {
+    wrapper?: any;
+    row?: any;
+    cell?: any;
+  };
+}
+
+export interface TableLocale {
+  filterTitle?: string;
+  filterConfirm?: string;
+  filterReset?: string;
+  emptyText?: string;
+  selectAll?: string;
+  selectInvert?: string;
+}
+
+export type RowSelectionType = 'checkbox' | 'radio';
+export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any;
+
+export interface TableRowSelection<T> {
+  type?: RowSelectionType;
+  selectedRowKeys?: string[] | number[];
+  onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
+  getCheckboxProps?: (record: T) => Object;
+  onSelect?: SelectionSelectFn<T>;
+  onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
+  onSelectInvert?: (selectedRows: Object[]) => any;
+  selections?: SelectionItem[] | boolean;
+  hideDefaultSelections?: boolean;
+  fixed?: boolean;
+}
+
+export interface TableProps<T> {
+  prefixCls?: string;
+  dropdownPrefixCls?: string;
+  rowSelection?: TableRowSelection<T>;
+  pagination?: PaginationProps | false;
+  size?: 'default' | 'middle' | 'small';
+  dataSource?: T[];
+  components?: TableComponents;
+  columns?: ColumnProps<T>[];
+  rowKey?: string | ((record: T, index: number) => string);
+  rowClassName?: (record: T, index: number) => string;
+  expandedRowRender?: any;
+  defaultExpandedRowKeys?: string[] | number[];
+  expandedRowKeys?: string[] | number[];
+  expandIconAsCell?: boolean;
+  expandIconColumnIndex?: number;
+  onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void;
+  onExpand?: (expanded: boolean, record: T) => void;
+  onChange?: (pagination: PaginationProps | boolean, filters: string[], sorter: Object) => any;
+  loading?: boolean | SpinProps;
+  locale?: Object;
+  indentSize?: number;
+  onRowClick?: (record: T, index: number, event: Event) => any;
+  onRow?: (record: T, index: number) => any;
+  useFixedHeader?: boolean;
+  bordered?: boolean;
+  showHeader?: boolean;
+  footer?: (currentPageData: Object[]) => React.ReactNode;
+  title?: (currentPageData: Object[]) => React.ReactNode;
+  scroll?: { x?: boolean | number | string, y?: boolean | number | string };
+  childrenColumnName?: string;
+  bodyStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactChildren;
+}
+
+export interface TableStateFilters {
+  [key: string]: string[];
+}
+
+export interface TableState<T> {
+  pagination: PaginationProps;
+  filters: TableStateFilters;
+  sortColumn: ColumnProps<T> | null;
+  sortOrder: string;
+}
+
+export type SelectionItemSelectFn = (key: string[]) => any;
+
+export interface SelectionItem {
+  key: string;
+  text: React.ReactNode;
+  onSelect: SelectionItemSelectFn;
+}
+
+export interface SelectionCheckboxAllProps<T> {
+  store: Store;
+  locale: any;
+  disabled: boolean;
+  getCheckboxPropsByItem: (item: any, index: number) => any;
+  getRecordKey: (record: any, index?: number) => string;
+  data: T[];
+  prefixCls: string | undefined;
+  onSelect: (key: string, index: number, selectFunc: any) => void;
+  hideDefaultSelections?: boolean;
+  selections?: SelectionItem[] | boolean;
+  getPopupContainer: (triggerNode?: Element) => HTMLElement;
+}
+
+export interface SelectionCheckboxAllState {
+  checked: boolean;
+  indeterminate: boolean;
+}
+
+export interface SelectionBoxProps {
+  store: Store;
+  type?: RowSelectionType;
+  defaultSelection: string[];
+  rowIndex: string;
+  disabled?: boolean;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export interface SelectionBoxState {
+  checked?: boolean;
+}
+
+export interface FilterMenuProps<T> {
+  locale: TableLocale;
+  selectedKeys: string[];
+  column: ColumnProps<T>;
+  confirmFilter: (column: ColumnProps<T>, selectedKeys: string[]) => any;
+  prefixCls: string;
+  dropdownPrefixCls: string;
+  getPopupContainer: (triggerNode?: Element) => HTMLElement;
+}
+
+export interface FilterMenuState {
+  selectedKeys: string[];
+  keyPathOfSelectedItem: {[key: string]: string};
+  visible?: boolean;
+}

components/table/util.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-export function flatArray(data: Object[] = [], childrenName = 'children') {
+export function flatArray(data: any[] = [], childrenName = 'children') {
-  const result: Object[] = [];
+  const result: any[] = [];
-  const loop = (array) => {
+  const loop = (array: any[]) => {
     array.forEach(item => {
       if (item[childrenName]) {
         const newItem = { ...item };
@@ -20,14 +20,14 @@ export function flatArray(data: Object[] = [], childrenName = 'children') {
   return result;
 }
 
-export function treeMap(tree: Object[], mapper: Function, childrenName = 'children') {
+export function treeMap<Node>(tree: Node[], mapper: (node: Node, index: number) => any, childrenName = 'children') {
-  return tree.map((node, index) => {
+  return tree.map((node: any, index) => {
-    const extra = {};
+    const extra: any = {};
     if (node[childrenName]) {
       extra[childrenName] = treeMap(node[childrenName], mapper, childrenName);
     }
     return {
-      ...mapper(node, index),
+      ...mapper(node as Node, index),
       ...extra,
     };
   });
@@ -46,7 +46,7 @@ export function flatFilter(tree: any[], callback: Function) {
   }, []);
 }
 
-export function normalizeColumns(elements) {
+export function normalizeColumns(elements: React.ReactChildren) {
   const columns: any[] = [];
   React.Children.forEach(elements, (element) => {
     if (!React.isValidElement(element)) {

typings/custom-typings.d.ts

@@ -78,6 +78,8 @@ declare module 'rc-form*';
 
 declare module 'react-lazy-load';
 
+declare module 'dom-closest';
+
 declare module "*.json" {
   const value: any;
   export const version: string;