Enum(및 과일)을 사용한 7가지 TypeScript 트릭 🧺
기본 열거형(숫자 및 자동 증가)에 의존하는 것이 표준이며 가장 일반적인 사용 사례입니다. 그러나 Enum은 훨씬 더 많은 것을 제공할 수 있습니다.
이 게시물의 나머지 부분에서 다음 코드를 사용할 수 있다고 가정해 보겠습니다.
enum Fruit {
APPLE = '🍎',
BANANA = '🍌',
CHERRY = '🍒',
}
1. 열거형 병합
Merging enums is pretty straightforward using the pipe | operator:
enum OtherFruit {
DATE = 'date',
}
type AnyFruit = Fruit | OtherFruit
2. 하위 집합 열거
Because cherries may not be as tasty as other fruits, let's exclude them:
type YummyFruits = Exclude<Fruit, Fruit.CHERRY>
// => type YummyFruits = Fruit.APPLE | Fruit.BANANA
3. 열거형의 키를 동적으로 가져오기
This one needs the use of two type operators:keyof 및 typeof .type FruitKey = keyof typeof Fruit
// => type FruitKey = "APPLE" | "BANANA" | "CHERRY"
const keys = Object.keys(Fruit) as FruitKey[]
// => ["APPLE", "BANANA", "CHERRY"]
▶️ Try on TypeScript Playground
4. 열거형 값을 동적으로 가져오기
This snippet leverages the Template Literal 유형 연산자:type FruitValue = `${Fruit}`
// => type FruitValue = "🍎" | "🍌" | "🍒"
const values: FruitValue[] = Object.values(Fruit)
// => ["🍎", "🍌", "🍒"]
▶️ Try on TypeScript Playground
5. 열거형 키에 대해 반복
Looping through the enum keys is as simple as:
for (let fruit of Object.keys(Fruit)) {
console.log(fruit)
}
// => APPLE
// BANANA
// CHERRY
6. 열거형 값에 대해 반복
In the same spirit, looping through the enum values:
for (let fruit of Object.values(Fruit)) {
console.log(fruit)
}
// => 🍎
// 🍌
// 🍒
7. const 열거형
By default, enums generate a bunch of code when compiled to JavaScript:
var Fruit;
(function (Fruit) {
Fruit["APPLE"] = "🍎";
Fruit["BANANA"] = "🍌";
Fruit["CHERRY"] = "🍒";
})(Fruit || (Fruit = {}));
There is however a way not to generate this much code: by leveraging const enum .
Adding just a const in front of our Fruit enum makes a big difference:
const enum Fruit {
APPLE = '🍎',
BANANA = '🍌',
CHERRY = '🍒',
}
...as it compiles to nothing. 🕳️
Just until we use part of its values:
const chosenFruit = Fruit.BANANA
// => compiles to:
// var chosenFruit = "🍌";
Reference
이 문제에 관하여(Enum(및 과일)을 사용한 7가지 TypeScript 트릭 🧺), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/prod/mastering-enums-in-typescript-1c1j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
