VeeValidate の型定義

仕事で Nuxt.js を使っていて、バリデーションのライブラリにVeeValidateというやつを使っている。

最新版は v4 なんだけど、v4 は Vue3.0 で使ってねということなので Vue2 系を使っている現在は v3 を使わざるを得ない。

入力フォームに入力された 2 つの日付を比較し、1 つ目の日付よりも 2 つ目の日付のほうが過去になってしまう場合にエラーにしたいというバリデーションを作るときに型定義はうまくいかなかったのでメモ。

Cross Field Validation | VeeValidate

↑ にあるように書くと、

extend('compareDates', {
  params: ['afterDate'],
  validate: (value, { afterDate }) => {
    return dayjs(afterDate).diff(dayjs(value), 'day') >= 0
  },
})

みたいな感じなんだけど、validate の第二引数で型が違うと怒られてしまった。

なんか色々探してみたんだけど、

Typescript error in extend function when parameters · Issue #2475 · logaretm/vee-validate

これやったら直った。

extend('compareDates', {
  params: ['afterDate'],
  validate: (value, { afterDate }: Record<string, any>) => {
    return dayjs(afterDate).diff(dayjs(value), 'day') >= 0
  },
})

Record<K, T>は、K型のプロパティでT型の値を持つ Object を作るので、Record<string, any>は{ [key: string]: any }という型を作っていて、{ afterDate }は{ [afterDate: string]: any }ということになる。

ここの any をどうにか変えたいと思った(今回は Date)、無理だった。

以上メモ。