TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

• format_list_bulleted TypeScript
• · 2024. 4. 1.
• textsms

TypeScript의 enum에 대해서

타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..

• format_list_bulleted TypeScript
• · 2023. 5. 19.
• textsms

자바스크립트 enum 사용하기 Object.freeze()

자바스크립트 enum과 같은 변수를 만들기 위해서 Object.freeze()를 사용할 수 있다. const obj = { a: 1, b: 2, } obj.a = -1; console.log(obj); // {"a": -1, "b": 2} Object.freeze(obj); obj.b = -2; console.log(obj); // {"a": -1, "b": 2} 위와 같이 Object.freeze()를 적용하면, 더 이상 객체의 프로퍼티가 수정되지 않는다. Object.isFrozen() 메서드를 통해서 이 객체가 freeze 되었는지 판별할 수 있다. console.log(Object.isFrozen(obj)); // true 참고자료 : https://developer.mozilla.org/ko/d..

• format_list_bulleted JavaScript
• · 2022. 11. 28.
• textsms