Interface

- 타입 체크를 위해 사용된다.

- 변수, 함수, 클래스에 사용할 수 있다.

- 여러 타입을 갖는 프로퍼티로 이루어진 새로운 타입으로 정의하는 것과 유사하다.

- 프로퍼티 및 메서드의 구현을 일관성 있게 유지하는 역할을 한다.

​

(1) 변수와 인터페이스

- 인터페이스틑 변수의 타입으로 사용할 수 있다.

- 인터섹션 타입을 이용하여 하나의 인터페이스 타입으로 만들 수 있다.

interface a {
  x: number;
  y: string;
  z: boolean;
}

interface b {
  x: number;
  w: string;
  v: boolean;
}

let c: a;

c = { x: 26, y: 'wangi', z: false }; // 변수 c는 인터페이스 a에 맞춰 선언해야한다.
let d : a & b;                       // x, y, z, w, v의 변수를 가진 인터페이스 타입이다.

- 함수 파라미터의 타입을 선언할 수 있다.

interface Todo {
  x: number;
  y: string;
  z: boolean;
}

let todos: Todo[] = [];

function addTodo(todo: Todo) {    // 파라미터 todo의 타입으로 Todo 인터페이스를 선언하였다.
  todos = [...todos, todo];
}

const newTodo: Todo = { x: 1, y: 'wangi', z: false };
addTodo(newTodo);
console.log(todos)                // [ { x: 1, y: 'wangi', z: false } ]

(2) 함수와 인터페이스

- 함수의 타입으로도 인터페이스를 사용할 수 있다.

- 파라미터 리스트와 리턴 타입을 정의한다.

interface a{
  (num: number): number;
}

const b: a = function (num: number) {
  return num * num;
}

console.log(b(10)); // 100

(3) 클래스와 인터페이스

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

- 직접 인스턴스를 생성할 수는 없다.

interface a {
  x: number;
  y: string;
  z: boolean;
}

// Todo 클래스는 ITodo 인터페이스를 구현하여야 한다.
class b implements a {
  constructor (
    public x: number,
    public y: string,
    public z: boolean
  ) { }
}

const c = new b(1, 'wangi', false);

console.log(c);

- 메서드도 포함할 수 있다.

interface a {
  x: string;
  y(): void;
}

class b implements a {
  constructor(public xx: string) {}

  y() {
    console.log(`${this.xx}`);
  }
}

function c(bb: a): void {
  bb.y();
}

const d = new b('Lee');
c(d);

(4) 덕 타이핑

- 해당 인터페이스에서 정의한 프로퍼티나 메서드를 가지고 있다면 그 인터페이스를 구현한 것으로 인정한다.

- 아래의 예제의 경우 변수 c는 인터페이스 a와 일치하지 않지만 x라는 프로퍼티를 가지고 있으므로 부합한 걸로 인정한다.

interface a {
  x: string;
}

function b(aaa: a): void {
  console.log(`${aaa.x}`);
}

const c = { x: 'wangi', y: 18 };
b(c);                            // wangi

(5) 선택적 프로퍼티

- 인터페이스의 프로퍼티는 반드시 구현되어야 하지만 선택적으로 필요할 경우가 있다. 그럴 때 프로퍼티 명 뒤에? 붙이면 생략이 가능하다

interface a {
  x: string;
  y: string;
  z?    : number;
  w?: string;
}

const b: a = {
  x: 'wangi',
  y: 'eddy'
}

console.log(b);

(6) 인터페이스 상속

- extends 키워드를 사용해 인터페이스 및 클래스를 상속받을 수 있다.

interface a {
  x: string;
  y?: number;
}

interface b extends a {
  z: number;
}

const c: Student =  {
  x: 'wangi',
  y: 26,
  z: 3
}