Export validation-messages function arguments type

[benlind]

Reproduction

https://formkit.link/597bd9ea3d20d2412382ef92d0fb4415

Describe the bug

I am trying to use TypeScript to define a validation-messages function, but I cannot find a type that satisfies the function arguments. The closest type I can find is FormKitValidationI18NArgs from validation.ts:

<script setup>
import { FormKitValidationI18NArgs } from '@formkit/validation'

function lengthValidationMessage ({
  name,
  args,
}: FormKitValidationI18NArgs) {
  return `${name} cannot be longer than ${args[1]} characters`
}
</script>

<template>
  <FormKit
    type="text"
    label="FormKit Input"
    help="edit me to get started"
    :validation="[
      ['length', '0', '49'],
    ]"
    :validation-messages="{
      length: lengthValidationMessage,
    }"
  />
</template>

However, that FormKitValidationI18NArgs type is an array of objects, whereas the function accepts a single object. TypeScript fails with errors like "Property 'name' does not exist on type 'FormKitValidationI18NArgs'."

The closest I can get is to manually define a custom type:

import { FormKitNode } from '@formkit/core'

type FormKitValidationFunctionArgs = {
  node: FormKitNode
  name: string
  args: any[]
  message?: string
}

function lengthValidationMessage ({
  name,
  args,
}: FormKitValidationFunctionArgs) {
  return `${name} cannot be longer than ${args[1]} characters`
}

Would it be possible to export a new type that defines only these object params?

Environment

• OS: MacOS Ventura
• Browser: Chrome
• Version: 0.16.5

[fenilli]

This is the type for validation-messages but maybe it should have a better TS type for it @justin-schroeder.

[justin-schroeder]

If you type you function instead of arguments you’ll get the appropriate typings. The rule type is here: https://formkit.com/api-reference/formkit-validation#formkitvalidationrule

[benlind]

@justin-schroeder , that would work for rules but I am talking about messages. If you look at the docs, you'll see that there are two rule types: FormKitValidationRules and FormKitValidationRule. But there is only a single message type: FormKitValidationMessages. There is no singular FormKitValidationMessage type.

[benlind]

@justin-schroeder , could we re-open this issue?

[justin-schroeder]

You have a good github avatar, that counts for like 78 brownie points — let’s reopen this thang.

[justin-schroeder]

Aright @benlind — it’s available now:

import type { FormKitValidationMessage } from '@formkit/validation'

Thank you!

[benlind]

Ha, thanks for the quick turnaround!

Unfortunately I'm not sure that's exactly what I needed. If I try this:

import type { FormKitValidationMessage } from '@formkit/validation'

function lengthValidationMessage ({
  name,
  args,
}: FormKitValidationMessage) {
  return `${name} cannot be longer than ${args[1]} characters`
}

That gives a TS error on args: Property 'args' does not exist on type 'FormKitValidationMessage'.

And then when I go to use that validation function in my template I get Type '({ name, args, }: FormKitValidationMessage) => string' is not assignable to type 'string | ((ctx: { node: FormKitNode<unknown>; name: string; args: any[]; }) => string)'.

I think what I actually need is a version of FormKitValidationI18NArgs that is not an array, just that object.

Does that make sense?

[justin-schroeder]

Why not type the function itself?

[justin-schroeder]

Also FWIW FormKitValidationI18NArgs is exported already

[benlind]

I haven't been able to figure out how to type the function. The FormKitValidationRule type doesn't apply, since this is a custom message, not a custom rule. The docs don't include a type for the customMessage function.

Really what I'm looking for is for this portion of the validationMessages prop type to be exported somewhere.

The closest I can get is by manually creating that type:

type FormKitValidationMessageFunction = (
  (ctx: {
    node: FormKitNode
    name: string
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    args: any[]
  }) => string
)

const lengthValidationMessage: FormKitValidationMessageFunction = ({
  name,
  args,
}) => {
  return `${name} cannot be longer than ${args[1]} characters`
}

[justin-schroeder]

Here, I worked up an example repository for ya: https://github.com/justin-schroeder/validation-message-typing

[benlind]

Aha! Now I see what you meant by typing the function itself with FormKitValidationMessage. When I saw (...args: FormKitValidationI18NArgs): string I didn't recognize it as a function type.

This is working now:

import { FormKitValidationMessage } from '@formkit/validation'

const lengthValidationMessage: FormKitValidationMessage = ({
  name,
  args,
}) => {
  return `${name} cannot be longer than ${args[1]} characters`
}

Thanks for bearing with me. :) It'd be great if the docs were updated to include types someday.