[JS]enum타입

기존의 코드는

atom.tsx

type categories = 'TO_DO' | 'DOING' | 'DONE';


export interface IToDo {
  text: string;
  id: number;
  category: categories;
}

export const categoryState = atom<Categories>({
  key: 'category',
  default: categories,
});

ToDoList.tsx

...

<select value={category} onInput={onInput}>
        <option value="TO_DO">To Do</option>
        <option value="DOING">Doing</option>
        <option value="DONE">Done</option>
</select>

...

이렇게 동일한 코드를 작성하면서도 하드코딩으로 일일히 작성했지만

enum을 사용하면

atom.tsx

export enum Categories {
  'TO_DO',
  'DOING',
  'DONE',
}

export interface IToDo {
  text: string;
  id: number;
  category: Categories;
}

export const categoryState = atom<Categories>({
  key: 'category',
  default: Categories.TO_DO,
});

ToDoList.tsx

...
  <select value={category} onInput={onInput}>
        <option value={Categories.TO_DO}>To Do</option>
        <option value={Categories.DOING}>Doing</option>
        <option value={Categories.DONE}>Done</option>
  </select>
...

enum을 export해서 동일한 코드를 하드코딩하지않고 작성할 수 있다. 오타 등의 실수로 오류발생할 가능성을 줄일수 있음

특이하게도 enum은 배열처럼 enum의 property 들을 index로 치환하기때문에

export enum Categories {
  'TO_DO',
  'DOING',
  'DONE',
}

console.log(Categories.TO_DO) // 0

만약enum의 index가 아니라 string을 받으려면

export enum Categories {
  'TO_DO' = 'TO_DO',
  'DOING' = 'DOING',
  'DONE' = 'DONE',
}

console.log(Categories.TO_DO) //TO_DO

이렇게 작성해야한다.