Typescript 인터페이스

인터페이스란 상호간 통신을 위한 약속이다. 타입스크립트에서도 이러한 인터페이스를 통해 사용할 값의 형태등을 확인하게 된다.

선언한 인터페이스는 사용시 해당 값에 대한 검사를 진행하게 되며, 만약 해당값이 인터페이스를 따르지 않는다면 오류를 반환하게 된다.

interface A {
  name: string,
  id: number
}

만약 A라는 인터페이스가 다음과 같다고 하자. A의 name필드는 문자열이여 하며, id 필드는 숫자여야 한다.

const a: A = {
  name: "kim",
  id: 123
}

다음과 같이 a객체는 A인터페이스를 따르며, name 조건과, id 조건을 만족하였으므로 정상적인 선언이 된다.

하지만 다음과 같이 조건을 만족하지 않으면 오류를 리턴하게 된다.

b 객체는 숫자가 들어가야 하는 id에 문자열을 사용하여 오류가 났다.

c 객체는 인터페이스에 없는 addr이라는 필드를 사용하여 오류가 난다.

특별한 필드

인터페이스 정의시 불확실한 값에대한 정의가 필요하다면 어떻게 할까?

만약 필드중 하나가 올수도 있고 오지 않을수도 있는 상황이라면?

이럴때는 필드명에 "?" 를 사용한 옵션 프로퍼티를 사용한다.

interface A {
  name: string,
  id: number,  
  addr?: {
      addr1: string,
      addr2: string,
      addr3?: string
  }
}

위에서 본 예시에 addr이라는 필드를 옵션 프로퍼티로 추가하였다.

addr이라는 필드는 사용해도 되고 사용하지 않아도 된다.

b객체는 addr 필드를 사용하지 않고, c 객체는 addr라는 필드를 사용하였다.

이렇게 옵션 프로퍼티로 선언된 필드의 경우 사용에 약간의 주의가 필요하다.

타입 스크립트는 옵션 프로퍼티로 선언된 객체의 경우 undefined일 수 있는 가능성이 있다고 판단하기 때문에, 옵셔널 체이닝을 통해 사용해야 한다.

즉 타입스크립트 컴파일러에게 "addr이라는 필드가 선언되어 있다면" addr1를 사용한다 라는것을 명시해주는 것이다.

인터페이스를 사용하다보면 하나에 객체에 사용될 필드가 일정하지 않을 수 있다.

즉 같은 도메인의 데이터가 넘어올때, 구체적인 필드가 다를 수 있는것이다.

{
  id : 123,
  type: {
    id1 : 1,
    id3 : 4,
    id8 : 10  
  }
}


{
  id : 456,
  type: {
    id2: 0,
    id5: 4,
    id9: 10
  }
}

다음은 예시로 사용할 두개의 객체다. 한 객체는 type라는 필드에 id1, 3, 8이라는 필드가 존재하고, 두번째 객체는 id2, 5, 9 라는 필드가 존재한다.

이럴 경우 불확실한 모든 필드에 대해 옵션 프로퍼티로 선언을 해야할까??

interface B {
  id: number,
  type: {
    [field: string] : number
  }
}

답은 위와같이 선언하면 된다.

type이라는 필드가 가지는 객체는 어떠한 값이 넘어올지 모른다. 하지만 string: number이라는 규칙은 지키기 때문에 다음과 같이 선언이 가능하다.

즉 id1 : 1 / id2 : 0 등 모든 필드들이 string: number의 형태를 띄고있기 때문에 다음과 같은 선언을 통해 두개의 객체에 대응할 수 있게 된다.

동일한 인터페이스 B를 따르는 a, b 객체 모두 오류없이 선언이 되는 모습이다.