文件模块

commonjs, amd, es modules, others

首先，我们需要澄清这些模块系统的不一致性。我将会提供给你我当前的建议，以及消除一些你的顾虑。 你可以根据不同的 module 选项来把 TypeScript 编译成不同的 JavaScript 模块类型，这有一些你可以忽略的东西：
  • AMD：不要使用它，它仅能在浏览器工作；
  • SystemJS：这是一个好的实验，已经被 ES 模块替代；
  • ES 模块：它并没有准备好。
使用 module: commonjs 选项来替代这些模式，将会是一个好的主意。 怎么书写 TypeScript 模块呢？，这也是一件让人困惑的事。在今天我们应该这么做：
  • 放弃使用 import/require 语法即 import foo = require(‘foo’) 写法
  • 推荐使用 ES 模块语法

Omit 忽略一些类型，并用自己的类型去替代

  1. type MyFilterDropdownProps = Omit<FilterDropdownProps, "selectedKeys" | "selectedKeys"> & {
  2.   selectedKeys: CustomProps
  3.   setSelectedKeys: (selectedKeys: CustomProps[]) => void
  4. }

这个类型就是将 FilterDropdownProps里忽略它的 selectedKeys selectedKeys属性类型，然后用 &来定义自己的这俩属性类型。

这时候是改动了 FilterDropdownProps ， 但是这个使用在antd table 的 column里，牵一发而动全身，column也得改.

同样的用omit和&

  1. type MyColumnType<T> = Omit<ColumnType<T>, 'filterDropdown'> & {
  2.     filterDropdown?: React.ReactNode | ((props: MyFilterDropdownProps) => React.ReactNode);
  3. }

而 column又是Table的属性

  1. type MyTableProps<T> = Omit<TableProps<T>, 'column'> & {
  2.     columns?: MyColumnType<T>;
  3. }

然后可以相使用改动后的 MyTable了

  1. type User = {
  2.     //
  3. }
  5. // MyTable 可以像普通的Table 一样使用, 因为其类型是我们改造过的 TableProps
  6. // 因此 Table 可以接收的属性 MyTable 也同样可以接收
  7. const MyTable: FC<MyTableProps<User>> = (props) => {
  8.     const { xxx, xxx, xxx, ...restProps } = props
  10.     const columns: MyColumnType<User>[] = [{
  11.         //,
  12.         //,
  13.         filterDropdown: ({selectedKeys, setSelectedKeys}) => {
  14.             // 此时的 selectedKeys 跟 setSelectedKeys 接收的类型已经被改造成 TagProps 了
  15.             // 而不是 antd table 定义的类型了
  16.         })
  17.     }]
  19.     return <Table {...restProps} columns={columns} />
  20. }

链接

从这里看，如果我想去拓展某个组件的属性类型，只能引用原始类型，调整后，去封装原始组件，而不能视图修改原始组件的类型？