5장 타입스크립트 인터페이스(Interface)

📚 인터페이스(Interface)

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 그냥 객체 타입을 정의할 때 사용하는 문법이라고 이해하면 쉽다.

 

인터페이스 정의가 가능한 범주

• 객체의 속성과 속성 타입
• 함수의 파라미터와 반환 타입
• 함수의 스펙(파라미터 개수와 반환값 여부)
• 배열과 객체를 접근하는 방식
• 클래스

 

인터페이스 정의 예제

let person = { name: 'Park', age: 99 }

function logAge(obj: { age: number }) {
  console.log(obj.age) // 99
}
logAge(person) // 99

 

함수에서 객체 속성의 타입을 지정해주고 있다.

인터페이스로 정의하면,

interface personAge {
  age: number;
}

function logAge(obj: personAge) {
  console.log(obj.age) // 99
}
var person = { name: 'Park', age: 99 }

logAge(person) // 99

logAge()의 인자는 personAge 라는 타입을 가져야한다는 것을 명시적으로 나타낼 수 있다.

 

 

 

📌 옵션 속성

인터페이스로 정의된 객체의 속성은 선택적으로 사용할 수 있다. 

interface Person {
  name: string
  age: number
}

function logAge(someone: Person) {
  console.log(someone.age)
}

var nana = { age: 100 }
logAge(nana) // 에러 발생

일반적으로 인터페이스를 사용할 때는 정의되어 있는 속성을 모두 사용해줘야 한다.

하지만 옵션 속성을 사용하면 꼭 모든 속성을  사용할 필요가 없다. 

옵션 속성은 선택적으로 사용할 속성 오른쪽에 ? 을 붙인다.

interface Person {
  name?: string
  age: number
}

function logAge(someone: Person) {
  console.log(someone.age)
}

var nana = { age: 100 }
logAge(nana) // 100

옵션 속성을 통해 상황에 따라서 인터페이스의 속성 사용 여부를 유연하게 결정할 수 있다.

 

 

📌 인터페이스 상속

인터페이스 상속으로 타입 정의를 확장할 수 있다.

클래스 상속과 같이 extends 예약어를 사용한다.

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

interface Developer extends Person {
  skill: string;
} 

var nana: Developer = {
  name: '나나씨',
  age: 21,
  skill: '감자',
}

Person 인터페이스를 Developer 인터페이스에 상속하고 있다. 

그리고 nana 객체가 Developer 인터페이스 정의를 사용하면, Person 인터페이스에 정의된 속성도 사용이 가능하다.

 

인터페이스 상속 시 주의점

하위 인터페이스의 타입이 상위 인터페이스의 타입과 호환이 되어야 한다.

 

📌 인터페이스를 이용한 인덱싱 타입 정의

user['name'], user[0] 과 형태로 배열의 특정 요소에 접근하는 것을 인덱싱이라고 한다.

인터페이스에서도 이러한 인덱싱 타입 정의가 가능하다.

interface StringArray {
  [index: number]: string
}

let contries: StringArray = ['한국', '미국', '된장국']

console.log(contries[0]) // 한국

 

[index: number]은 속성 타입. [index: number]: string은 값의 타입

 

interface SalaryMap {
  [level: string]: number;
}

var salary: SalaryMap = {
  junior: 100
}

객체 인덱싱 타입도 인터페이스로 정의할 수 있다.

 

📌 인덱스 시그니처

속성을 이름을 명시하지 않고 속성 이름의 타입과 속성 값의 타입을 정의하는 문법을 인덱스 시그니처라고 한다.

interface SalaryMap {
  [level: string]: number;
}

var salary: SalaryMap = {
  junior: 100,
  mid: 400,
  senior: 700,
  ceo: 0,
}

인덱스 시그니처는 속성의 타입과 값의 타입만 정의해주면 되기 때문에 보다 유연하게 사용할 수 있다.

위 예제와 같이 속성 타입이 문자열이고 값이 넘버기만하면 1개든 100개든 무한히 추가할 수 있는 장점이 있다.

 

인덱스 시그니처 사용상황

인덱스 시그니처는 재사용성이 높다는 장점이 있지만, 코드 자동완성 기능을 사용하지 못한다.

구체적으로 어떤 속성이 제공될지 알 수 없기 때문이다.

• 객체의 속성 이름과 값이 정해져 있는 경우: 속성  이름과 값 타입을 명시해서 정의
• 속성이름은 모르지만 속성 타입과 값의 타입을 아는 경우: 인덱스 시그니처 사용