[TypeScript] keyof 인터페이스나 타입에서 키의 집합 추출 및 사용

keyof는 TypeScript에서 매우 유용한 연산자로, 주어진 타입의 모든 퍼블릭 키(속성 이름)들의 리터럴 유니온(합집합)을 생성합니다. 이를 통해 객체의 키에 접근하고 사용하는 방법을 타입 안전하게 만들 수 있습니다.

 

keyof 사용하기

간단한 예를 들어보겠습니다. TypeScript에서 interface 또는 type을 정의할 때, 해당 타입의 모든 키를 추출하고 싶을 수 있습니다. 예를 들어, 다음과 같은 인터페이스가 있다고 가정해 봅시다.

User Interface 정의

interface UserInterface {
  id: number;
  name: string;
  email: string;
}

이 경우, keyof User는 'id' | 'name' | 'email'이 됩니다. 즉, keyof를 사용하면 User 인터페이스의 모든 키를 문자열 리터럴 유니온으로 가져올 수 있습니다. 이것은 특히 함수에서 객체의 키를 파라미터로 받을 때 유용합니다.

Component에 사용해보기

/**
 * @interface UserProps
 * @member {UserInterface} type - 타입
 * @member {UserInterface} key - 타입의 키 집합
 * @member {(value: UserInterface) => void} setField - 데이터 변경 함수
 */
interface UserProps {
  type: UserInterface
  key: keyof UserInterface
  setField: (value: UserInterface) => void
}

/**
 * @name UserComponent
 * @returns {JSX.Element}
 */
export default function UserComponent(props: UserProps): JSX.Element {
  return (
    <>
      <input
        onChange={(e) => {
          setField({ ...props.type, [key]: e.target.value })
        }}
      />
    </>
  )
}

여기서 주목할 점은, [props.key] 구문을 사용하여 동적으로 객체의 속성을 업데이트한다는 것입니다. props.key는 UserInterface의 키 중 하나이기 때문에, 이 방식으로 타입 안전성을 유지하면서도 유연하게 객체의 속성을 다룰 수 있습니다.

function updateUser(key: keyof UserInterface, value: UserInterface[keyof UserInterface]) {
  // 여기서는 실제 사용자 정보 업데이트 로직을 구현합니다.
  // 예를 들어, 데이터베이스에 저장된 사용자 정보를 업데이트할 수 있습니다.
}

keyof 연산자는 TypeScript에서 객체의 키를 안전하고 효율적으로 다루는 데 매우 유용합니다. 특히, React 컴포넌트에서 props의 타입을 정의할 때 이를 활용하면, 타입 안전성을 보장하면서도 유연한 코드 작성이 가능해집니다.