✓ Interface

인터페이스( Interface )는 JavaScript에는 존재하지 않고 TypeScript에서 지원해주는 문법이다.

이 개념은 Java와 같은 객체 지향 언어에 많이 존재하는 개념이다.

인터페이스( Interface )를 활용하여 객체의 타입을 정의하고 생김새를 가지도록 할 수 있다.

일부 기능은 TypeScript 에서만 존재하는 고유 문법으로 컴파일 후에 사라진다.

extend 가 아닌 implements 키워드로 구현한다.


▶ implements 사용 X

// Interface
interface Person {
  name: string,
  age: number
}

// Implement 없이 구현 (바로 타입을 지정한다.)
const Jang: Person = {
  name: "Jang",
  age: 25
}

✓ implements

implements 키워드는 ⭐ interface의 설계를 구현할 때 사용한다.


▶ implements 사용 O

interface Animal {
  name: string
  run(): string  // 메서드도 정의 가능
}

interface Person {
  sayName(): string
}

class AnyClass {  // 필드 , 메서드가 존재하지 않는 클래스
}


// 1) implements 기본 구현
class Dog implements Animal {
  constructor(public name: string) {}

  run() {
    return this.name
  }
}


// 2) implements 다중 구현 가능
class Jang implements Animal, Person {
  constructor(public name: string) {}

  run() {
    return this.name
  }

  sayName() {
    return `사람의 이름은 ${this.name}`
  }
}


// 3) extends와 implements 함께 조합해서 사용 가능
class Jang extends AnyClass implements Animal, Person {
  constructor(public name: string) {
    super()
  }

  run() {
    return this.name
  }

  sayName() {
    return `사람의 이름은 ${this.name}`
  }
}

✓ extends

extends 키워드는 Interface를 확장할 때 사용한다.

interface Animal {
  name: string
  run(): string
}

// 우측의 인터페이스 타입( Animal )을 
// 좌측의 인터페이스 타입(Person)에서 확장
interface Person extends Animal {
  sayName(): string
}

// extends 를 통해 interface를 확장할 수 있다.
const jang: Person = {
  name: 'Jang',
  run() {
    return 'string'
  },
  sayName() {
    return 'string2'
  }
}

extends 사용 시 충돌해서는 안 된다는 점에 주의하자.

interface Animal {
  name: string  // 충돌
  run(): string
}

interface Person extends Animal {
  name: number  // 충돌
  sayName(): string
}

// extends 를 통해 interface를 확장할 수 있다.
const jang: Person = {
  name: 'Jang',
  run() {
    return 'string'
  },
  sayName() {
    return 'string2'
  }
}

✓ 정리

⭐ Interface

• 정의
• 설계

⭐ Implement

• 구현

⭐ Extends

• 확장