[타입스크립트] 인덱스 시그니처

TypeScript의 인덱스 시그니처는 객체가 동적으로 속성을 가질 수 있음을 나타내는 방법이다. 이를 통해 정적으로 알 수 없는 속성을 런타임에 안전하게 사용할 수 있다.

인덱스 시그니처 사용하기

인덱스 시그니처는 객체 타입 안에 정의된 특수한 타입이다. 이를 통해, 객체가 미리 정의된 속성 외에도 추가 속성을 가질 수 있다. 다음은 인덱스 시그니처를 사용하는 간단한 예이다:

interface StringDictionary {
    [index: string]: string;
}

let myDict: StringDictionary = {
    "key1": "value1",
    "key2": "value2"
};

console.log(myDict["key1"]);  // Output: value1

위 예제에서 StringDictionary 인터페이스는 문자열 인덱스를 가지며, 이 인덱스에 해당하는 값도 문자열이다. 이런 식으로, StringDictionary 인스턴스는 임의의 문자열 키에 문자열 값을 가질 수 있다.

인덱스 타입 다루기

타입스크립트에서는 인덱스 타입(Index Types)을 사용해서 기존에 선언된 타입에서 특정 프로퍼티의 타입을 추출할 수 있다. 인덱스 타입은 브라켓([])을 이용해서 표현하며, 이를 통해 새로운 타입을 정의하거나 기존의 타입을 제한하는 데 유용하다.

예를 들어, 아래와 같이 Todo 인터페이스가 선언되어 있다고 해보자.

interface Todo {
  id: number;
  content: string;
}

Todo 인터페이스는 id와 content 두 개의 프로퍼티를 가지고 있다. 만약 이 중 id의 타입만을 따로 추출해서 사용하고 싶다면, 인덱스 타입을 이용할 수 있다.

type TodoId = Todo['id'];  // number

위 코드에서 Todo['id']는 Todo 인터페이스에서 id 프로퍼티의 타입을 가리킨다. 따라서 TodoId 타입은 number 타입이 된다. 이처럼 인덱스 타입을 사용하면 기존 타입에서 특정 프로퍼티의 타입을 쉽게 추출해서 사용할 수 있다.

인덱스 타입과 인덱스 시그니처

인덱스 타입과 인덱스 시그니처는 TypeScript에서 객체가 동적 속성을 가질 수 있게 하는 두 가지 메커니즘이다.

인덱스 타입은 keyof T와 같은 형태로 사용되면, T의 모든 속성 이름의 타입을 나타낸다. 이는 객체의 속성 이름을 안전하게 반복할 수 있게 해준다.

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

type PersonKeys = keyof Person;  // "name" | "age"

let a:PersonKeys='name'
console.log(a) //'name'
let b:PersonKeys='name1'//에러 나타남

위 예제에서 PersonKeys 타입은 Person 인터페이스의 모든 속성 이름을 나타내는 인덱스 타입이다.

const DevelopStatus={
ready:'준비 중',
develop:'개발 중',
complete:'개발 완료',
} as const;
//as const는 TypeScript에서 제공하는 특별한 구문으로,이를 사용하면 객체의 모든 속성들을 읽기 전용(read-only)으로 만든다. 이로 인해 객체의 속성들을 재할당하는 것을 막을 수 있다.

let myStatus:keyof typeof DevelopStatus='ready'
myStatus = 'develop';

console.log(myStatus); // Output: "develop"

// 아래 코드는 컴파일 에러를 발생시킨다. ('unknownStatus'는 'ready' | 'develop' | 'complete' 타입에 없다.)
// myStatus = 'unknownStatus';

위의 예제에서 DevelopStatusKeys는 DevelopStatus 객체의 모든 속성 이름들을 타입으로 가지고 있습니다. 따라서 DevelopStatusKeys 타입의 변수에는 'ready', 'develop', 'complete' 중 하나를 할당할 수 있습니다. 그 외의 값을 할당하려고 하면 TypeScript 컴파일러는 에러를 발생시킵니다. 이런 방식으로 keyof 연산자는 객체의 속성을 안전하게 다룰 수 있게 도와줍니다.

인덱스 타입과 인덱스 시그니처는 모두 TypeScript의 유연성과 안정성을 높이는 도구로, 둘 다 자주 사용된다.