인터페이스

인터페이스는 함수 또는 클래스(객체)의 틀을 정의할 때 사용한다.
인터페이스에 선언한 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지하게 해준다.
인터페이스는 TypeScript 문법이기 때문에 컴파일이 되지 않는다.

변수와 인터페이스

인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수해야 한다.

interface Car {
  brand: string
  year: number
  types: string
  platform: string
}

const EV9: Car = {
  brand: "KIA",
  year: 2023,
  types: "SUV",
  platform: "E-GMP",
}

하나라도 빠트리면 빨간줄이 생긴다.

옵셔널 파라미터

있을 수도 있고 없을 수도 있는 프로퍼티는 아래와 같이 지정할 수 있다.

interface Car {
  brand: string
  year: number
  types: string
  platform: string
  options?: string[]
}

const EV9_1: Car = {
  brand: "KIA",
  year: 2023,
  types: "SUV",
  platform: "E-GMP",
  options: ["HDP", "Digital Side Mirror"],
}

const EV9_2: Car = {
  brand: "KIA",
  year: 2023,
  types: "SUV",
  platform: "E-GMP",
}

위와 같이 ?:를 사용하면 해당 프로퍼티는 있어도 되고 없어도 되게 된다.

함수와 인터페이스

함수 인터페이스를 지정할 때에는 타입이 선언된 파라미터 리스트와 리턴 타입을 지정해야 한다.
함수 인터페이스를 구현하는 함수는 인터페이스를 준수해야 한다.

interface Calculator {
  (x: number, y: number): number
}

const add: Calculator = (x: number, y: number) => x + y

add 함수는 매개 변수로 x,y가 들어가야 하고 각각 타입이 number여야 하고 함수의 리턴값은 number여야 한다.

클래스와 인터페이스

클래스 선언문 뒤에 implements를 적고 인터페이스를 지정하면 해당 클래스는 지정한 인터페이스를 반드시 구현해야 한다.

interface Car {
  move(): void
  stop(): void
}

class Suv implements Car {
  constructor(private brand: string, private year: number) {}
  move(): void {}
  stop(): void {}
}

Suv 클래스는 Car 인터페이스의 move 메서드와 stop 메서드를 반드시 구현해야 한다.

다중 인터페이스

여러 인터페이스를 하나의 클래스에 지정할 수도 있다.

interface Vehicle {
  move(): void
  stop(): void
}

interface Car {
  getSpeed(speed: number): number
  getBrand(): string
}
class Suv implements Car, Vehicle {
  constructor(private brand: string, private year: number) {}
  getSpeed(speed: number): number {
    return speed
  }
  getBrand(): string {
    return this.brand
  }
  move(): void {}
  stop(): void {}
}

Suv 클래스는 Car 인터페이스에 있는 getSpeed, getBrand 메서드를 구현해야 하고 Vehicle에 있는 move, stop 메서드를 구현해야만 한다.

인터페이스 상속

extends 키워드를 사용해 인터페이스를 상속할 수 있다.

interface Transportation {
  move(): void
}

interface Vehicle extends Transportation {
  stop(): void
}

interface Car {
  getSpeed(speed: number): number
  getBrand(): string
}
class Suv implements Car, Vehicle {
  constructor(private brand: string, private year: number) {}
  getSpeed(speed: number): number {
    return speed
  }
  getBrand(): string {
    return this.brand
  }
  move(): void {}
  stop(): void {}
}

Suv 클래스는 Vehicle 인터페이스에 정의된 메서드들을 구현해야만 하는데 Vehicle 인터페이스는 Transportation 인터페이스에게 상속을 받았기 때문에 Transportation 인터페이스에 있는 move 메소드도 구현해야 한다.

인터페이스는 여러 인터페이스를 상속받을 수도 있다.

interface Transportation {
  move(): void
}

interface Vehicle {
  stop(): void
}

interface Car extends Transportation, Vehicle {
  getSpeed(speed: number): number
  getBrand(): string
}

참고

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%F0%9F%92%AF-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0
https://poiemaweb.com/typescript-interface