组件设计

antd

目前 antd FormItem需要作为直接绑定表单域数据绑定组件，又要作为表单域布局组件，承接了两个可以完全分离的责任，给自定义带来了不便，且不够语义化，优化方式为分离出一个 FormItemLayout & FormItemDataBind，两个组件，反而比较合适，当然现有的 Item 也可以保留，这样可以方便不需要内部布局的场景:
目前的困境就是若要定制除布局外（如rules）config此处应该分离，上面的Item应该是一个仅负责布局的组件，下一个Item应该是一个仅负责数据绑定的组件。
image.png

Typescript

嵌套泛型
如果本身组件是一个泛型函数，若再用 memo，forwardRef 包裹，则无法传递泛型参数（当前ts不支持），此时比较合适的做法就是在 export 处做断言，声明一个伪造但符合实际类型的组件签名类型作为导出类型：
image.png
更加工整的伪造类型写法：
这里因为不需要泛型嵌套，所以使用了React的工具泛型，如果需要，则使用上方写法：

  1. export type FakeClassComponent = React.ComponentClass<
  2.   PropsNeeded & {
  3.     // wrappedComponentRef: React.ClassAttributes<Test>['ref'];
  4.     wrappedComponentRef: React.Ref<Test>;
  5.   }
  6. >;
  8. export type FakeFunctionComponent = React.ForwardRefExoticComponent<
  9.   PropsNeeded & {
  10.     wrappedComponentRef: React.Ref<Test>;
  11.   }
  12. >;

反正现在ts的泛型只能注入一处，所以如果有 R>这样的类型结构，只能写成R或RP，就是采用类型断言，自行解开泛型的嵌套，保证只有一层泛型。

WTF

LSP

一种交互协议
像 ts 的智能提示也是基于 LSP 实现的：
image.png