Yup
逆引き
Yupの微妙なところ
APIがキモい
バリバリmutable
addMehotdのやり方がPHPみがある
文字列でmethodを追加していくのでconflictが生じうる
TypeScriptと微妙に相性が悪い
型は付くが、付けるためひと手間必要
Unionがない
切り替えができるようなフォームのvalidationが不便
代替策もしょぼい
methodが多すぎて全体を把握するのが大変
割と、技術選定ミスったな、という気持ちで使い続けているmrsekut.icon
validationの定義を使い回す
変数として定義する
code:ts
const validPost = yup.string(). ...;
使い分け
後者の方法で複数作った場合に組み合わせることはできない
例えば、 validPost.validPostのようなことはできない
validPost.required()のようなことはできる
そのため、前者のほうがより汎用的である
Yupのデータ型
mixed
共通のもの
全てのデータ型を許容する
required()など
string
number
boolean
date
array
object
recordmrsekut.icon
error
code:ts
try {
const a = valid.valid.validateSync(values, { abortEarly: false });
console.log({ a });
return true;
} catch (err) {
if (err instanceof ValidationError) {
console.log({ err });
err.inner.forEach(e => {
setError(e.path, e.message);
});
}
schemaから型を導出できる
code:ts
type FormData = InferType<typeof validation>;
これ便利内容に見えて割と雑いんだよなmrsekut.icon
必要ない部分もちゃんとschemaを作らないと
Yup上で型のキャストができないのが非常にやりづらい
addMethodで、stringに対してschmaを作って、
内部でtransformして、numberを返す。
こうしたい
yup.string().hoge().piyo()
hoge ::string -> number
piyo :: number -> number
見た感じ、こういう内部での型変換は無理で、hogeの後には必ずstringのものしか連結できない感じがする
↑これが必要になるのは、例えば数値を取得するfieldで、
「全角数値と半角数値を両方許容する」がデータとしてはnumberとして扱いたい
という時に必要になる
yupは、全角数値は、stringでしか受け取れない
その内部でtransformして、numberに変換したい
piyoの例としては、「ここの金額の上限は10000円以内」というmethodを作っていた時に、
これは普通numberに対して、作るが、これがhogeに対して利用できない(stringなので)
stringとして用意すると、ただの、n < 10000のような大小比較をわざわざ正規表現とかで書かないといけなくなる
([0-9]|[1-9][0-9]{1,3}|10000)とか可読性が悪すぎる
BlobやDataURLのような既存の型をどうやって使うか
objectのschemaをcloneかなんかして、それの一部をrequireにしたい
code:ts
const A = yup.object({a:.., b:.., c:.., d:..})
const requireBCfromA = A.. // Aのうち、bとcだけrequiredにしたschemaが欲しい
Yup API
Schema API
validation
error messageの改善
transform
validationの自作
validateしたあとに、データの変換をする
string()で受けたものをnumber()に変換するとか
when
兄弟のfieldを見て条件分岐する
cast()
int.cast('5')のようにしたら、'5'が5にcastされるイメージ
引数が、schemaの型にcastされる
mixed
mixed()は型上では0引数なはずなのに、docsでは引数を取っている #?? code:ts
let objectIdSchema = yup
.mixed((input): input is ObjectId => input instanceof ObjectId) // error
.transform((value: any, input, ctx) => {
..
});
1つ目のmethodは↑の型じゃないといけない？
yup.hoge()とは書けず、yup.string().hoge()と書かないといけない？
validationの定義ファイルをどういう風に記述するのが良いか？
error messageやカスタムmethodなど
docsの読み方
ながすぎ
Schema basics
Parsing: Transforms
Validation: Tests
Composition and Reuse
TypeScript integration
Schema defaults
Ensuring a schema matches an existing type
Extending built-in schema with new methods
TypeScript configuration
Error message customization
localization and i18n
API
yup
schema
このへんまでは全部読んで、後は型ごとに見ていく感じか
型の分類がわかっていれば必要な箇所だけ読めるmrsekut.icon
imageのとこ
こうかく
code:ts
export const imageFieldData = yup.mixed().required();
こう書くと、iamgefilesとcroppedImgDataという2つのfiledがあることになってしまう
2つのregisterをやらないといけなくなる
ので意味が変わる
code:ts
export const imageFieldData = yup.object({
imagefiles: ..,
croppedImgData
})
defaultのエラーメッセージをカスタムする
setLocaleを使う
number自体のerror messageは変えられないの？
yup.number()としたときに、stringを入力したときのerror
typeError()を使う
itemPrice: yup.number().typeError('数字を入力してください').required()
これsetLocaleみたいに一元管理できないのか
カスタマイズした正規表現の適用