I am trying to create a declaration file for the next component. It was written with 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>
);
}
Example of declaration:
<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]}
/>
I have a problem with options property. I do not know how to define types for the object as it can have different types depending on the component the user pass with.
Input , Date - are examples of components, it can be replaced with any other components.
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> {}
You can make ILayout
a conditional type:
type ILayout = {
component?: InputType;
options?: OptionsForInputType
} | {
component?: DateType;
options?: OptionsForDateType
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.