TypeScript에서 타입을 정의하는 주요 방식

 

1. enum (TypeScript 전용 문법)

정해진 상수 집합을 정의할 때 사용.

// 문자열 enum
export enum Category {
  WORD = 'WORD',
  NOTE = 'NOTE',
  TODO = 'TODO',
}

// 사용
const value: Category = Category.NOTE;

• 타입: Category
• 값: Category.NOTE 같은 형태
• 장점: 자바스러운 문법, key → value가 있음
• 단점: 유연성 떨어짐, JS에서 직접 쓰기엔 불편함

---

2. 유니언 타입 ('A' | 'B' | 'C')

가장 유연하고, 문자열 리터럴 제한에 적합

export type Category = 'WORD' | 'NOTE' | 'TODO';

const cat: Category = 'NOTE'; // ✅

• 프론트에서 API로 넘기기 편함
• Select 등 문자열로 다룰 때 가장 많이 사용됨
• "NOTE"처럼 값이 바로 타입임

---

3. as const로 리터럴 고정 + 타입 추출

// 배열로 값을 정의하면서
export const CATEGORY_LIST = ['WORD', 'NOTE', 'TODO'] as const;

// 그 배열을 기반으로 타입 추출
export type Category = (typeof CATEGORY_LIST)[number];

• 유지보수에 강력: 값과 타입이 자동으로 동기화됨
• 가장 실용적인 패턴
• CATEGORY_LIST.map(...)도 가능 → UI에도 바로 사용 가능

이건 무슨 뜻일까?

• typeof CATEGORY_LIST → readonly ['WORD', 'NOTE', 'TODO', 'ALL']
• [...] → 배열의 인덱스 접근
• [number] → 인덱스 자리에 number를 쓰면, 배열 전체의 값들의 유니언 타입을 의미

(typeof CATEGORY_LIST)[number]
// → 'WORD' | 'NOTE' | 'TODO' | 'ALL'

---

비교로 이해하기

const arr = ['a', 'b', 'c'] as const;

type T = typeof arr[number]; // => 'a' | 'b' | 'c'
type T0 = typeof arr[0];     // => 'a'
type T1 = typeof arr[1];     // => 'b'

→ arr[number]는 배열 전체의 원소 값을 유니언으로 뽑아낸다고 보면 돼.

---

예제

export const CATEGORY_LIST = ['WORD', 'NOTE', 'TODO', 'ALL'] as const;
export type Category = (typeof CATEGORY_LIST)[number];

// ✅ 상태로 사용
const [category, setCategory] = useState<Category>('ALL');

// ✅ form validation
const schema = z.object({
  category: z.enum(CATEGORY_LIST), // Category 타입 자동 추론됨
});

// ✅ select box
<select
  value={category}
  onChange={(e) => setCategory(e.target.value as Category)}
>
  {CATEGORY_LIST.map((c) => (
    <option key={c} value={c}>
      {c}
    </option>
  ))}
</select>

 

---

4. typeof (타입 추출 키워드)

const config = {
  name: 'MyApp',
  version: 1,
};

type ConfigType = typeof config;
// 결과: { name: string; version: number }

• 변수나 상수에서 정확한 타입을 추출할 때 사용
• React에서는 typeof window !== 'undefined' 같은 런타임 체크에도 쓰임 (다른 문맥이지만 참고)

---

5. keyof typeof (객체의 key를 타입으로 추출)

const COLOR = {
  red: '#f00',
  green: '#0f0',
  blue: '#00f',
} as const;

type ColorKey = keyof typeof COLOR;
// → 'red' | 'green' | 'blue'

• 객체 키만 타입으로 추출하고 싶을 때 유용
• 예: Object.keys() 할 때 타입 안전하게 쓰고 싶을 때

---

enum	고정된 집합 정의	TS만의 문법, JS 변환 시 비용 있음
`'A'	'B'`	유니언 타입
as const	값 고정 + 리터럴 추출	배열/객체 기반으로 자동 추출 가능
typeof	변수의 타입 가져오기	객체 → 타입으로 복사
keyof typeof	객체 키 → 유니언 타입	드롭다운, 색상 등에서 자주 사용