[TIL] 241008_Typescript: 인터페이스

⚡️ 인터페이스

• 타입 별칭 과 타입을 정의하는 문법들만 다를 뿐, 기본 기능은 같다.
• 함수는 다음과 같이 인터페이스에 두 가지 방식으로 정의할 수 있다. 이 때, 함수의 이름은 반드시 붙여줘야 한다.
• 함수를 오버로딩하고 싶다면, 함수 선언 시 함수 타입 표현식이 아닌 호출 시그니처를 사용해야 한다.
• 유니온이나 인터섹션 타입 생성은 불가하다.

interface Person {
  readonly name: string;	// 수정 불가
  age?: number; // optional variable
  sayHi: () => void;  // 1) 함수 타입 표현식
  sayHi2(): void; // 2) 호출 시그니처
  sayHi2(a: number, b: number): void; // 함수 오버로딩
}

const person: Person = {
  name: "정지수",
  // age: 26,
  sayHi: function () {
    console.log("Hi");
  },
  sayHi2: function () {
    console.log("Hi");
  },
}

person.sayHi2(1, 2);  // 함수 오버로딩 사용

⚡️ 인터페이스의 확장

• extends 키워드를 사용해서 인터페이스끼리 상속 관계를 만드는 것이 가능하다.
• 상속 인터페이스로부터 상속받은 프로퍼티의 타입을 하위 인터페이스에서 변경하는 것은 불가능하다.
• 타입 별칭을 상속하는 것도 가능(type -> interface)
  ➡️ 객체 타입이면 상속이 가능.

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

interface Dog extends Animal {
  // name과 age property는 자동으로 갖게 됨.
  isBark: boolean;
}

const dog: Dog = {  // 이런 식으로 사용 가능.
  name: "",
  age: 3,
  isBark: true,
};

인터페이스는 다중 상속도 가능하다.

interface Cat extends Animal {
  isScratch: boolean;
}
// 다중 확장
interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
  // Dog와 Cat이 갖고 있는 모든 프로퍼티들을 가짐.
  name: "",
  age: 0,
  isBark: true,
  isScratch: true,
};

⚡️ 선언 합치기

• 인터페이스는 동일한 이름으로 선언해도 에러가 나지 않는다.
• 그 이유는 중복으로 선언한 인터페이스는 결국 다 '합쳐지기' 때문!
• 만약 같은 프로퍼티를 각각 다른 타입으로 선언하게 된다면 충돌이 발생한다.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  // 결국 합쳐진 인터페이스
  name: "정지수",
  age: 26
};

Reference

👩🏻‍🏫 한입 크기로 잘라 먹는 타입스크립트(TypeScript)

https://www.inflearn.com/course/한입-크기-타입스크립트