객체 인덱스 시그니처

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 72번째.

때로는 포함될 값의 타입은 알고 있지만, 구체적인 속성 이름을 미리 알 수 없는 객체를 다뤄야 할 때가 있습니다. 이는 키가 동적인 딕셔너리(dictionary), 맵(map) 또는 설정(configuration) 객체로 작업할 때 흔히 발생합니다.

인덱스 시그니처를 사용하면 그러한 객체에 대한 타입 구조를 정의할 수 있습니다. 구문은 대괄호를 사용하여 키 타입과 값 타입을 지정합니다:

interface StringDictionary {
  [key: string]: number;
}

이 인터페이스는 "어떤 문자열 키든 숫자 값을 가질 것입니다"라고 명시합니다. 그러면 이 패턴과 일치하는 객체를 생성할 수 있습니다:

let scores: StringDictionary = {
  "alice": 95,
  "bob": 87,
  "charlie": 92
};

인덱스 시그니처는 사용자 설정 저장, 동적 키를 사용한 데이터 캐싱, 또는 속성 이름을 컴파일 타임에 알 수 없는 API 응답 처리와 같은 시나리오에서 특히 유용합니다. 키 타입은 일반적으로 string 또는 number이며, 값 타입은 모든 유효한 TypeScript 타입이 될 수 있습니다.

챌린지

쉬움

제품 카테고리와 해당 재고 수량이 동적으로 저장되는 제품 카탈로그 시스템을 위한 인터페이스를 생성하세요.

문자열 키(제품 이름)를 숫자 값(재고 수량)에 매핑하는 인덱스 시그니처를 사용하는 ProductCatalog라는 이름의 인터페이스를 생성하세요.

다음과 같은 기능을 가진 getStockLevel이라는 이름의 함수를 생성하세요:

두 개의 매개변수를 받습니다: ProductCatalog 타입의 catalog와 string 타입의 productName
주어진 제품 이름에 대한 재고 수량을 반환합니다
제품이 카탈로그에 존재하지 않으면 0을 반환합니다
명시적인 반환 타입으로 number를 가집니다

다음과 같은 기능을 가진 updateStock이라는 이름의 함수를 생성하세요:

세 개의 매개변수를 받습니다: ProductCatalog 타입의 catalog, string 타입의 productName, 그리고 number 타입의 newQuantity
주어진 제품의 재고 수량을 업데이트합니다
void를 반환합니다

다음과 같은 기능을 가진 getTotalStock이라는 이름의 함수를 생성하세요:

ProductCatalog 타입의 catalog 매개변수를 받습니다
카탈로그에 있는 모든 재고 수량의 합계를 반환합니다
명시적인 반환 타입으로 number를 가집니다

테스트 데이터를 생성하세요:

다음 제품들을 포함하는 ProductCatalog 타입의 inventory를 생성하세요:
- "laptop": 15
- "mouse": 50
- "keyboard": 25
- "monitor": 8

함수를 테스트하고 다음 출력값들을 출력하세요:

inventory와 "laptop"으로 getStockLevel을 호출합니다
inventory와 "tablet"으로 getStockLevel을 호출합니다
inventory로 getTotalStock을 호출합니다
inventory, "mouse", 75로 updateStock을 호출합니다
inventory, "webcam", 12로 updateStock을 호출합니다
inventory와 "mouse"로 getStockLevel을 호출합니다
inventory와 "webcam"으로 getStockLevel을 호출합니다
inventory로 getTotalStock을 호출합니다

직접 해보기

// TODO: 여기에 코드를 작성하세요

// ProductCatalog 인터페이스를 생성하세요


// getStockLevel 함수를 생성하세요


// updateStock 함수를 생성하세요


// getTotalStock 함수를 생성하세요


// 테스트 데이터 생성 - inventory 객체


// 함수를 테스트하고 결과를 출력하세요
console.log(getStockLevel(inventory, "laptop"));
console.log(getStockLevel(inventory, "tablet"));
console.log(getTotalStock(inventory));
updateStock(inventory, "mouse", 75);
updateStock(inventory, "webcam", 12);
console.log(getStockLevel(inventory, "mouse"));
console.log(getStockLevel(inventory, "webcam"));
console.log(getTotalStock(inventory));