타입스크립트 interface 인덱서블 타입

인덱서블 타입 (Index Signatures(Indexable types))

 

기본적인 인터페이스는 직접 속성의 타입을 지정해주었다.

그러나 객체, 배열과 같은 경우 속성이 많이 들어갈 경우 하나하나 타이핑을 해줄 수는 없는 경우도 존재한다.

 

이런거 하나하나 다 어떻게 지정할건데 ㅠㅠ

[
	{
		'2024-03-11':{date:11, month:3, year:2024},
		'2024-03-12':{date:12, month:3, year:2024},
		'2024-03-13':{date:13, month:3, year:2024}
		},
]

 

또는 어떤 속성이 들어갈 지 확정지을 수 없는 경우도 있다,

이 경우에는 인덱서블 타입을 활용하는 것이 좋다.

 

[인덱서]의 타입은 string과 number만 지정할 수 있다.

객체의 key는 문자만 되고(object.key), 배열은 인덱스(array[0])는 숫자이기 때문이다.

 

예시

기본 인덱서블 타입

interface PersonIndex {
  [key: string]: string; // key가 string, value가 string
}

const people: PersonIndex = {
  name: "momo",
  job: "entrepreneur",
  //age: 17, // error! 'number' 형식은 'string' 형식에 할당할 수 없습니다.
};

 

조금 더 복잡한 값을 가진 인덱서블 타입

interface EmployeeIndex {
  [key: string]: { id: number; name: string }; // key가 string, value가 {id, name} 꼴
}

const employees: EmployeeIndex = {
  first: { id: 1, name: "park" },
  second: { id: 2, name: "jin" },
};

 

 

정규 표현식을 사용

interface RegexDict {
  [key: string]: RegExp; // key가 string, value가 RegExp
}

// 변수 이름 변경
const patterns: RegexDict = {
  sth: /abc/,
};

 

 

배열의 인덱싱에 사용

interface StringList {
  [index: number]: string; // key가 숫자, value가 string
}

let words: StringList = [];

words[0] = "hi";
//words[1] = 3; // error! 'number' 형식은 'string' 형식에 할당할 수 없습니다.

 

 

중첩 사용

interface PhoneBook {
  [phone: string]: {
    num: number;
  };
}

interface ContactInfo {
  name: string;
  address: string;
  phones: PhoneBook;
}

const person: ContactInfo = {
  name: "momo",
  address: "seul",
  phones: {
    home: {
      num: 11122223333,
    },
    office: {
      num: 44455556666,
    },
  },
};

console.log(person.phones["home"].num); // 11122223333 출력

 

 

사용자 정의 타입 사용

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

interface UserDirectory {
  [key: string]: Person;
}

const users: UserDirectory = {
  "1": { id: 1, name: "darren" },
  "2": { id: 2, name: "mary" },
};

console.log(users["1"].name); // "darren" 출력

 

 

함수 타입을 사용

// 타입 별칭 사용
type Callback = (arg: string) => void;

interface CallbackMap {
  [key: string]: Callback;
}

const actions: CallbackMap = {
  "click": (arg) => console.log(arg),
  "submit": (arg) => console.log(arg),
};

actions["click"]("Hello!"); // "Hello!" 출력`