타입스크립트 | 인터페이스

인터페이스

1. 인터페이스 기본

타입에 이름을 지어주는 또 다른 문법을 말한다.

상호간에 약속된 규칙을 만들어주는 문법으로 객체의 구조를 정의하는 데 특화된 문법이다. 객체를 다루는 상속, 합침 등의 특수한 기능을 제공하기 때문에 편하고 효율적으로 객체를 정의하게 해준다.

 

 

기본적인 선언 방식은 다음과 같다.

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

 

선택적 프로퍼티나 읽기 전용 프로퍼티도 만들 수 있다.

interface IPerson {
  readonly name: string; // 읽기 전용 프로퍼티
  age?: number; // 선택적 프로퍼티
}
const person: IPerson = {
  name: "홍길동",
};
// person.name = "김길동"; // 에러 : readonly

 

타입 별칭과 문법적인 기능만 다를 뿐 기본적인 기능은 같다. 다만, 타입별칭과 달리 union 이나 intersection 타입을 정의하는 것은 불가능하다.

 

인터페이스에서 메서드 타입 정의하기

함수 타입 표현식을 이용해 메서드 타입을 정의하는 것도 가능하다.

interface IPerson {
  readonly name: string;
  age?: number;
  sayHi1: () => void;
}

 

호출 시그니쳐를 이용하여 메서드의 타입을 정의할 수도 있다.

interface IPerson {
  readonly name: string;
  age?: number;
  sayHi2(): void;
  sayHi2(a: number): void;
}

참고로 메서드 오버로딩을 구현하려면 호출 시그니쳐를 이용하여 메서드의 타입을 정의해야 한다.

 

2. 인터페이스 확장

인터페이스의 중복 작성/정의를 막는 방법으로 자바나 파이썬의 상속과 아주 유사한 개념이다. 사용 예시는 아래와 같다.

interface IAnimal {
  name: string;
  color: string;
}

interface IDog extends IAnimal {
  isBark: boolean;
}

interface ICat extends IAnimal {
  isScratch: boolean;
}

const dog: IDog = {
  name: "",
  color: "",
  isBark: true,
};

const cat: ICat = {
  name: "hello",
  color: "",
  isScratch: true,
};

interface 타입이름 extends 확장할_타입이름 형태로 정의하면 해당타입에 정의된 모든 프로퍼티를 다 가지고 오게 된다.

 

프로퍼티 재정의

확장과 동시에 프로퍼티의 타입을 재정의하는 것 또한 가능하다.

 

아래는 ICat 인터페이스에서 IAnimal 인터페이스의 name 프로퍼티를 재정의하는 예시이다.

interface IAnimal {
  name: string;
  color: string;
}

interface ICat extends IAnimal {
  name: "hello";
  isScratch: boolean;
}

const cat: ICat = {
  name: "hello",
  color: "",
  isScratch: true,
};

재정의할 때에는 상속받은 인터페이스(원본 프로퍼티)의 서브 타입으로만 재정의할 수 있다.

 

타입 별칭 확장하기

인터페이스는 타입 별칭으로 정의된 객체도 상속받을 수 있다.

type Animal = {
  name: string;
};

interface IChicken extends Animal {
  isFlay: boolean;
}

const chicken: IChicken = {
  name: "kokodak",
  isFlay: false,
};

 

다중 인터페이스

여러 개의 인터페이스를 확장하는 것도 가능하다.

interface DogCat extends IDog, ICat {}

const dogCat: DogCat = {
  name: "",
  color: "",
  isBark: true,
  isScratch: true,
};

 

3. 인터페이스 선언 합치기

동일한 이름으로 중복 선언된 인터페이스들은 전부 합쳐진다. 이를 선언 합침(declaration merging)이라고도 한다.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "",
  age: 50,
};

참고로 선언 합침의 상황에서, 동일한 프로퍼티의 타입을 다르게 선언하면 충돌이 일어나고 이를 허용하지 않는다.

선언 합침은 주로 모듈 보강할 때 많이 사용된다고 한다.

---

본 포스팅은 인프런 한 입 크기로 잘라먹는 타입스크립트 강의를 기반으로 작성되었습니다. 사용된 이미지들은 모두 위 강의에서 가져왔습니다. 문제시 알려주세요.