minstudio

고급 타입 조작: keyof와 typeof 연산자

TypeScript에서 keyof와 typeof는 가장 강력한 기초 도구입니다. 자바스크립트의 typeof와 달리, 타입 컨텍스트에서 사용되면 런타임 값의 "구조(Type)"를 완벽하게 복사해옵니다.

또한 keyof는 객체 타입의 키(Key)들만을 추출하여 유니온(Union) 타입으로 생성해 주어, 오타를 방지하고 속성 접근을 안전하게 만듭니다.

🔍 keyof 와 typeof 의 시너지 효과 런타임 객체 (JS) const user = { name: 'Alice', age: 20 }; typeof 추출된 타입 (TS) type UserType = { name: string; age: number; }; keyof 추출된 키 유니온 "name" | "age" 
<!-- ==========================================
// 📂 ts-advanced/keyof-typeof.ts
// ========================================== -->
<script>
// 1. 런타임에 존재하는 일반 자바스크립트 객체
const defaultConfig = {
  theme: "dark",
  volume: 80,
  isMuted: false
};

// 2. typeof를 사용해 객체의 "타입 뼈대"를 그대로 복사해옵니다.
type ConfigType = typeof defaultConfig;
/* 결과:
  type ConfigType = {
    theme: string;
    volume: number;
    isMuted: boolean;
  }
*/

// 3. keyof를 사용해 해당 타입의 "키(Key) 이름들"만 추출합니다.
type ConfigKeys = keyof ConfigType;
// 결과: "theme" | "volume" | "isMuted"

// 💡 실무 활용: 객체의 속성값을 안전하게 가져오는 유틸리티 함수
function getConfigValue(key: ConfigKeys) {
  return defaultConfig[key];
}

getConfigValue("theme"); // OK
getConfigValue("volume"); // OK
// getConfigValue("color"); // ❌ Error: "color"는 ConfigKeys에 없습니다!
</script>
고급 타입 조작: keyof와 typeof 연산자 | Minstudio