keyof와 typeof 연산자

H802·2024년 10월 31일

📘 keyof와 typeof 연산자

  • 타입스크립트에서 타입을 추론하고 조합하는 데 유용하게 사용되는 기능

📘 typeof 연산자

  • 이미 선언된 변수나 객체의 타입을 가져오는 데 사용
  • 런타임 객체의 타입을 컴파일타임 타입으로 변환
  • 변수의 타입을 가져와서 새로운 타입을 정의
  • 코드가 변경되더라도 타입이 자동으로 업데이트되기 때문에, 코드의 안전성과 유지보수성을 높이는 데 큰 도움이 됨!
const person = {
    name: "Alice",
    age: 30
};

/// person 변수가 가지는 타입을 가져옴
// 새로운 타입으로 정의
type PersonType = typeof person; // { name: string; age: number; }

📘 keyof 연산자

  • 객체의 속성 이름을 타입으로 가져올 수 있음
  • 속성 이름을 나타내는 문자열 리터럴 타입을 정의
  • 문자열 리터럴 타입으로, 타입들 중 하나의 값을 가지면 됨
    😀 즉, PersonKeys는 "name" 또는 "age"라는 두 개의 문자열 값을 가짐!
type PersonKeys = keyof PersonType; // "name" | "age"
const car = {
    make: "Toyota",
    model: "Camry",
    year: 2020
};

// 1. car 객체의 타입을 정의
type CarType = typeof car; 
// { make: string; model: string; year: number; }

// 2. CarType의 키를 가져옴
type CarKeys = keyof CarType; 
// "make" | "model" | "year"

// 3. 속성 값을 가져오는 함수 정의
function getCarValue(key: CarKeys) {
    return car[key]; // car 객체의 속성에 접근
}

// 4. 함수 호출
console.log(getCarValue("make"));  // "Toyota"
console.log(getCarValue("model")); // "Camry"
console.log(getCarValue("year"));  // 2020
profile
배운 내용 정리하기 위해 쓰는 블로그

0개의 댓글