Recently, I came across an intriguing problem. I am attempting to develop a Vue.js wizard component that takes in configuration objects. The type of demo I have looks like this:
type WizardConfiguration = {
steps: Array<{
name: string,
fields: {
fieldName: string;
}[]
watchers: (FIELD NAMES ARR) => void
}>,
globalWatchers: (ENTIRE STATE FIELD NAMES ARR) => void
}
The issue arises with the watchers line. I want the watchers callback to receive an array of field names specified in the fields array. An example would be:
const config: WizardConfiguration = {
steps: [
{
name: "Step 1",
fields: [
{ fieldName: "Field 1 1" },
{ fieldName: "Field 1 2" }
],
watchers: ([HERE I GET A INTELLISENSE of "Field 1 1", "Field 1 2"]) => {
// do smth
}
},
{
name: "Step 2",
fields: [
{ fieldName: "Field 2 1" },
{ fieldName: "Field 2 2" }
],
watchers: ([HERE I GET A INTELLISENSE of "Field 2 1", "Field 2 2"]) => {
// do smth
}
},
],
globalWatchers: ([HERE I GET INTELLISENSE OF ENTIRE WIZARD STATE - "Field 1 1", "Field 1 2", "Field 2 1", "Field 2 2"])
};
Is it possible to achieve something like this currently in TypeScript?
Thank you.
EDIT 1: The wizard will maintain the state as a reactive object. I aim for the simplest object structure possible, where each fieldName in the wizard is represented by [fieldName]: value in the state object.