[TypeScript/타입스크립트] 인터페이스(interface)개념 이해하기

 

 

 

➜ Basic Types 기본타입 문법

➜ function 함수 문법

➜ Array&Tuple 배열과 튜플

➜ 클래스(Class) (⚠내마음대로 정리했음주의⚠)

➜ 인터페이스(interface)

➜ 인덱스 시그니처(Index Signature), Keyof Assertion

➜ 내장함수, 메서드, 접근제한자 총정리

 

 
 
클래스도 겨우 넘어가고..ㅋㅋㅋ 이제 인터페이스를 이해하기로 했다.
클래스개념을 정리한 글을 꼭 ! 먼저 읽고 인터페이스를 보는 것을 추천합니다~!~! ⚠경고했슴다⚠
 
 
 
 

1. interface가 뭐임?

interface Musician {
    name: string;
    instrument: string;
    play(action: string): string;
}

 
인터페이스는 파이썬에서도 본적이 없어서 이해하기 힘들었다ㅠㅠ
쉽게말해 그냥 '형식' 이라고 보면된다.
인터페이스는 단순히 형식을 정의하는 것이다. 클래스보다 더 추상적인 개념!
 
그럼 구체적인 예시와 함께 인터페이스의 기능에 대해 알아보자 !!
 
 
 
 

2. 클래스의 다중 상속 제한

파이썬에서는 클래스의 다중상속을 지원하지만 타입스크립트에서는 지원하지 않는다.
대신 interface로 다중상속과 같은 기능을 구현할 수 있다.

interface Flyable {
  fly(): void;
}

interface Swimmable {
  swim(): void;
}

class Bird implements Flyable, Swimmable {
  fly() {
    console.log("Flying...");
  }

  swim() {
    console.log("Swimming...");
  }
}

const duck = new Bird();
duck.fly(); // Flying...
duck.swim(); // Swimming...

 
Flyable 인터페이스에서 fly() 메서드 정의
Swimmable 인터페이스에서 swim() 메서드 정의
 
그리고 Bird 클래스에서 Flyable 인터페이스와 Swimmable 인터페이스를 모두 구현해서(implements)
날기와 수영 두가지 행동을 할 수 있게 된다. (다중상속이 된 것처럼~)
 
 

 

반응형

3. 코드 분리와 모듈화

interface Animal {
  name: string;
  age: number;
  eat(food: string): void;
}

class Dog implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  eat(food: string) {
    console.log(`${this.name} is eating ${food}`);
  }
}

class Cat implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  eat(food: string) {
    console.log(`${this.name} is eating ${food}`);
  }
}

const dog = new Dog("Buddy", 3);
dog.eat("bone"); // Buddy is eating bone

const cat = new Cat("Whiskers", 5);
cat.eat("fish"); // Whiskers is eating fish

 
맨위에서 인터페이스로 동물의 형식을정의하고
강아지 클래스와 고양이 클래스에서 그 형식을 사용한다.(name, age, eat() 메서드를 가지게 된다)
 
 

 
 
 

4. 타입 체크와 안정성

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

function displayPerson(person: Person) {
  console.log(`Name: ${person.name}`);
  console.log(`Age: ${person.age}`);
}

const john = { name: "John", age: 25 };
displayPerson(john); // Name: John, Age: 25

const sarah = { name: "Sarah", age: "30" };
displayPerson(sarah); // Error: age가 string타입이어서

 
Person 인터페이스는 사람의 형식을 정의하고.
displayPerson 함수는 Person 인터페이스를 인자로 받아 해당 형식의 객체를 출력한다.
 
john 객체는 Person 형식을 준수(문자열, 숫자)하므로 정상적으로 출력되지만,
sarah 객체의 age 속성이 문자열이기 때문에 타입 체크에서 오류가 발생한다.