TypeScript에 대한 간단한 정리 - 06. 인터페이스 - 인덱싱 가능 타입 , 확장(상속)

인덱싱 가능 타입

타입스크립트에서 인터페이스에서 인덱싱 가능 타입은 인덱스 시그니처를 사용하여 객체가 특정 키로 값을 접근할 수 있게 정의하는 방법을 말한다.

이를 통해 객체가 특정 타입의 키를 사용해서 접근할 수 있는 값을 가질 수 있게 해준다.

 

인덱스 시그니처 (Index Signatures)

인덱싱 시그니처는 객체 타입에 대해서 키와 값을 지정하는 문법으로 인터페이스에서 인덱싱 가능 타입을 정의하려면 인덱스 시그니처를 사용한다.

이 시그니처는 특정 타입의 키에 대응되는 값을 정의 할 수 있도록 해준다.

 

인덱싱 시그니처는 인터페이스 내부에 작성하게 되는 부분을 지칭하는데 우선 인덱스 시그니처를 사용해서 생성한 인터페이스의 예시를 한번 보자면 

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

와 같이 사용할 수 있는데 여기서 내부에 

[key : number ]: string

부분이 인덱싱 시그니쳐이다.

 

이전에 함수의 호출 시그니처를 사용했을 때는 () 소괄호를 사용해서 구성했었는데,

// 함수 : 호출 시그니쳐

interface CallSignature {
    (arg : string) : string
}

 

인덱싱 시그니쳐는 [] 대괄호로만 바뀐 형태를 띄고 있다.

 

이 인덱싱 시그니쳐는 동적으로 키를 사용하여 객체의 값을 가져오거나 설정할 수 있도록 하기 위함이다.

 

먼저 배열에 대해서 인덱싱 시그니쳐를 사용해보면 아래와 같이 구현할 수 있다.

물론 이때 자동적으로 index는 0부터 설정된다.

 

그렇다면 여기서 

이 그냥 배열이 있는데 왜 궂이 저렇게 사용하나 싶은데 

 사실 둘은 차이가 있는게 

이렇게 인덱싱 시그니쳐를 사용해서 배열을 생성하는거 사실 일반 배열이 아니라 배열 형태를 띈 객체이다.

그렇기 때문에 일반 배열에서 사용하는 배열의 내장 메서드(예: push, pop, map)를 사용할 수 없어진다. 

아무튼 이렇게 인덱싱 시그니쳐를 사용한 배열형태의 객체를 만드는 방법을 확인해봤고 다음은 그냥 객체형태를 사용한 경우인데 key를 string 타입으로 지정하고

이렇게 구현되어 있다면 기본적으로 우리는 .(점) 표기법을 사용해서 객체의 값을 사용할 수 있었는데 

이 인덱싱 시그니쳐를 성정해주면 []를 사용해서 속성을 조작하는 것이 가능해진다.

그런데 만약 

인덱싱 시그니쳐에 추가적으로 다른 속성이 존재할 경우 

이렇게 객체를 선언 해주고 나서 

이렇게 사용하는게 문제가 없지만 이 때 만약 인덱싱 시그니쳐가 인터페이스에 존재하지 않다면

먼저 선언하지 않은 속성들에 대해서 오류가 발생한다.

 

그리고 이렇게 사용하면 동적으로 값을 추가할 수도 없게 된다.

기존에는 

이렇게 없는 key인 a에 접근하는 것도 가능하고, 추가로 key를 등록하고 그 key를 [] 대괄호 표기법을 사용해서 사용도 가능했었는데 

이 인덱스 시그니쳐가 없다면 모두 불가능하다.

 

확장(상속)

인터페이스의 확장은 새로운 인터페이스를 정의하면서 기존 인터페이스의 모든 속성을 상속받고, 필요에 따라 새로운 속성을 추가할 수 있는 기능이다

interface A {
  속성1: string;
}

interface B extends A {
  속성2: number;
}

 

A에서 기본적으로 인터페이스를 생성했다면 B에서는 이걸 extends 키워드를 사용해서 확장(상속)해서 사용이 가능하다.

이렇게 상속하면 B는 A에 있는 모든 속성을 사용할 수 있게 된다.

물론 선택적 속성이 아닌 경우엔 B를 통해서 객체를 생성한다면 A에 있는 속성도 모두 선언해줘야만 한다.

그래서 상속 하는 클래스에서 

이렇게 선택적으로 설정해줘야만 선택 받는 인터페이스를 통해 객체를 생성할때도 선택적으로 속성을 추가할 수 있게된다.

 

이런 상속은 중첩해서 사용도 가능하고 

한번에 다중으로 상속도 가능하다

 

유의해야할 점은 상속하는 인터페이스에 상속을 받는 인터페이스와 동일한 명칭의 속성이 다른 타입으로 존재한다면 에러가 발생한다.

 

확장(상속)과는 별개로 동일한 이름으로 인터페이스를 추가하는 것도 가능한데 

이때는 같은 이름의 속성을 등록한다면 타입까지 맞춰줘야만 한다.

그리고 이렇게 생성한 A 인터페이스를 사용해서 선언된 객체의 경우는 

이렇게 각자 속성이 추가되어 있다고 하더라도 

선언된 모든 속성을 사용해야만 한다.