인터페이스

프로그래밍 언어에서 인터페이스는 주로 클래스를 작성할 때 기본이 되는 틀을 제공하면서, 다른 클래스 사이의 매개역할을 하는 추상 클래스 역할을 한다.

타입스크립트에서 인터페이스는 객체 타입을 정의할 때 사용한다.

• 객체의 속성, 속성의 타입 정의
• 함수의 매개변수
• 함수의 매개변수, 반환 타입 등
• 배열과 객체를 접근하는 방식
• 클래스

인터페이스 형태

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

let john: Person = { name :'John', age: 20 };

인터페이스를 이용한 함수 파라미터 타입 정의

객체는 함수의 파라미터/반환값으로 사용될 수 있다. 아래 예시는 Person 타입의 파라미터를 전달받아 해당 인자의 age 값을 로그를 출력하는 함수이다.

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

logAge(john); // 20

인터페이스를 이용한 함수 반환 타입 정의

마찬가지로 함수의 반환 타입에도 인터페이스를 사용할 수 있다. 아래 예시에서 logPerson 함수에는 반환 타입을 적어주었지만 적지 않아도 타입 추론을 하기 때문에 에러를 발생시키지 않는다.

function logPerson(person: Person): Person {
  return person;
}

console.log(logPerson(john)); 
/** {
  "name": "john",
  "age": 20
}
*/

인터페이스 옵션 속성

인터페이스로 정의된 객체의 속성을 선택적으로 사용하고 싶을 때 옵션 속성을 사용한다. ?를 사용하면 함수에서 옵셔널 파라미터를 사용했던 것처럼 인터페이스의 속성을 선택적으로 사용할 수 있다.

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

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

let john = { age: 20 };
logAge(john);

인터페이스 상속

인터페이스 상속도 클래스 상속과 마찬가지로 extends 키워드를 사용한다.

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

interface Developer extends Person {
  skill: string;
  career: number;
}

const tom: Developer = { 
  name: 'tom',
  age: 21,
  skill: 'React',
  carrer: 3
};

인터페이스 상속 주의점

주의할 것은 상속을 여러 번 할 수 있다는 점이다.

interface Hero {
  power: boolean;
}

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

interface Developer extends Person {
  skill: string;
}

let tom: Developer = {
  name: '스파이더맨',
  age: 21,
  skill: 'React',
  power: true
}

Hero 인터페이스를 Person 인터페이스가 상속받고, Person 인터페이스를 Developer 인터페이스가 상속받는다. tom 변수는 3개의 인터페이스 속성을 모두 타입에 맞게 선언해주어야 한다.