[TypeScript] 인덱스 서명 object index signature

💻 index signature

{ [Key: T]: U }형식으로 객체가 Key를 여러개 가질수있으며 Key와 매핑되는 Value를 가지는 경우 사용한다.
1. 타입을 미리 만들고 싶은데 object자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우
2. 타입지정할 속성이 너무 많은 경우

🖤 적용

// object index signature
interface thisType {
  // 모든 string으로 들어오는 key값에 value는 string 아니면 number
    [key: string]: string | number;
}

let obj: thisType = {
    model: "k5",
    brand: "kia",
    price: 6000,
    year: 2030,
    date: "6월",
    percent: "5%",
    dealer: "초롱이",
};

[]문법은 다른 속성과 사용할 수 있지만 {모든 속성:string,age:number}은 논리적이지않아 금지한다. 아래는 예시코드

interface StringOnly {
  age : number,   // 에러
  [key: string]: string,
}
  
// 가능
  interface StringOnly {
  age : number,   //가능
  [key: string]: string | number,
}

❗ 주의

• Key의 타입은 string, number, symbol, Template literal 타입만 가능
• 동일한 key를 여러개 가질 수 없다.

✔ array

interface NumTest {
  // (대괄호 안엔 string 또는 number만 가능)
  // object의 키값이 숫자로 들어오는 경우 value로 string을 가져야한다
    [key: number]: string;
}

let num: NumTest = {
    0: "Kim",
    1: "Lee",
    2: "Park",
};

즉 {모든 숫자속성: string}이라는 뜻이다.

💻 Recursive Index Signatures

속성명이 재귀적으로 중복속성에 대해 타입을 선언할땐 recursive 타입으로 선언할 수 있다.

• 예시 #1

interface CssType {
    'css': CssType | number	// 자기 자신인 CssType 타입을 선언해서 중복속성을 선언한다.
    						// 마지막 숫자를 위해 number타입도 선언한다.
}

let css: CssType = {
'css': {
'css': {
'css': 28,
}
}
}

* 예시 #2
```javascript
// recursive 타입
interface workType {
    "font-size": number;
    [key: string]: number | workType;
}

let obj01: workType = {
    "font-size": 10,
    secondary: {
        "font-size": 12,
        third: {
            "font-size": 14,
        },
    },
};