例如antd ui 底层ts做了那些限制你知道吗

43 阅读2分钟

Ant Design UI 底层使用 TypeScript 做了很多限制,主要体现在以下几个方面:

组件属性类型限制

  • Ant Design 的组件属性都有严格的类型定义。以Button组件为例,其type属性被定义为"primary" | "default" | "dashed" | "link" | "text"等几种固定的字符串字面量类型,这就限制了type属性只能被赋予这些特定的值,否则在 TypeScript 的类型检查阶段就会报错。
  • size属性通常被定义为"large" | "middle" | "small",限定了按钮的尺寸只能是这三种预设值。

函数参数与返回值类型限制

  • 对于组件的事件处理函数,参数类型也有明确规定。例如,Input组件的onChange事件处理函数,其参数是一个包含target属性的对象,target又包含value等属性,且value的类型会根据输入框的类型(如字符串、数字等)进行相应的定义。
  • 一些组件的方法也有明确的返回值类型定义。比如Modal组件的open方法,返回一个用于操作模态框的对象,该对象包含close等方法,这些方法的参数和返回值也都有清晰的类型定义。

泛型约束

  • 在一些数据展示组件如Table中,使用泛型来支持不同类型的数据。但这些泛型会有一定的约束,比如要求数据是一个对象类型,并且包含特定的属性,如key属性用于唯一标识表格中的每一行数据。
  • 对于Select组件,其选项数据通常通过泛型来定义,要求选项对象包含labelvalue属性,且类型也有相应的限制,如label通常为字符串类型,value可以是字符串、数字或其他自定义类型。

组件嵌套结构限制

  • Ant Design 通过 TypeScript 对组件的嵌套结构进行了一定的限制。例如,Form组件内部通常只能包含Form.Item作为直接子组件,而Form.Item又有特定的属性和嵌套规则。如果开发者试图在Form组件中直接放入其他非Form.Item的组件,TypeScript 会给出错误提示。

  • Menu组件要求其子组件必须是MenuItemSubMenu等特定类型的组件,以保证菜单结构的正确性和一致性。

这些类型限制有助于开发者在编写代码时及时发现错误,提高代码的可读性和可维护性,同时也使得 Ant Design UI 在不同项目中的使用更加规范和稳定。