15. 동적 데이터 인덱스 시그니처

인덱스 시그니처

TS에서는 '인덱스 시그니처'를 명시하여 유연하게 매핑을 표현할 수 있음.

type Rocket = {
  [property: string]: string
};

const rocket: Rocket = {
  name: 'Falcon 9',
  variant: 'v1.0',
  thrust: '4,940 kN',
};

// 키 이름, 키 타입, 값 타입
[property: string]: string

하지만 이런 식의 인덱스 시그니처는 타입 체크에 문제가 있다.

• 모든 키를 허용(name 대신 Name도 허용함)
• 특정 키가 필요 없음({}도 유효한 타입으로 허용)
• 키 마다 다른 타입 안 됨(모든 타입이 string으로 고정됨)
• 자동 완성 안됨(필드가 string으로 모든 값이 올 수 있음)

그래서 인터페이스를 쓴다.

interface Rocket {
  name: string;
  variant: string;
  thrust_kN: number;
}

const falconHeavy: Rocket = {
  name: 'Falcon Heavy',
  variant: 'v1',
  thrust_kN: 15_200
};

그럼 인덱스 시그니처 언제 씀?

동적 데이터를 표현할 때 사용함!
csv 같은 경우에
열 이름이 무엇인지 알 수 없다면 사용 하기 적절
(만약 열 이름을 안다면 타입 단언으로 사용)

interface CSVRecord {
  [columnName: string]: string | number;
}

function processCSV(data: string[]): CSVRecord[] {
  return data.map(row => {
    const record: CSVRecord = {};
    const columns = row.split(",");
    
    columns.forEach((value, index) => {
      const columnName = `column${index}`;  // 실제 사용 시에는 열 이름을 파싱할 수 있습니다.
      record[columnName] = value.trim();  // 값을 적절히 형변환하여 저장
    });

    return record;
  });
}

하지만 인덱스 시그니처는 타입 체크 제한, 성능 문제가 발생할 수 있음. 데이터 구조가 변할 수 있는 상황이나, 프로퍼티 키가 런타임에만 결정되는 경우에 유용함.