Trying to implement some intricate typing for a project I'm developing, and wondering if it's achievable with TypesScript.
The project in question is a form generator based on schemas and promises, using Vue and TS. It handles UI rendering, validation, data collection from users, all in a functional manner.
Let me illustrate with a simple example:
const { formData, isCompleted } = await formApi.createForm({
fields: [
{
"key": "email",
"label": "Email address",
"type": "text",
"required": true,
"validators": { "email": isEmail, },
"size": 8
},
{
"key": "password",
"label": "Password",
"type": "password",
"required": true
},
]
})
In this case, the formData will look like:
{ email: "...", password: "..." }
What I aim to do is type FormData as
{ email: string, password: string }
instead of the current { [key: string]: any }
type that's being returned.
This example may be basic, but the library can handle highly complex forms, including nested objects/arrays, conditional rendering, and extensive customization.
UPDATE
After reviewing feedback, I realize that the TypeScript implementation varies greatly based on schema complexity.
Here's an advanced example showcasing the library's capabilities (Live stackblitz example : https://stackblitz.com/edit/vue-xyzwq9?file=src/components/SimpleDependency.vue):