Yup
TypeScriptで実行時型検査するlibrary
逆引き
>#WIP
Yupの微妙なところ
APIがキモい
バリバリmutable
addMehotdのやり方がPHPみがある
文字列でmethodを追加していくのでconflictが生じうる
TypeScriptと微妙に相性が悪い
型は付くが、付けるためひと手間必要
Unionがない
切り替えができるようなフォームのvalidationが不便
Zodには
union がある代替策もしょぼい
methodが多すぎて全体を把握するのが大変
割と、技術選定ミスったな、という気持ちで使い続けている
validationの定義を使い回す
変数として定義する
tsconst validPost = yup.string(). ...;使い分け
後者の方法で複数作った場合に組み合わせることはできない
例えば、
validPost.validPost のようなことはできない validPost.required() のようなことはできるそのため、前者のほうがより汎用的である
Yupのデータ型
mixed
共通のもの
全てのデータ型を許容する
required() などstring
number
boolean
date
array
object
record
error
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から型を導出できる
tstype FormData = InferType<typeof validation>;これ便利内容に見えて割と雑いんだよな
必要ない部分もちゃんと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にしたい
tsconst 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では引数を取っている #??tslet 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
このへんまでは全部読んで、後は型ごとに見ていく感じか
型の分類がわかっていれば必要な箇所だけ読める
imageのとこ
こうかく
tsexport const imageFieldData = yup.mixed().required();こう書くと、iamgefilesとcroppedImgDataという2つのfiledがあることになってしまう
2つのregisterをやらないといけなくなる
ので意味が変わる
tsexport const imageFieldData = yup.object({
imagefiles: ..,
croppedImgData
})defaultのエラーメッセージをカスタムする
setLocaleを使う
number 自体のerror messageは変えられないの？ yup.number() としたときに、stringを入力したときのerror typeError() を使う itemPrice: yup.number().typeError('数字を入力してください').required() これsetLocaleみたいに一元管理できないのか
カスタマイズした正規表現の適用