[TypeScript] 인터페이스 (Interface)

인터페이스(Interface)는 타입 체크를 위해 변수, 함수, 클래스에 사용할 수 있다.

ES6에서는 지원하지 않고 TypeScript에서는 지원한다.

 

✔️ 인터페이스

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

let user: User = {
  name: "Kim",
  age: 20,
};

 

✔️ 함수에서 인터페이스 사용하기

interface Add {
  (n1: number, n2: number): number;
}

const addFunction: Add = function (a, b) {
  return a + b;
};

console.log(addFunction(1, 2));   // 3

 

✔️ 클래스와 인터페이스

interface Car {
  name: string;
  color: string;
}

class Genesis implements Car {
  name: string;
  color: string;

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

const myCar = new Genesis("G80", "white");
console.log(myCar); // Genesis { name: 'G80', color: 'white' }

 

✔️ 옵셔널 프로퍼티 (Optional Property)

인터페이스의 속성들은 반드시 구현해야하지만 선택적으로 만들어줄 수도 있다.

속성명 뒤에 '?'를 붙여주면 된다.

interface User {
  name: string;
  age: number;
  gender?: string;
}

let user: User = {
  name: "Kim",
  age: 30,
};

gender 값을 넣어주지 않아도 에러가 나지 않는다.

 

✔️ 인터페이스 확장

인터페이스는 extends 키워드를 사용해서 또 다른 인터페이스를 상속 받을 수 있다. 여러 개도 가능

당연히 여기서도 옵셔널 프로퍼티를 사용할 수 있다.

interface Food {
  name: string;
  calorie?: number;
}

interface Noodle extends Food {
  price: number;
}

const noodle: Noodle = {
  name: "noodle",
  calorie: 10000,
  price: 5000,
};