Warning: I've never used Typescript before.
I'm working with web components and I'm interested in creating a file that defines the properties (and potentially events) that will affect the component. I've done research on Typescript and I like the concise way it seems to be able to describe the shape of an object. This is what I have so far:
/* defining the keys (and which are optional) */
interface IX {
hidden?: boolean;
selected?: boolean;
disabled?: boolean;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
onChange?: (event: any): void;
}
/* setting defaults */
export const ix: IX = {
hidden: false,
selected: false,
disabled: false,
}
While I'm not currently using Typescript in my project (nor am I entirely convinced that I need to in order for this to work) I'm looking for a solution that would take a file that looks like the above and output some schema that defines the component's shape. Perhaps something like this:
export const ixShape = {
hidden: {
type: 'boolean',
optional: true,
'default': false,
},
/* and so on */
}
This can happen at build time, doesn't need to be run time. If I need a bundler like Rollup, I can leverage that also. What solutions are out there currently (if any)?
