React抽象组件(ES6)，它呈现一个组件数组.如何为它创建一个d.ts文件?

Question

我正在尝试为下一个组件创建声明文件。使用JS ES6编写。

function Column({ className, layout }) {
function renderLayout() {
return layout.map((item, index) => {
const Component = item?.component || item;
return (
<Component
{...item?.options}
// eslint-disable-next-line react/no-array-index-key
key={index}
/>
);
});
}
return (
<div className={className} >
{renderLayout()}
</div>
);
}

声明示例:

<Column
className='test'
layout={[
{
component: Input, // It can use options
options: {  // It can have a custom shape. How to define types for options?
first: 'test' 
}
},
{
component: Date, // It can use options
options: { // It can have a custom shape. How to define types for options?
second: 'test', 
newValue: { index: 3 } 
}
}
]}
/>
<Column
className='test'
layout={[Input, Date]}
/>

选项有问题财产。我不知道如何为对象定义类型，因为它可以根据组件具有不同的类型用户通过。

输入>日期,-是组件的例子，它可以被任何其他组件替换。

My declaration file.

interface ILayout {
component?: React.ElementType;
options?: any; // <---- Here is a problem. How to replace any with defined types.
}
interface ColumnProps {
className?: string;
layout?: (ILayout|React.ElementType)[];
}
export class Column extends React.Component<ColumnProps> {} 

Answer 1

可以将ILayout设置为条件类型:

type ILayout = {
component?: InputType;
options?: OptionsForInputType
} | {
component?: DateType;
options?: OptionsForDateType
}