타입스크립트 typeof, keyof 연산자

typeof

typeof 연산자는 값과 타입에서 모두 사용할 수 있습니다. 값에서 사용된 typeof 연산자는 자바스크립트 typeof 연산자와 동일하게 해당 타입을 string 형태로 나타냅니다.

const user = { name: 'lee', age: 20 };
console.log(typeof user); // 'objcet'
console.log(typeof user.age); // 'number'

반면에 타입에서 사용된 typeof 연산자는 해당 타입스크립트를 반환합니다.

const user = { name: 'lee', age: 20 };
type UserType = typeof user; //  {name: string; age: number}

keyof

keyof 연산자는 해당 객체 타입에서 키값의 문자열 리터럴 유니언을 반환합니다. 아래 User 타입은 'name' || 'age'와 동일한 타입입니다.

interface User {
  name: string;
  age: number;
}
 
const name: keyof User = 'name'; // ✅
const job: keyof User = 'job'; // ❌

단 일반 객체에서는 사용할 수 없습니다.

keyof typeof

타입으로 선언되지 않은 일반 객체의 경우 keyof typeof 연산자를 통해 해당 키 값의 문자열 리터럴 유니언 타입을 확인할 수 있습니다. 아래 예제처럼 user 객체의 타입이 확인되지 않을 경우 keyof typeof 연산자를 함께 사용하게 되면 typeof 연산자로 해당 객체의 타입을 추출한 후 keyof 연산자로 해당 키 타입의 문자열 리터럴 유니언을 반환하게 됩니다.

const user = {
  name: 'lee',
  age: 20,
};
type UserKey = keyof typeof user; // 'name' || 'age'