TypeScript - 인덱스타입

1.인덱스타입은 속성이름이 정해져있지 않고 동적으로 처리해야 할 때 사용할 수 있다.

interface Props {
  [key: string] : string;
}

const p: Props = {
  a: 'd',
  b: 'e',
  c: 3 //여기서 숫자를 주면 문제가 된다.key는 문자열이고 키에 해당하는 값 또한 문자열이라고 설정했기 때문이다.
  0: 'd';,
  1: 'b'
}

p["a"] //or p[3]
//여기서 p[0]을 하면 'd'라는 값이 나온다.

2. props의 키를 문자열로 받을 수 있게 해놨지만 특정한 이름으로 고정할 수 있다.

interface Props {
  name: string;
  [key: string]: string;
}

const p: Props = {
  name: 'hello',
  a: 'd',
  b: 'e',
  c: '3',
  0: 'd',
  1: 'b'
} 
//p는 value타입이 문자열인 어떠한 프로퍼티든 가질 수 있지만 이름이 꼭 있어야 한다.

p.name//name은 꼭 보장받고,'key:string'이기 때문에 key값으로 모든 문자열이 올 수 있고, Props는 인덱스 타입이여서 모든 문자열이든 접근할 수 있다.

3. 인덱스 타입에서 keyof 연산자를 이용하면 Props의 key들에 대한 타입을 가져올 수 있다.

interface Props {
  name: string,
  [key: string]: string;
}

let keys: keyof Props; //keys라는 타입에 keyof라는 연산자를 이용해서 Props라는 타입을 전달하게 되면 'string | number' 타입이 된다. 왜냐하면 key의 string은 인덱스타입에서 시그니처 파라미터 값으로 들어온 것은 숫자또는 문자열로 접근할 수 있어서다.

4. 인덱스 시그니처가 아닌 일반적인 interface에 keyof 연산자를 사용하면

interface User {
  name: string;
  age: number;
  hello(msg: string): void;
}

let keysOfUSer: keyof User;
//keyOfUser의 변수에는 User의 키들이 유니온타입으로 'let keyOfUser: "number" | "age" | "hello"'처럼 보이게 된다.keysOfUser에는 키들만 할당할 수 있게 된다.
keyOfUser = "age"

5. User타입에 특정한 타입들을 key이름으로 가져올 수 있다.

interface User {
  name: string;
  age: number;
  hello(msg: string): void;
}

let keysOfUSer: keyof User;
keyOfUser = "age"

let helloMethod: User["hello"];
helloMethod = function(msg: string) {
  
}
//hello라는 이름으로 helloMethod를 정의하면 helloMethod는 User의 hello키에 해당하는 값만 할당할 수 있다.

💡알아둬야 할 것들
1. 인덱스 시그니처 매개변수 형식은 'string' 또는 'number'이여야 한다.
2. 자바스크립트이 객체는 이름으로 접근할 수 있다. 하지만 타입스크립트는 숫자로도 접근할 수 있다.