인덱스 접근 타입
T[K] 구문으로 속성 타입을 조회합니다.
인덱스 접근 타입은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
속성 타입 조회하기
인덱스 접근 타입을 사용하면 타입 위치에서 대괄호 구문으로 속성의 타입을 조회할 수 있습니다. Obj['prop']과 같이 작성합니다. 값 수준에서 값을 읽는 것과 비슷하지만 타입 수준에서 수행됩니다.
기본 인덱스 접근
리터럴 key로 타입을 인덱싱하면 해당 속성의 타입을 추출할 수 있습니다. User['name']은 string을 제공합니다.
interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)그냥 타입을 작성하지 않는 이유
인덱스 접근을 사용하면 타입이 동기화된 상태로 유지됩니다. User.name이 string에서 다른 타입으로 변경되면 모든 User['name']도 자동으로 업데이트되므로 직접 수정할 필요가 없습니다.
interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)유니언 keys로 접근하기
keys의 유니언으로 인덱싱하면 해당 값 타입의 유니언을 얻을 수 있습니다. User['id' | 'name']은 number | string이 됩니다.
interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)모든 값에 대한 Obj[keyof Obj]
keyof Obj로 인덱싱하면 객체의 모든 값 타입의 유니언, 즉 객체가 가질 수 있는 전체 값 타입 집합을 얻을 수 있습니다.
interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)[number]를 사용한 배열 요소 타입
배열 타입을 number로 인덱싱하면 요소 타입을 얻을 수 있습니다. string[][number]는 string입니다.
type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)튜플의 요소 타입
튜플을 number로 인덱싱하면 모든 요소 타입의 유니언을 얻을 수 있습니다. 고정된 목록에서 값 타입을 도출할 때 유용합니다.
type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)typeof와 결합하기
typeof를 사용하여 값의 타입에 인덱스로 접근합니다. as const 배열에서 [number]와 함께 사용하면 배열의 리터럴 값들로 이루어진 유니온을 도출합니다.
const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)중첩 인덱스 접근
조회를 연이어 연결하여 중첩된 타입을 파고듭니다. 각 대괄호는 구조에서 한 단계씩 더 안쪽으로 내려갑니다.
interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)제네릭에서의 인덱스 접근
K extends keyof T와 함께 사용하는 T[K] 패턴은 타입 안전 게터의 핵심입니다. 반환 타입이 조회한 속성의 타입과 정확히 일치합니다.
function get<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number실용적인 도출
인덱스 접근을 사용하면 타입을 중복해서 작성할 필요가 없습니다. 도메인 객체에서 함수 인수 타입을 직접 도출할 수 있으므로 같은 내용을 다시 선언하지 않아도 됩니다.
interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)빠른 확인
인덱스 접근 타입에 대한 이해도를 확인해 보세요.
복습
인덱스 접근 타입(Obj['prop'])은 속성의 타입을 조회하므로 원본과 계속 동기화됩니다. 키의 유니온으로 인덱싱하면 값 타입의 유니온을 얻고, keyof Obj로 인덱싱하면 모든 값의 타입을 얻으며, number로 인덱싱하면 배열 또는 튜플 요소의 타입을 얻습니다. 중첩된 조회에는 대괄호를 연이어 사용하고, typeof 및 제네릭(T[K])과 결합하여 타입 안전한 도출을 만들 수 있습니다.
자주 묻는 질문
“인덱스 접근 타입” 강의는 무료인가요?
네 — “인덱스 접근 타입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“인덱스 접근 타입”에서 뭘 배우나요?
T[K] 구문으로 속성 타입을 조회합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“인덱스 접근 타입” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.