不能将类型…分配给…不存在属性xxx

chakra的Box组件

一般出现在给第三方组件添加额外属性的时候。

比如我先给 「chakra-ui/react」组件Box添加一个自定义属性，怎么添加类型呢？

import { Box } from '@chakra-ui/react'
<Box customProp={xx}>

这时候肯定是报错的，因为Box的类型没有 customProp，如果我想给它加一个，怎么加呢？还没什么好办法

❌ 如果在一个全局的.d.ts里去重新定义module，就直接覆盖了，而除了Box的其他组件没有被正确导出。

// 全局覆盖了
declare module "@chakra-ui/react" {
//  interface Box { folded?:  boolean}
  export const Box: _chakra_ui_system.ChakraComponent<"div", { folded?:  boolean}>;
  // 这样不行，不能导出其他组件，只有Box是可用的
  // import * as Chakra from '@chakra-ui/react'
  // export default Chakra
}

这个方式目前不行。

Box的定义是这样的：

declare const Box: _chakra_ui_system.ChakraComponent<"div", {}>;

❌ 如果用这种方式：

<Box<_chakra_ui_system.ChakraComponent<'div', { customProp?: boolean }>> customProp={xxx} test1111={1111}></Box>

好像破坏了Box的类型检查，除了customProp不报错了，test1111 也不报错了。

在issue里，有提到

I want to be able to extend the default Chakra Box with custom props/hooks/whatever and later use those extensions in any of the components that the Box composes