From d6eeaabf5ea9d0a96e87cdfc947df8e8ed83974b Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 27 Jul 2020 16:40:53 +0800 Subject: [PATCH] add typescript table row genericity --- typings/index.d.ts | 12 +++--- typings/typing-tests/Table.tsx | 79 +++++++++++++++++++--------------- 2 files changed, 51 insertions(+), 40 deletions(-) diff --git a/typings/index.d.ts b/typings/index.d.ts index d268dce59..b740dadf3 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -603,7 +603,7 @@ declare namespace ElementReact { export class Slider extends ElementReactLibs.Component { } // Table - interface TableColumn { + interface TableColumn { label?: string prop?: string property?: string @@ -619,11 +619,11 @@ declare namespace ElementReact { fixed?: boolean | string filterMethod?: () => void filters?: Object[] - render?: (data? :Object, column? :Object, index? :number) => void + render?: (data? :RowType, column? :Object, index? :number) => void } - interface TableProps extends ElementReactLibs.ComponentProps<{}> { - columns?: TableColumn[] - data?: Object[] + interface TableProps extends ElementReactLibs.ComponentProps<{}> { + columns?: TableColumn[] + data?: RowType[] height?: number stripe?: boolean border?: boolean @@ -635,7 +635,7 @@ declare namespace ElementReact { onSelectAll?(): void onSelectChange?(): void } - export class Table extends ElementReactLibs.Component { } + export class Table extends ElementReactLibs.Component, {}> { } // Switch interface SwitchProps extends ElementReactLibs.ComponentProps<{}> { diff --git a/typings/typing-tests/Table.tsx b/typings/typing-tests/Table.tsx index 262c6a5d5..4e5c4aa6c 100644 --- a/typings/typing-tests/Table.tsx +++ b/typings/typing-tests/Table.tsx @@ -2,13 +2,56 @@ import * as React from 'react' import { Table } from 'element-react' import { Table as TableNext } from 'element-react/next' +interface TestTableRow { + date: string; + name: string; + address: string; +} + +const testData: TestTableRow[] = [{ + date: '2016-05-02', + name: '王小虎', + address: '上海市普陀区金沙江路 1518 弄' +}, { + date: '2016-05-04', + name: '王小虎', + address: '上海市普陀区金沙江路 1517 弄' +}, { + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄' +}, { + date: '2016-05-03', + name: '王小虎', + address: '上海市普陀区金沙江路 1516 弄' +}, { + date: '2016-05-02', + name: '王小虎', + address: '上海市普陀区金沙江路 1518 弄' +}, { + date: '2016-05-04', + name: '王小虎', + address: '上海市普陀区金沙江路 1517 弄' +}, { + date: '2016-05-01', + name: '王小虎', + address: '上海市普陀区金沙江路 1519 弄' +}, { + date: '2016-05-03', + name: '王小虎', + address: '上海市普陀区金沙江路 1516 弄' +}] + class Component extends React.Component<{}, {}> { state = { columns: [ { label: "日期", prop: "date", - width: 180 + width: 180, + render: function (data: TestTableRow, columns, index) { + return data.date; + } }, { label: "姓名", @@ -20,39 +63,7 @@ class Component extends React.Component<{}, {}> { prop: "address" } ], - data: [{ - date: '2016-05-02', - name: '王小虎', - address: '上海市普陀区金沙江路 1518 弄' - }, { - date: '2016-05-04', - name: '王小虎', - address: '上海市普陀区金沙江路 1517 弄' - }, { - date: '2016-05-01', - name: '王小虎', - address: '上海市普陀区金沙江路 1519 弄' - }, { - date: '2016-05-03', - name: '王小虎', - address: '上海市普陀区金沙江路 1516 弄' - }, { - date: '2016-05-02', - name: '王小虎', - address: '上海市普陀区金沙江路 1518 弄' - }, { - date: '2016-05-04', - name: '王小虎', - address: '上海市普陀区金沙江路 1517 弄' - }, { - date: '2016-05-01', - name: '王小虎', - address: '上海市普陀区金沙江路 1519 弄' - }, { - date: '2016-05-03', - name: '王小虎', - address: '上海市普陀区金沙江路 1516 弄' - }] + data: testData } render() { const { columns, data } = this.state