✍🏻

인덱스 시그니처 사용법

객체 내부(키와 벨류)에 대한 타입을 지정해준다고 생각하면 될듯하다.


export const EMPTY_MESSAGE = {
  DATE: "등록된 프로젝트 기간이 존재하지 않습니다.",
  EXPLANATION: "내용이 존재하지 않습니다.",
  MEMBER: "등록된 멤버가 존재하지 않습니다.",
  TECHSTACKS: "등록된 기술 스택이 존재하지 않습니다.",
}

이런 객체가 있을때

key값은 string값의 4개, value는 string으로 고정시키고 싶다.

먼저 key값의 타입을 지정해주자.


export type EmptyMessaggeType = "DATE" | "EXPLANATION" | "MEMBER" | "TECHSTACKS"

그리고 인덱스 시그니처를 통해서 key와 value의 타입을 지정해주자.


[key in 원하는 타입]: 원하는타입


export type EmptyType = {
  [key in EmptyMessaggeType]: string
}

그리고 객체에 이 타입을 지정해주면 끝!


export const EMPTY_MESSAGE: EmptyType = {
  DATE: "등록된 프로젝트 기간이 존재하지 않습니다.",
  EXPLANATION: "내용이 존재하지 않습니다.",
  MEMBER: "등록된 멤버가 존재하지 않습니다.",
  TECHSTACKS: "등록된 기술 스택이 존재하지 않습니다.",
}

사용하는 곳에서는


const EmptyMessage = ({ type }: EmptyMessageProps) => {
  return (
    <Text
      color="grey.500"
      fontSize="lg">
      {EMPTY_MESSAGE[type]}
    </Text>
  )
}

타입이 변수이므로 객체[타입] 으로 접근하면 된다.