> 웹 프론트엔드 > JS 튜토리얼 > Yup을 사용하여 TypeScript에서 인터페이스 및 유효성 검사 스키마를 동적으로 생성

Yup을 사용하여 TypeScript에서 인터페이스 및 유효성 검사 스키마를 동적으로 생성

DDD
풀어 주다: 2025-01-24 16:35:11
원래의
1002명이 탐색했습니다.

최근 프로젝트에서, 나는 키가 일정한 매핑으로 동적으로 정의 된 객체가 필요한 문제를 겪었고, 하나 이상의 키는 효과적인 값을 가졌다. Dynamically Generating Interfaces and Validation Schemas in TypeScript with Yup > 도전 우리는 유효 키와 해당 유형을 정의하는 메타 다타 팀 객체가 있습니다.

이 매핑에 따르면, 우리는 다음과 같이 필요합니다

유형 보안을 강제하기 위해 TypeScript 인터페이스를 동적으로 생성합니다.

yup verification 모드를 생성하고 매핑 검증 객체를 기반으로합니다.

객체의 하나 이상의 키에 유효한 유효성 값 (정의되지 않은)이 있는지 확인하십시오.

솔루션의 유지 보수를 향상시키기 위해 하드 코딩 키를 피하십시오.

그러나 그러나 TypeScript는 컴파일 중에 정적 유형을 실행해야하며 런타임 중에 YUP 처리는 확인됩니다.
<code class="language-typescript">const MetadataMap = {  
 userId: Number,  
 utmSource: String,  
 utmMedium: String,  
 utmCampaign: String,  
} as const;</code>
로그인 후 복사
1 단계 : 인터페이스를 생성 Metadatamap에서 TypeScript 인터페이스를 생성하기 위해

및 매핑 유형을 사용했습니다. 다음은 우리가 그것을 정의하는 방법입니다 :

    이 방법을 사용하면 메타 다타 팀의 업데이트가 메타 데이터 인터페이스에 자동으로 반영되도록합니다. 예를 들면 :
  1. // 메타 데이터 인터페이스 생성 :
  2. 2 단계 : 유화 모드를 동적으로 생성
  3. 우리는 키와 일치하는 YUP 모드를 동적으로 생성해야합니다.
  4. 및 를 사용하여 각 키를 해당 YUP 검증 장치에 매핑합니다.
  5. 이 방법은 하드 코딩을 제거하고 Metadatamap의 변경 사항이 수동 업데이트없이 모드에 반영되도록합니다.
  6. 3 단계 : "적어도 하나의 키"규칙을 추가 다음 과제는 객체의 하나 이상의 키가 정의 된 값을 갖도록하는 것입니다. 우리는
  7. 메소드를 추가했습니다 :
<: :>이 논리 :

객체가 효과적인지 확인하십시오.

Metadatamap에서 유효한 키를 동적으로 추출합니다. 정의되지 않은 값으로 하나 이상의 키를 확인하십시오. keyof

결과 다음은 최종 모드의 동작입니다 :
<code class="language-typescript">type Metadata = {  
 [K in keyof typeof MetadataMap]: typeof MetadataMap[K] extends NumberConstructor  
  ? number  
  : string;  
};</code>
로그인 후 복사

이 예에서는 UTMSOURCE가 정의되지 않은 값이없는 효과적인 키이기 때문에 검증이 성공적입니다.

위 내용은 Yup을 사용하여 TypeScript에서 인터페이스 및 유효성 검사 스키마를 동적으로 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿