typeof와 keyof 결합
타입 연산자를 연결해 정밀한 타입을 도출합니다.
typeof와 keyof 결합은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
강력한 조합
각각 사용하면 typeof는 값에서 타입을 도출하고 keyof는 타입의 키를 나열합니다. 둘을 함께 사용하는 keyof typeof value는 값에 실제로 존재하는 키의 유니온을 만들어 완전히 타입 안전한 접근을 가능하게 합니다.
keyof typeof 활용하기
먼저 상수 객체에서 시작하여 typeof로 타입을 가져온 다음 keyof로 키를 나열합니다. 그 결과 객체의 리터럴 키 이름으로 이루어진 유니온을 얻습니다.
const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])이 패턴이 필요한 이유
실행 시점에 사용하는 객체는 있지만 별도의 인터페이스는 없는 경우가 많습니다. keyof typeof를 사용하면 객체의 형태를 직접 작성한 타입으로 중복해서 표현하지 않고도 키 타입을 얻을 수 있습니다.
const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2키를 통한 타입 안전한 접근
keyof typeof obj로 타입을 지정한 함수 매개변수는 컴파일 시점에 유효하지 않은 키를 거부하므로 내부의 인덱스 접근이 항상 안전하다는 것을 보장할 수 있습니다.
const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key열거형과 같은 상수 객체
일반적인 관용 패턴은 as const 객체를 유사 열거형으로 정의한 다음, 그 객체에서 키 타입과 값 타입을 모두 도출하는 것입니다.
const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)키와 값 비교
차이점에 주의하세요. keyof typeof obj는 키 이름을 제공하고, typeof obj[keyof typeof obj]는 값의 타입을 제공합니다. API에 필요한 쪽을 선택하세요.
const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)제네릭 getProperty
고전적인 타입 안전 게터는 K extends keyof T로 키 매개변수의 범위를 제한하고 T[K]를 반환하므로, 결과 타입이 조회한 속성과 정확히 일치합니다.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)키에 따라 달라지는 반환 타입
반환 타입이 T[K]이므로 각 호출의 결과 타입은 전달한 특정 키에 맞게 조정됩니다. 한 키에서는 숫자가 되고 다른 키에서는 문자열이 될 수 있습니다.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id") // number
const nm = getProperty(u, "name") // string
console.log(id, nm)유효하지 않은 키는 거부됨
객체에 존재하지 않는 키를 전달하면 컴파일 오류가 발생합니다. 제네릭 제약 조건이 코드가 실행되기 전에 이를 적용합니다.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))타입 안전한 세터
같은 메커니즘으로 세터도 만들 수 있습니다. 값 매개변수가 T[K]이므로 해당 키에 맞는 올바른 타입의 값만 할당할 수 있습니다.
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)하나로 연결하기
keyof typeof 패턴과 제네릭 T[K] 접근을 함께 사용하면 실제 객체에 적용할 수 있는 안전하고 재사용 가능한 유틸리티를 만들 수 있습니다. 이는 타입이 지정된 설정 판독기, 조회 기능, 폼 도우미의 핵심입니다.
const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
return theme[name]
}
console.log(color("danger")) // #f00빠른 확인
typeof와 keyof를 결합하는 방법에 대한 이해도를 확인해 보세요.
복습
keyof typeof value는 별도의 인터페이스를 작성하지 않고도 값에 실제로 존재하는 키의 유니온을 도출하므로 인덱스 접근을 타입 안전하게 만듭니다. 키 타입(keyof typeof obj)과 값 타입(typeof obj[keyof typeof obj])을 구분하세요. 제네릭 패턴 getProperty<T, K extends keyof T>(obj, key): T[K]은 정확히 조회한 타입을 반환하고 컴파일 시점에 유효하지 않은 키를 거부합니다.
자주 묻는 질문
“typeof와 keyof 결합” 강의는 무료인가요?
네 — “typeof와 keyof 결합” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“typeof와 keyof 결합”에서 뭘 배우나요?
타입 연산자를 연결해 정밀한 타입을 도출합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“typeof와 keyof 결합” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- typeof 타입 연산자
- keyof 타입 연산자
- 인덱스 접근 타입
- typeof와 keyof 결합