Form data TypeScript typing

[d9k]

The library is still missing Form data typings. It has typing for the FormSubmitEvent but uses just Record<string, any> for everything else as a plug replacement, for example:

export interface FormResolverOptions {
    values: Record<string, any>;

export interface FormProps {
    initialValues?: Record<string, any> | undefined;

[d9k]

I came up with temporary solution for project I work on:

TypedForm.ts:

import { type DefineComponent, type EmitFn } from '@primevue/core'
import { Form, type FormEmitsOptions, type FormProps, type FormSlots, type FormSubmitEvent } from '@primevue/forms'

export type TypedFormResolverOptions<DataType, DataKeys = keyof DataType> = {
  values: DataType
  names: DataKeys[]
}

/**
 * Extract needed:
 * https://github.com/microsoft/TypeScript/issues/29295#issuecomment-452125223
 * */
export type DataTypeKeys<DataType> = Extract<keyof DataType, string | number | Symbol>

export type DataTypeKeysToMetadata<DataType, F = any> = { [key in DataTypeKeys<DataType>]?: F }

export type TypedFormErrors<DataType> = DataTypeKeysToMetadata<DataType>

export type TypedFormResolverPlainResult<DataType> = {
  values?: DataType
  errors?: TypedFormErrors<DataType>
}

export type TypedFormResolver<DataType> = (options: TypedFormResolverOptions<DataType>) =>
Promise<TypedFormResolverPlainResult<DataType>> | TypedFormResolverPlainResult<DataType> | undefined

export type TypedFormProps<DataType> = Omit<FormProps, 'initialValues' | 'resolver'> & {
  initialValues?: DataType
  resolver?: TypedFormResolver<DataType>
}

export type TypedFormSubmitEvent<DataType> = FormSubmitEvent<DataType>

export type TypedFormSubmit<DataType> = (event: TypedFormSubmitEvent<DataType>) => void

export type TypedFormEmitsOptions<DataType> = Omit<FormEmitsOptions, 'submit'> & {
  submit: TypedFormSubmit<DataType>
}

export declare type TypeFormEmits<DataType> = EmitFn<TypedFormEmitsOptions<DataType>>

export type TypedFormType<DataType> = DefineComponent<TypedFormProps<DataType>, FormSlots, TypeFormEmits<DataType>>

export function TypedForm<DataType>() {
  return Form as TypedFormType<DataType>
}

export type TypedFormTypes<DataType> = {
  FormType: TypedFormType<DataType>
  PropsType: TypedFormProps<DataType>
  ResolverType: TypedFormResolver<DataType>
  ErrorsType: TypedFormErrors<DataType>
  SubmitType: TypedFormSubmit<DataType>
}

Usage:

export type MyFormData = {
  username: string
  year_of_birth: number;
}

export const MyForm = TypedForm<MyFormData>()
export type MyFormTypes = TypedFormTypes<MyFormData>

const MyFormResolver: MyFormTypes['ResolverType'] = ({ values }) => {
// . . . . .

const onMyFormSubmit: MyFormTypes['SubmitType'] = async ({ valid, values }) => {
// . . . . .

Then just use <MyForm> instead of <Form> in the Vue template.