숏컷 코드

const routes = {
  home: "/",
  about: "/about",
} as const;

type Routes = typeof routes;
type RouteName = keyof Routes;
type RoutePath = Routes[RouteName];

값에서 타입

값에서 타입을 다시 끌어올 때 자주 쓰는 기본형은 아래입니다.

• 값 객체 전체 타입 추출: typeof config
• 특정 프로퍼티 타입 추출: User["name"]
• 값 배열에서 union 만들기: typeof roles[number]
• 값 객체 키 집합 만들기: keyof typeof routes

1) 값 선언에서 타입을 끌어오면 typeof

이미 존재하는 값 객체가 타입의 진실 원천이라면, 구조를 손으로 다시 적기보다 typeof로 가져오는 편이 안전합니다.

const config = {
  apiBase: "/api",
  timeout: 3000,
};

type Config = typeof config;

이 방식은 값과 타입 선언이 어긋나는 중복을 줄여 줍니다.

2) 타입의 특정 속성 타입만 꺼내면 T[K]

T[K]는 타입 안에서 특정 키에 대응하는 값 타입을 추출하는 문법입니다.

interface User {
  id: string;
  name: string;
}

type UserName = User["name"];

즉 타입을 다시 적지 않고 기존 계약의 일부를 재사용하는 방식입니다.

3) 값 배열에서 union을 만들면 typeof arr[number]

as const와 함께 쓰면 값 배열에서 허용 가능한 문자열 집합 같은 타입을 쉽게 뽑을 수 있습니다.

const roles = ["admin", "member"] as const;
type Role = typeof roles[number];

이 패턴은 값과 타입이 한 소스에서 같이 움직이게 만드는 대표 예시입니다.

4) keyof와 같이 쓰면 타입 탐색이 쉬워진다

typeof로 값 타입을 만들고, keyof로 키 집합을 얻고, T[K]로 값 타입을 뽑는 흐름은 TypeScript 타입 조작의 기본 축입니다.

const routes = {
  home: "/",
  about: "/about",
} as const;

type RouteKey = keyof typeof routes;         // "home" | "about"
type RouteValue = (typeof routes)[RouteKey]; // "/" | "/about"

5) 넓은 추론을 막아야 할 때는 as const

값이 너무 넓게 추론되면 원하는 literal union이 나오지 않을 수 있습니다. 그래서 값에서 타입을 뽑을 때는 as const를 함께 보는 경우가 많습니다.

언제 어떤 추출을 쓸까

• 값 선언에서 타입을 추출한다: typeof value
• 특정 속성 타입을 추출한다: T[K]
• 객체 키 집합이 필요하다: keyof T
• 값 배열에서 union 타입을 만든다: typeof arr[number]
• 리터럴 정보가 필요하다: as const

주의할 점

// ❌ string[]로 넓어짐
const roles = ["admin", "member"];
type Role = typeof roles[number]; // string

// ✅ 리터럴 union 유지
const roles = ["admin", "member"] as const;
type Role = typeof roles[number]; // "admin" | "member"