[TS] 인터페이스

DT-HYUNJUN·2023년 12월 12일

Typescript

목록 보기
7/11

인터페이스

인터페이스란 타입 별칭과 마찬가지로 타입을 만들어주는 문법이다.

interface Person {
  name: string,
  age: number
}

type과의 차이점이라면 interface는 =을 사용하지 않는다.

선택적 속성과 readonly 속성도 설정 가능하다.

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

메서드의 타입의 경우에는 함수 타입 표현식이나 콜 시그니처를 이용해서 정의할 수 있다.

interface Person {
  sayHi: () => void		// 함수 타입 표현식
  sayHi2(): void		// 콜 시그니처

단, 메서드 오버로딩의 구현은 콜 시그니처를 이용해서 정의해야 한다.

interface Person {
  sayHi(): void
  sayHi(name: string): void
  sayHi(name: string, age: number): void
}

인터페이스 확장

인터페이스 확장은 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 속성을 정의하지 않도록 하는 기능이다.

interface Animal {
  name: string
  color: string
}

interface Dog {
  name: string
  color: string
  isBark: boolean
}

interface Cat {
  name: string
  color: string
  isMeow: boolean
}

위 세 가지의 interface는 모두 name, color 속성을 중복해서 사용하고 있다.

이렇게 중복된 속성은 인터페이스 확장을 통해 제거할 수 있다.

interface Animal {
  name: string
  color: string
}

interface Dog extends Animal {
  isBark: boolean
  breed: string // 추가 속성
}

interface Cat extends Animal {
  isMeow: boolean
}

extends키워드를 통해 상속 받을 interface를 적어주면 확장이 가능하다.

확장은 여러 개의 인터페이스를 받을 수 있다.

interface Animal {
  name: string
  color: string
}

interface Dog extends Animal {
  isBark: boolean
}

interface Cat extends Animal {
  isMeow: boolean
}

interface DogCat extends Dog, Cat {}

속성 재 정의

interface 확장시에 속성을 재 정의 할 수 있다.

하지만 재 정의할 타입은 반드시 원본 타입의 서브타입이 되어야 한다.

interface Animal {
  name: string
  color: string
}

interface Dog extends Animal {
  name: "dog"

string literal타입인 "dog"는 string타입의 서브타입이므로 재 정의가 가능하다.

하지만 만약 string타입의 서브 타입이 아닌 다른 타입, 예를 들어 number타입으로 재 정의를 하려면 error가 발생한다.

interface Animal {
  name: string
  color: string
}

interface Dog extends Animal {
  name: number // error

선언 합치기

동일한 이름의 interface의 타입은 합칠 수 있다.

interface Person {
  name: string
}

interface Person {
  age: number
}

const person: Person = {
  name: "Park",
  age: 26
}

0개의 댓글