[TypeScript/타입스크립트] 인덱스 시그니처(Index Signature), Keyof Assertion 개념 이해하기

 

 

 

 

➜ Basic Types 기본타입 문법

➜ function 함수 문법

➜ Array&Tuple 배열과 튜플

➜ 클래스(Class) (⚠내마음대로 정리했음주의⚠)

➜ 인터페이스(interface)

➜ 인덱스 시그니처(Index Signature), Keyof Assertion

➜ 내장함수, 메서드, 접근제한자 총정리

 

 

 

 

 

인덱스 시그니처(Index Signature)

객체의 동적 속성에 접근할 수 있도록 해주는 개념

객체의 속성 이름이 미리 정해지지 않았을 때, 문자열이나 숫자 등의 인덱스를 사용하여 속성에 접근할 수 있다.

 

interface TransactionObj {
    readonly [index: string]: number;
}

const transactions: TransactionObj = {
    Pizza: -10,
    Books: -5,
    Job: 50,
};

TransactionObj 인터페이스는 [index: string]: number 형태의 인덱스 시그니처를 갖는다.

transactions 객체에는 인터페이스 형식인 문자열 : 숫자를 따라서

'Pizza', 'Books', 'Job'와 같은 문자열 키에 해당하는 숫자 값을 할당할 수 있다.

 

 

반응형

Keyof Assertion

객체의 모든 속성 이름을 유니온 타입으로 가져올 수 있다.

 

interface Student {
    name: string;
    GPA: number;
    Classes?: number[];
}

const student: Student = {
    name: "Doug",
    GPA: 3.5,
    Classes: [100, 200],
};

for (const key in student) {
    console.log(`${key}: ${student[key as keyof Student]}`);
}

keyof Student는 "name" | "GPA" | "Classes"와 같은 타입을 반환한다.

 

그러니까

key 는 속성의 이름

key as keyof 변수명 은 속성값

 

<key as keyof 변수명>은 주로 for...in 반복문과 같이 객체의 속성 이름들을 순회할 때 사용된다.

 

cf. typeof는 변수나 객체의 '타입'을 가져온다.