React는 이제 Validation 라이브러리를 다시 일본어화했습니다.

React+Typerscript+MUIv5+React Hook Form+yup을 통한 제작 개발 환경.
이번에는yup일본어화에 관한 보도입니다.
버전 0.32.11
yup의 일본화에 대해 몇 편의 글이 인기를 끌었지만 응용 프로그램의 가져오는 방법에 대한 정보를 찾지 못해 다시 글을 썼다.

일본어

로켈을 정의할 수 있는 항목

yup의locale.d.ts 파일의 정의는 다음과 같습니다.
mixed,string,number,date,boolean,object,aray에 대한 언어 환경을 정의할 수 있습니다.
yup locale.d.ts

export interface LocaleObject {
    mixed?: MixedLocale;
    string?: StringLocale;
    number?: NumberLocale;
    date?: DateLocale;
    boolean?: BooleanLocale;
    object?: ObjectLocale;
    array?: ArrayLocale;
}

믹스드,string,number,date,boolean,object,aray 각자의 언어 환경을 살펴보겠습니다.
일본어 언어 환경을 다음과 같은 항목으로 정의할 수 있음을 알 수 있다.
yup locale.d.ts

export interface MixedLocale {
    default?: Message;
    required?: Message;
    oneOf?: Message<{values: any;}>;
    notOneOf?: Message<{values: any;}>;
    notType?: Message;
    defined?: Message;
}
export interface StringLocale {
    length?: Message<{length: number;}>;
    min?: Message<{min: number;}>;
    max?: Message<{max: number;}>;
    matches?: Message<{regex: RegExp;}>;
    email?: Message<{regex: RegExp;}>;
    url?: Message<{regex: RegExp;}>;
    uuid?: Message<{regex: RegExp;}>;
    trim?: Message;
    lowercase?: Message;
    uppercase?: Message;
}
export interface NumberLocale {
    min?: Message<{min: number;}>;
    max?: Message<{max: number;}>;
    lessThan?: Message<{less: number;}>;
    moreThan?: Message<{more: number;}>;
    positive?: Message<{more: number;}>;
    negative?: Message<{less: number;}>;
    integer?: Message;
}
export interface DateLocale {
    min?: Message<{min: Date | string;}>;
    max?: Message<{max: Date | string;}>;
}
export interface BooleanLocale {
    isValue?: Message;
}
export interface ObjectLocale {
    noUnknown?: Message;
},
export interface ArrayLocale {
    length?: Message<{length: number;}>;
    min?: Message<{min: number;}>;
    max?: Message<{max: number;}>;
}

일본어 정의

위에서 확인한 언어 환경을 정의할 수 있는 항목을 참조하여 일본어를 정의합니다.

일본어의 정의 방법

예를 들어 위 localle와 같습니다.d.ts 파일은 MixexedLocale의 required 속성을 확인합니다.
locale.d.ts MixedLocale의 일부 발췌문

export interface MixedLocale {
  required: Message;
}

이런 상황에서 일본어의 정의는 다음과 같다.

required: (prm: MessageParams) => {`${prm.label}は必須入力です`} 

MessageParams에서는 label 이외에 다음과 같은 내용을 정의했다.
types.d.ts

export interface MessageParams {
    path: string; // 変数名
    value: any;
    originalValue: any;
    label: string;
    type: string;
}

예를 들어 검증 모델은 다음과 같다.
MessageParams의 path는 "name", label은 "이름",value는 입력 값을 설정합니다.
다음은locale.d.ts는 파일 NumberLocale의 min 속성을 확인합니다.
Message의 Generics에서 {min: number;}를 추가로 정의했습니다.
locale.d.ts NumberLocale의 일부 발췌문

export const createSchema = yup.object({
  name: yup.string().label('名称').required(),
})

이 경우 일본어 정의MessageParams & {min: number}는min 속성에 설정됩니다.

export interface NumberLocale {
  min?: Message<{min: number;}>;
}

검증 모델이 다음과 같으면prm.min의 값은'18'입니다.

required: (prm: MessageParams & {min: number}) => {`${prm.label}は${prm.min}以上で入力してください`} 

일본어 정의 파일 만들기

일본어의 정의 방법을 알았기 때문에 일본어 정의 파일setLocale을 만들어yup에 설치했습니다.
파일 이름은 무엇이든지 가능하지만 yupJpConfig.ts라는 파일 이름으로 제작되었습니다.
label이 패턴에 의해 정의되었는지 모르기 때문에 정의된 상태에서만 출력합니다.
yupJpConfig.ts 일본어 정의 파일의 내용

export const createSchema = yup.object({
  age: yup.string().label('年齢').min(18),
})

응용 프로그램 가져오기

프로그램의 루트 구성 요소 등을 사용하여 만든 일본어 정의 파일입니다.
※ 이곳을 몰라 시간이 좀 걸렸어요😫
다른 방법도 있지만 (일본어 정의 파일 자체는default export로 사용) 프로그램으로 일본어 정의 파일을 읽으면 간단한 import 목적지를 실수하지 않습니다.
App.tsx

import { setLocale } from 'yup'
import { MessageParams } from "yup/lib/types"

const labelText = (prm: MessageParams) => {
  return prm.label ? `${prm.label}は`: ''
}

setLocale({
  mixed: {
    default: (prm: MessageParams) => `${labelText(prm)}無効です`,
    required: (prm: MessageParams) => `${labelText(prm)}必須の入力項目です`,
    oneOf: (prm: MessageParams & {values: any}) => `${labelText(prm)}次の値のいずれかでなければなりません:${prm.values}`,
    notOneOf: (prm: MessageParams & {values: any}) => `${labelText(prm)}次の値のいずれかであってはなりません:${prm.values}`,
    notType: `形式が違います`,
    defined: ``
  },
  string: {
    length: (prm: MessageParams & {length: number}) => `${labelText(prm)}${prm.length}文字でなければなりません`,
    min: (prm: MessageParams & {min: number}) => `${labelText(prm)}少なくとも${prm.min}文字でなければなりません`,
    max: (prm: MessageParams & {max: number}) => `${labelText(prm)}最大${prm.max}文字でなければなりません`,
    matches: (prm: MessageParams & {regex: RegExp}) => `${labelText(prm)}次の形式と一致する必要があります: "${prm.regex}"`,
    email: (prm: MessageParams & {regex: RegExp}) => `${labelText(prm)}メールアドレス形式である必要があります`,
    url: (prm: MessageParams & {regex: RegExp}) => `${labelText(prm)}有効なURLでなければなりません`,
    uuid: (prm: MessageParams & {regex: RegExp}) => `${labelText(prm)}有効なUUIDでなければなりません`,
    trim: (prm: MessageParams) => `${labelText(prm)}前後にスペースを入れてはいけません`,
    lowercase: (prm: MessageParams) => `${labelText(prm)}小文字でなければなりません`,
    uppercase: (prm: MessageParams) => `${labelText(prm)}大文字でなければなりません`,
  },
  number: {
    min: (prm: MessageParams & {min: number}) => `${labelText(prm)}${prm.min}以上である必要があります`,
    max: (prm: MessageParams & {max: number}) => `${labelText(prm)}${prm.max}以下でなければなりません`,
    lessThan: (prm: MessageParams & {less: number}) => `${labelText(prm)}${prm.less}より小さくなければなりません`,
    moreThan: (prm: MessageParams & {more: number}) => `${labelText(prm)}${prm.more}より大きくなければなりません`,
    positive: (prm: MessageParams & {more: number}) => `${labelText(prm)}正の数でなければなりません`,
    negative: (prm: MessageParams & {less: number}) => `${labelText(prm)}負の数でなければなりません`,
    integer: (prm: MessageParams) => `${labelText(prm)}整数でなければなりません`,
  },
  date: {
    min: (prm: MessageParams & {min: Date | string}) =>  `${labelText(prm)}${prm.min}より後でなければなりません`,
    max: (prm: MessageParams & {max: Date | string}) =>  `${labelText(prm)}${prm.max}より前でなければなりません`,
  },
  boolean: {
    isValue: (prm: MessageParams) =>  `${labelText(prm)}値が必要です`,
  },
  object: {
    noUnknown: (prm: MessageParams) => `${labelText(prm)}オブジェクトシェイプで指定されていないキーを含めることはできません`,
  },
  array: {
    length: (prm: MessageParams & {length: number}) => `${labelText(prm)}${prm.length}個が必要です`,
    min: (prm: MessageParams & {min: number}) => `${labelText(prm)}${prm.min}個以上の項目が必要です`,
    max: (prm: MessageParams & {max: number}) => `${labelText(prm)}${prm.max}個以下の項目が必要です`,
  },

})

다른 구성 요소 등에서yup을 사용할 때 import * as yup from 'yup' 일본어 정의 파일을 사용할 수 있습니다.
Sample.tsx

import '@/_lib/yupJpConfig'

export function App() {
  ・・・省略・・・
}

지금까지 Validation 라이브러리 yup의 일본어화였습니다.