[TypeScript] 타입 조작 - keyof 연산자

🐾 타입 조작

---

🐾 keyof 연산자

객체 타입으로부터 프로퍼티의 모든 key들을 string literal union 타입으로 추출하는 연산자

interface Person {
    name: string;
    age: number;
}

function getPropertyKey(person: Person, key: 'name' | 'age'){
    return person[key];
}

const person: Person = {
    name: '기지',
    age: 27,
};

getPropertyKey(person, 'name');

위처럼 person의 프로퍼티를 꺼내 반환하는 함수를 만든 경우, Person 타입에 새로운 프로퍼티가 추가되거나 수정된다면 이 타입도 계속 수정을 해야한다.

 

하지만 keyof 연산자를 이용한다면 간단하게 해결할 수 있다.

// 주의!
// keyof 연산자는 타입에만 사용할 수 있음
// -> keyof person ❌
function getPropertyKey(person: Person, key: keyof Person){
    return person[key];
}

keyof 타입 형태로 사용하며 타입의 모든 프로퍼티 key를 string literal union 타입으로 추출한다.

• keyof Person의 결과값은 'name' | 'age'

 

 

⚠️ keyof 연산자는 타입에만 적용할 수 있다. ⚠️

 

Perosn 대신 변수 person이 들어갈 경우 오류가 발생한다.

function getPropertyKey(person: Person, key: keyof person) { // ❌
  return person[key];
}

 

 

 

 

 

 

🐾 typeof 와 함께 사용

자바스크립트에서 특정 값의 타입을 문자열로 반환하는 연산자

타입을 정의할 때 typeof 연산자를 사용하면 특정 변수의 타입을 추론하는 기능을 가진다.

// 타입을 정의할 때 사용하면 어떤 변수의 타입을 뽑아오는 역할을 함
type Person2 = typeof person2;

// Person2에는 person2에서 뽑아온 객체 타입이 들어가 있음
// => Person2 대신 typeof person2로 사용 가능
function getPropertyKey2(person: Person2, key: keyof typeof person2){ // key에는 'name' | 'age' 유니온 타입이 들어감
    return person[key];
}

const person2 = {
    name: '기지',
    age: 27,
};

Person2에는 변수 person2에서 가져온 객체 타입이 들어간다.

 

 

 

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의