인터페이스 (Interface)

기존의 타입 별칭 처럼, 타입에 이름을 지어주는 또다른 문법이다.

객체 구조를 정의하는데 특화된 문법이며 상속, 합침 등 특수한 기능을 제공 해준다.

문법은 아래와 같다.

// 타입 별칭
type Person2 = {
  readonly name: string;
  age?: number;
  sayHi: () => void;
}

// 인터페이스
interface Person {
  readonly name: string;
  age?: number;
  sayHi: () => void;
}

const p1: Person = {
  name: 'jaehan',
  age: 31,
  sayHi: () => console.log('hi')
}

인터페이스 확장

인터페이스 간의 상속을 통해 중복된 프로퍼티를 정의하지 않도록 도와주는 문법이다.

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

interface Dog {
  name: string;
  age: number;
  isBark: boolean;
}

interface Cat {
  name: string;
  age: number;
  isScratch: boolean;
}

interface Chicken {
  name: string;
  age: number;
  isFly: boolean;
}

이처럼 Dog, Cat, Chicken 인터페이스에 name과 age 가 중복되어 선언되어있다.

이때 extends 문법을 활용해서 간단하게 표현할 수 있다.

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

interface Dog extends Animal {
  breed: string;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}

상속받은 프로퍼티를 재정의 할 수 있긴하지만 약간의 제약이 따른다.

Dog 인터페이스에서 name 프로퍼티 타입을 재정의 한다고 가정해보자

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

interface Dog extends Animal {
  name: "doldol"; // 타입 재 정의
  breed: string;
}

이처럼 프로퍼티를 재정의 할 때에는 원본 프로퍼티의 서브타입만 허용한다.

string 리터럴 타입인 name: 'doldol'은 원본 프로퍼티 name: string 의 서브 타입이다.

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

interface Dog extends Animal {
  name: number; // ❌ number는 string의 서브타입이 아님
  breed: string;
}

인터페이스 다중 확장

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

interface DogCat extends Dog, Cat {}

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

인터페이스 선언 합침

타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언할 수 없지만 인터페이스는 가능하다.

type Person = {
  name: string;
};

type Person = { 	//❌
  age: number;
};
----------------------
interface Person {
  name: string;
}

interface Person { // ✅
  age: number;
}

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

참고
한 입 크기로 잘라먹는 타입스크립트