Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 리액트 훅
- REACT
- useEffect
- React Hooks
- 리액트 공식문서
- 코딩테스트
- 파이썬 slice
- 프로그래머스
- 파이썬 반복문
- typeScript
- 내일배움캠프 최종 프로젝트
- 리액트
- 파이썬 enumerate
- 리액트 프로젝트
- 한글 공부 사이트
- 타입스크립트 props
- 파이썬 replace
- Next 팀 프로젝트
- 자바스크립트
- 내배캠 프로젝트
- 내일배움캠프
- useState
- 파이썬 for
- 타입스크립트 리액트
- tanstack query
- 파이썬 딕셔너리
- 파이썬 for in
- 내일배움캠프 프로젝트
- 타입스크립트
- JavaScript
Archives
- Today
- Total
sohyeon kim
[TS] enum 열거형 타입 본문
728x90
💡enum 타입에 대해 알아보자.
상품 사이즈처럼 값의 종류를 나열할 수 있는 경우에 쓸 수 있는 타입
let product: {
id: string;
name: string;
price: number;
membersOnly?: boolean;
sizes: string[];
} = {
id: 'c001',
name: '주전자',
price: 129000,
sizes: ['M', 'L'],
};
위와 같이 객체 타입을 정해줬을 때 사이즈는 항상 S, M, L .. 정도만 있을 텐데
string 문자열 타입으로 정해준 건 너무 광범위한 느낌이 든다.
객체의 범위를 정해주는 enum 타입으로 바꿔보자!
enum Size { // 요런 식으로 값을 나열해 주고
S,
M,
L,
XL,
}
let product: {
id: string;
name: string;
price: number;
membersOnly?: boolean;
sizes: Size[]; // 타입을 정해줄 땐 enum 이름만 적어주고
} = {
id: 'c001',
name: '주전자',
price: 129000,
sizes: [Size.M, Size.L], // 값을 쓸 땐 객체처럼 점 표기법을 쓴다.
};
그럼 enum 은 무슨 값을 가지고 있을까?
console.log(Size.S); // 0 정수형 값을 갖고 있다!
console.log(Size.M); // 1
console.log(Size.L); // 2
console.log(Size.XL); // 3
그래서 아래의 경우 값이 없을 때와 S 사이즈가 똑같이 처리되버린다.
function findProduct(size?: Size) {
if (!size) {
console.log('전체 사이즈로 검색');
return;
}
console.log('특정 사이즈로 검색');
}
findProduct(Size.M); // 특정 사이즈로 검색
findProduct(Size.S); // 전체 사이즈로 검색
findProduct(); // 전체 사이즈로 검색
❗️ 그러니 enum 을 사용할 땐 되도록 값을 정해놓고 쓰자!
enum Size {
S = 'S',
M = 'M',
L = 'L',
XL = 'XL',
}
//...
findProduct(Size.M); // 특정 사이즈로 검색
findProduct(Size.S); // 특정 사이즈로 검색 => 원하는 값이 잘 나온다.
findProduct(); // 전체 사이즈로 검색
728x90
반응형
'TypeScript' 카테고리의 다른 글
[TS] const 상수 리터럴 타입 (0) | 2024.03.04 |
---|---|
[TS] interface 인터페이스 (0) | 2024.03.04 |
[TS] any 타입, 함수에 타입 정의하기 (0) | 2024.03.04 |
[TS] 배열 & 튜플, 객체 & 옵셔널 프로퍼티, Partial<> (0) | 2024.03.04 |
[TS] 타입스크립트 시작하기 (0) | 2024.03.04 |