[TypeScript] 인터페이스

인터페이스

인터페이스

인터페이스는 객체의 구조를 정의할 수 있게 해준다.

따라서 해당 구조를 가져야하는 객체에 대한 타입을 확인하는 용으로 사용할 수 있다.

interface Person {
  name: string;
  age: number;
  greet(pharse: string): void;
}
let user1: Person;

user1 = {
  name: 'Max',
  age: 30,
  greet(pharse: string) {
    console.log(`${pharse} + ' ' + ${this.name}`);
  }
};

user1.greet('Hi');

왜 사용할까?

인터페이스와 사용자 정의 타입은 완전히 같지 않다.

인퍼테이스는 객체의 구조를 설명하기 위해서만 사용한다. 인터페이스를 자주 사용하는 이유는 클래스가 인터페이스를 이행하고 준수해야하는 약속처럼 사용할 수 있기 때문이다. 클래스는 여러개의 인터페이스를 implement할 수 있다.

interface Greetable {
  name: string;
  greet(pharse: string): void;
}

class Person implements Greetable {
  name: string;

  constructor(n: string) {
    this.name = n;
  }

  greet(pharse: string) {
    console.log(`${pharse} ${this.name}`);
  }
}

따라서 인터페이스는 주로 구체적인 구현이 아닌 서로 다른 클래스 간의 구조와 기능을 공유하기 위해 사용된다.

인터페이스는 구현 세부 사항이 전혀 없고 이 인터페이스를 implement하는 클래스의 구조를 강제하기 위해서 사용하는 반면, 추상 클래스는 추상 클래스를 상속 받아서 해당 기능을 이용하고 확장 시키는데 목적을 둔다는 점에서 차이가 있다.

읽기 전용 인터페이스

속성을 읽기 전용으로 지정해서 객체를 생성할 때 처음 한번만 값이 할당되도록 할 수 있다.

interface Greetable {
  readonly name: string;
  greet(pharse: string): void;
}

인터페이스 확장하기

인터페이스도 다른 인터페이스를 상속(확장)할 수 있다. extends 키워드를 사용한다.

interface Named {
  readonly name: string;
}

interface Greetable extends Named{
  greet(pharse: string): void;
}

class Person implements Greetable {
  name: string;
  age = 30;
  constructor(n: string) {
    this.name = n;
  }

  greet(pharse: string) {
    console.log(`${pharse} ${this.name}`);
  }
}

클래스의 경우 하나의 클래스만 상속 받을 수 있지만 인터페이스는 여러 인터페이스로부터 상속 받을 수 있다는 차이가 있다.

함수 타입으로서 인터페이스

인터페이스는 함수 타입을 대체하기 위해 사용되기도 한다.

interface AddFn{
  (a: number, b: number): number;
}
let add: AddFn;

add = (n1: number, n2: number) => {
  return n1 + n2;
} 

선택적 매개변수 & 속성

물음표를 사용해 해당 속성을 optional로 선언할 수 있다.

interface Named {
  readonly name?: string;
  outputName?: string;
}
class Person implements Greetable {
  name?: string;
  age = 30;
  constructor(n?: string) {
    if (n) {
      this.name = n;
    }
  }

  greet(pharse: string) {
    if(this.name) {
      console.log(`${pharse} ${this.name}`);
    } else {
      console.log('Hi');
    }
  }
}

자바스크립트에서 컴파일

인터페이스는 순수 타입스크립트 기능이며 인스턴스화될 수 없다.

따라서 자바스크립트로 컴파일된 파일을 보면 인터페이스의 내용은 무시된 것을 확인할 수 있다.