본문 바로가기

개발하자

유형 스크립트: 열거형의 문자열 리터럴 유니언 유형

반응형

유형 스크립트: 열거형의 문자열 리터럴 유니언 유형

열거형에서 문자열 리터럴 유니온을 얻고 싶습니다.

이 열거형의 경우...

enum Weekday {
    MONDAY = 'mon',
    TUESDAY = 'tue',
    WEDNESDAY = 'wed'
}

… 이거 받고 싶어요.

type WeekdayType = 'mon' | 'tue' | 'wed';

시도해 봤는데 결과가 나왔어요. 해결책이 지도에 표시된 유형과 관련이 있는 것 같은데 머리를 감쌀 수가 없어요.

이거 어떻게 해요?




참조:

type WeekdayType = `${Weekday}`;

사전 준비-4.1 답변:

이건 프로그램적으로 할 수 없어... 유형을 유형으로 변환하려고 합니다. 이 변환은 의 한 형태이다.

type WeekdayExtendsWeekdayType = 
  Weekday extends WeekdayType ? true : false
// type WeekdayExtendsWeekdayType = true

유감스럽게도 컴파일러는 열거형에서 " 열거형"-ness를 제거하고 일반 리터럴 형식으로 남길 수 있는 핸들을 제공하지 않습니다.


그래서, 해결책은? 실제로 필요한 것은 아니지만 속성 값이 문자열 리터럴인 개체를 사용할 수 있습니다.

const lit = <V extends keyof any>(v: V) => v;
const Weekday = {
  MONDAY: lit("mon"),
  TUESDAY: lit("tue"),
  WEDNESDAY: lit("wed")
}
type Weekday = (typeof Weekday)[keyof typeof Weekday],

이름을 검사하면 이름이 열거형 개체처럼 작동합니다.

console.log(Weekday.TUESDAY); // tue

반면 이름이 호출한 문자열 값의 조합처럼 동작합니다.

const w: Weekday = "wed"; // okay
const x: Weekday = "xed"; // error

따라서 이 해결 방법에서는 "숫자"-ness가 없으므로 유형과 유형을 구분할 필요가 없습니다. 실제와 조금 다르지만(등을 포함하여, 번거로운 것으로 표현하거나 다른 형식의 별칭을 만들어야 합니다) 유용할 정도로 유사하게 동작할 수 있습니다. 그게 당신에게 효과가 있나요?

그게 도움이 됐으면 좋겠네요. 행운을 빕니다.




TypeScript 4.1+:

, 이는 다음과 같은 템플릿 리터럴 유형을 사용하여 달성할 수 있습니다.

type WeekdayType = `${Weekday}`;

TypeScript 3.4+:

@jcalz 답변과 @just-boris의 코멘트에 이어, 다음은 const assertion이 포함된 예입니다.

const Weekday = {
  MONDAY: "mon",
  TUESDAY: "tue",
  WEDNESDAY: "wed",
} as const;

type Weekday = (typeof Weekday)[keyof typeof Weekday];

편집:

더 깊이 파고들고 싶은 사람들을 위해 a를 썼다.




그럼 할 수 있어요!

enum Weekday {
  MONDAY = 'mon',
  TUESDAY = 'tue',
  WEDNESDAY = 'wed'
}

type WeekdayType = `${Weekday}`;

그리고 @okku 덕분에 숫자 열거를 할 수 있습니다.

enum ThreeDigits {
  ZERO = 0,
  ONE = 1,
  TWO = 2
}

type ThreeDigitsType = `${ThreeDigits}` extends `${infer T extends number}` ? T : never;

반응형