TypeScript 개념 정리 - 인터페이스

인터페이스

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

인터페이스: 상호간에 약속된 규칙

객체 형태의 데이터 구조를 정의하는 데 특화된 문법

메소드의 오버로딩을 원하면 호출 시그니처를 사용해야 한다.

interface Person {
 readonly name: string;
 age: number;
 sayHi: () => void;
 sayHi: (a: number, b: number): void;
}

const person: Person = {
 name: '',
  age: 25,
  sayHui: function () {
   console.log('hi'); 
  }
}

// person.name = 'tt';
person.sayHi();
person.sayHi(1,2);

// 대수 타입 적용 안됨(interface)
type Type1 = number | string;
type Type2 = number & string;

// interface에 사용하고자 하면 아래와 같이 사용해야 한다.
const person: Person | Number = {};

인터페이스 확장 (상속)

동일한 프로퍼티를 재 정의할 때는 원본 프로퍼티의 서브 타입으로만 정의가 가능하다.
인터페이스는 객체 형태의 데이터 구조를 정의할 때 사용하지만, 확장 가능성이 있을 때 주로 사용한다.

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

interface Dog extends Animal {
 isBark: boolean; 
}

const dog: Dog = {
 name: '',
 color: '',
 isBark: true,
}

interface Cat extends Animal {
 isScratch: boolean; 
}

interface Chicken extends Animal {
 isFly: boolean; 
}

interface DogCat extends Dog, Cat { 
}

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

인터페이스 선언 합치기

인터페이스는 동일한 이름으로 중복 선언해도 된다 -> 선언 합치기
하지만 type은 동일한 이름으로 중복 선언할 수 없다.

인터페이스에서 같은 프로퍼티에 대한 타입은 충돌이 허용되지 않는다.
반드시 동일한 타입으로 선언해주어야 한다.

interface Person {
 name: string; 
}

interface Person {
 // name: number; // 충돌을 허용하지 않는다.
 name: string;
 age: number;
}

interface Developer extends Person {
 name: 'hello'; 
}

const person: Person = {
 name: '',
 age: 27,
}

모듈 보강

기존에 정의되어 있는 모듈을 사용하고자 했지만, 수정이 필요하거나 추가하고 싶은 사항이 있을 때 원하는 타입을 추가한다.

interface Lib { // 기존 모듈
 a: number;
 b: number;
}

interface Lib { // 모듈 보강
 c: string; 
}

const lib: Lib = {
 a: 1,
 b: 2,
 c: 'hello',
}