Yupで独自のmethodを追加する

これに対するTypeScriptの対応

code:例.ts

yup.addMethod<yup.StringSchema>(yup.string, 'emailMax', function () {

return this.max(

validLength.EMAIL_MAX_LENGTH,

${validLength.EMAIL_MAX_LENGTH}文字以内で入力してください

);

});

これを利用すると型エラーになる

code:使用側.ts

yup.string().katakana();

こうする

code:ts

declare module 'yup' {

interface StringSchema {

emailMax(this: StringSchema): StringSchema;

usernameMax(this: StringSchema): StringSchema;

onlyAlphaNumAndDotUnderbar(this: StringSchema): StringSchema;

notLastPeriod(this: StringSchema): StringSchema;

}

}

code:ts

yup.addMethod<yup.StringSchema>(yup.string, 'phoneNumber', function () {

return this.test(

'phoneNumber',

'電話番号の形式が正しくありません',

function (value) { // value :: string|null

if (value == null) return true;

const pn = new PhoneNumber(value, 'JP');

return pn.isValid();

}

);

});

例えば「最大の長さ」を使いまわししてaddMethodする

code:ts

const v = {

usernameMax: 50, // ユーザ名の最大文字数

emailMax: 100

};

(Object.keys(v) as (keyof typeof v)[]).map(key => {

yup.addMethod<yup.StringSchema>(yup.string, key, function () {

});

});