AutoComplete组件属性检查问题

来源：9-4 新的挑战 - AutoComplete组件分析

qq_慕仙7238509

2020-04-21

  interface SelectData {
	  value: string;
  }
  type SelectDataType<T = {}> = T & SelectData;
  data: () => SelectDataType[] | Promise<SelectDataType[]>;
  上面代码为AutoComplete组件里面对属性data的定义
  <AutoComplete
        data={()=>[
          { label: "a", value: "a" },
          { label: "b", value: "b" },
          { label: "c", value: "c" },
        ]}
        renderOption={(item) => {
          return item + "  hahah";
        }}
      />

为什么当我把data去掉函数直接写成数组 AutoComplete组件里面data填数组label属性会检测出错？（不能将类型“{ label: string; value: string; }”分配给类型“SelectData”。对象文字可以只指定已知属性，并且“label”不在类型“SelectData”中）
难道是写成函数形式会让ts规避一些检查吗？

data:  SelectDataType[] | Promise<SelectDataType[]>;

写回答

2回答

张轩

2020-04-24

已采纳

同学你好你的这个问题可以简化成我写的这个问题

//img.mukewang.com/szimg/5ea24d5409116f9e23361574.jpg

因为对这个类型兼容性的检查方式跟 interface 一样的，只要在字段上满足类型的要求就好了，多出来内容没关系，有一些特殊的场景下，多出来内容会报错，场景文档在这里 https://www.typescriptlang.org/docs/handbook/interfaces.html#excess-property-checks

在这种情况下，ts 认为大概率是我们犯错了，这个 object 是在那里现成声明的，只能给那个地方用，声明额外字段是不合理的

qq_慕仙7238509

非常感谢！

2020-04-24

共1条回复

张轩

2020-04-22

同学请提供一下你出错的代码吧我在本地没有复现这个问题谢谢

qq_慕仙7238509

函数形式组件定义页 interface SelectData { value: string; } type SelectDataType = T & SelectData; interface AutoCompleteProps extends Omit { data: () => SelectDataType[] | Promise; onSelect?: (item: SelectDataType, index: number) => void; renderOption?: (item: string) => React.ReactNode; } 使用页 [ { label: "a", value: "a" }, { label: "aa", value: "aa" }, { label: "biao", value: "biao" }, ]} renderOption={(item) => { return item + " hahah"; }} /> 数组形式 interface SelectData { value: string; } type SelectDataType = T & SelectData; interface AutoCompleteProps extends Omit { data: SelectDataType[] | Promise; onSelect?: (item: SelectDataType, index: number) => void; renderOption?: (item: string) => React.ReactNode; } 使用页 { return item + " hahah"; }} />

2020-04-22

共1条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

查看课程

相似问题

老师，请问如何让组件支持 ref 属性？

回答 2

老师您好，请问我想编写antd的代理组件，有什么好的解决方案吗？

回答 2

Menu组件会覆盖MenuItem的index属性

回答 3

既然Hello组件的props在这里是 string，指定string就可，为什么要用interface来定义？

回答 1

组件prop的传入问题。

回答 1

打开慕课网App查看更多内容