사전 정의된 목록의 단어만 포함할 수 있는 문자열인 TypeScript에서 유형을 정의하는 방법

Question

까다로운 TypeScript 문제가 있습니다.

소품 크기가 있는 아이콘 구성 요소가 있다고 가정해 보겠습니다. 크기는 "2", "4", "6"이 될 수 있습니다. 이 값을 미리 정의된 tailwind 클래스에 매핑합니다.

그래서 이렇게 입력합니다

으아아아

모든 것이 괜찮습니다. 하지만 화면 크기에 따라 다른 크기를 갖고 싶다면 어떻게 해야 할까요? 그래서 원활하게 진행되는 좋은 문법을 갖도록 노력하고 싶습니다.

그래서 아이콘 구성 요소를 다음과 같이 다시 작성했습니다.

으아아아

이 기능은 훌륭합니다. 그런데 어떻게 입력하나요? TypeScript가 앞으로 정규식을 지원한다는 내용을 읽었습니다. 이렇게 하면 작업이 더 쉬워질 것입니다. 그런데 지금 이것을 입력해도 될까요?

이것은 실제 구성 요소가 아니므로 개선 방법에 대한 좋은 제안을 제공하지 마십시오. 제가 코딩한 방식대로 작동하도록 크기 속성을 입력하는 방법이 궁금합니다.

Answer 1

먼저 sizeMap를 전역 범위로 추출하고 const Assert를 추출하여 컴파일러에게 이것이 불변 상수임을 알리고 유형 확장을 제한해야 합니다.

으아아아

다음으로 sizeMap 키 유형을 가져와야 합니다.

으아아아

구현: 문자열을 받아들이고 문자열이 유효하면 이를 반환하는 유형을 생성하고, 그렇지 않으면 never를 반환합니다.

의사 코드:

유형이 허용되도록 T - 要验证的字符串，Original - 原始字符串，AlreadyUsed - 사용된 키의 결합.

T가 빈 문자열인 경우

• 반품原始 그렇지 않고 T 以大小映射 (ClassName) 的键开头，不包括 AlreadyUsed，后跟一个空格和剩余的字符串(休息가 크기 맵의 키(

  ClassName)로 시작하는 경우
AlreadyUsed를 제외하고 그 뒤에 공백과 나머지 문자열(
• break)이 옵니다.

  Rest 作为字符串传递以验证 Original，并将 AlreadyUsed 이 유형을 재귀적으로 호출하여

  및
ClassName

을 추가합니다.

T 是尺寸映射的键，不包括 AlreadyUsed

그밖에
• 가 사이즈 맵의 키이고 原始AlreadyUsed
를 제외하고
• 从不반품
그렇지 않으면

반품

불가

Item 添加一个通用参数来表示大小

구현:

으아아아 size 在组件中是可选的，因此我们将在 SizeValue 周围添加一个包装器，它将把 string | undefined 到 string 并将其传递给 _SizeValue크기를 나타내려면

Item에 공통 매개변수를 추가해야 합니다.

으아아아

size는 구성 요소에서 선택 사항이므로

string | undefine을 string으로 변환하고 _SizeValue에 전달하는 래퍼를

SizeValue 주위에 추가합니다. , 또한 크기에 대한 기본값을 추가합니다: 🎜 으아아아 🎜사용법: 🎜 으아아아 🎜🎜놀이터🎜🎜