くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > yup > yupでカスタムメソッドを追加する(addMethod)

yupでカスタムメソッドを追加する(addMethod)

yup

yupを使ってvalidation ruleを適用するとき、
独自のmethodを追加したいなぁと思ったときの備忘録(*´ω｀*)

公式のREADME.mdではこんな感じ

// globals.d.ts
declare module 'yup' {
  interface StringSchema<TType, TContext, TDefault, TFlags> {
    append(appendStr: string): this;
  }
}

// app.ts
import { addMethod, string } from 'yup';

addMethod(string, 'append', function append(appendStr: string) {
  return this.transform((value) => `${value}${appendStr}`);
});

string().append('~~~~').cast('hi'); // 'hi~~~~'
  • addMethodを追加すると、独自関数を追加できる
  • StringSchemaを拡張すると、型補完も効く

ただ、
declare function setLocale(custom: LocaleObject): void;
のほうは拡張する方法がわからなかった。。

addMethod(string, 'alphanumeric', function append(appendStr: string) {
  return this.matches(/^[a-zA-Z0-9_]+$/, {
    message: ({ label }) =>
      (label ? label + "には" : "") +
      `英数字とアンダーバーのみを入力してください`,
  });
});

なので、messageを設定する必要があるかも。

以上!! これでだいぶ楽になるように。。(*´ω｀*)

参考にしたサイト様