Interface - Index Signature

@2023/09/18

안녕하세요 lika-7입니다

오늘은 저번시간에 이어 Interface의 Index Signature 에 대해 정리합니다

Interface - 함수 이후의 내용을 다룹니다

인덱스 시그니처

💡

객체의 속성을 동적으로 정의하는 인덱스 시그니처 키워드 [ ]

{
  [인덱스_이름: 인덱스_타입]: 값_타입;
}

왜 쓰나요?

1. 객체가 key, value 형식이며 key와 value의 타입을 정확하게 명시해야 하는 경우 사용할수 있습니다.

사용 예제

배열에서 사용법

//TypeScript

// 인터페이스
// 인덱스 기능 타입 - 인덱스 시그니처(Index Signature)

//배열
interface Fruits{
    [item: number]: string // 인덱스 시그니처 부분
}

const fruits: Fruits = ['Apple','Banana','Cherry']
console.log(fruits)

✅

1. Fruits 타입은 number 타입의 index를 가지고 이 index의 이름은 item입니다. 2. 해당 하는 값의 타입은 문자열이어야 합니다.

객체에서 사용법

//TypeScript

// 인터페이스
// 인덱스 기능 타입 - 인덱스 시그니처(Index Signature)

//객체
interface User{
    [key:string]: unknown
    name: string
    age: number
}

const heropy: User = {
    name: 'heropy',
    age: 28
}
heropy['isValid']=true
heropy['emails']=['truegienus@gmail.com','test@gmail.com']
console.log(heropy)

✅

1. User타입은 string타입의 index를 가지고 이 index의 이름은 key입니다. 2. 해당 하는 값의 타입은 어떤 값이 들어올지 정확히는 모릅니다(unknown)

정리

1. 인덱스 시그니처를 사용하면 동적 데이터 구조를 다룰 때 유용합니다.

2. 딕셔너리와 유사한 객체를 모델링 할 때 많이 활용됩니다.