TypeScript Academy · 강의

keyof 타입 연산자

keyof로 객체 타입 키의 유니언을 가져옵니다.

레슨 2/413개 단계

keyof 타입 연산자은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

타입의 keys

keyof 연산자는 객체 타입을 받아 속성 keys의 유니언을 만듭니다. 이는 타입 안전한 속성 접근과 제네릭 key 유틸리티의 기반입니다.

기본 keyof

인터페이스에 keyof를 적용하면 해당 인터페이스의 key 이름을 문자열 리터럴 타입의 유니언으로 얻을 수 있습니다.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

valid keys만 허용됩니다

keyof T 타입의 변수에는 T에 실제로 존재하는 keys 중 하나만 담을 수 있습니다. 오타와 유효하지 않은 keys는 컴파일 시점에 발견됩니다.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

typeof와 함께 사용하는 keyof

typeof와 결합하면 값에서 추론된 타입의 keys를 얻을 수 있습니다. 여기서는 인터페이스를 작성하지 않고도 config 객체의 keys를 얻습니다.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

문자열 인덱스 시그니처의 keyof

문자열 인덱스 시그니처가 있는 타입에서 keyof는 string | number입니다. 모든 문자열 key가 허용되고 숫자 key는 문자열로 변환되기 때문입니다.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

숫자 인덱스 시그니처의 keyof

숫자 인덱스 시그니처에서 keyof는 number뿐입니다. 이는 배열이 숫자 인덱스를 노출하는 방식과 일치합니다.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

배열 타입의 keyof

배열 타입에 keyof를 적용하면 예상 밖의 유니언을 얻습니다. 여기에는 숫자 인덱스와 length, push처럼 배열의 모든 메서드 및 속성 이름이 포함됩니다.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

keys 안전하게 순회하기

keyof를 사용하면 valid keys만 다루는 반복문을 작성할 수 있습니다. Object.keys를 (keyof T)[]로 캐스팅하면 인덱스 접근의 타입 안전성이 유지됩니다.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

제네릭 제약 조건에서 사용하는 keyof

제네릭 key 매개변수에는 일반적으로 K extends keyof T라는 제약 조건을 지정합니다. 이를 통해 해당 key가 객체에 실제로 존재함을 보장할 수 있습니다.

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const name = pluck({ id: 1, name: "Ada" }, "name")
console.log(name) // Ada

여러 keys 결합하기

keyof T는 유니언이므로 교집합을 구하거나 필터링할 수 있습니다. 여기서는 함수가 valid keys의 배열을 받습니다.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

keyof가 중요한 이유

keyof는 속성 이름을 검사 가능한 타입으로 바꿉니다. 따라서 존재하지 않는 key를 참조할 수 없는 제네릭 getter, setter, mapper를 만들 수 있습니다. 고급 TypeScript에서 어디에나 사용되는 기능입니다.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

빠른 확인

keyof 연산자에 대한 이해도를 테스트해 보십시오.

인터랙티브 레슨에서 답해보세요

복습

keyof T는 T의 속성 keys를 리터럴 타입의 유니언으로 만들고, 변수가 valid keys만 담도록 제한합니다. 문자열 인덱스 시그니처에서는 string | number를 반환하고 숫자 인덱스 시그니처에서는 number를 반환합니다. typeof와 함께 사용하면 값에서 keys를 도출하고, 제네릭(K extends keyof T)과 함께 사용하면 타입 안전한 getter, picker, 순회를 구현할 수 있습니다.

무료로 시작

AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 101
레슨: 352

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“keyof 타입 연산자” 강의는 무료인가요?

네 — “keyof 타입 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“keyof 타입 연산자”에서 뭘 배우나요?

keyof로 객체 타입 키의 유니언을 가져옵니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“keyof 타입 연산자” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기