6. 객체의 타입을 정하자, 인터페이스

6.1 인터페이스란?

interface 인터페이스이름{
	속성: 타입;
} 

• 인터페이스 적용 전

let robot = { name: 'mimi', age: 3, available: true};

function get_available(obj: { available: boolean }) {
	console.log(obj.available); // true
}

get_available(robot); // true

• 인터페이스 적용 후

interface Robot_property {
	age: number,
  available: boolean;
}

let robot = { name: 'mimi', age: 3, available: true};

function get_available(obj: Robot_property) {
  console.log(obj.available); // true
}

get_available(robot); // true

6.2 인터페이스의 사용

6.2.1 변수의 타입을 인터페이스로 지정

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

const americano: Menu = { 
    name: '아메리카노',
    price: 4000, 
    onsale: true
}

• 인터페이스의 속성을 모두 가지고 있지 않은 경우

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

const lemonade: Menu = {
    name: "레몬에이드",
    price: 4500
}

const lemonade: Menu = {
    name: "레몬에이드",
    price: 4500,
		onsale: true // onsale 속성을 추가해주었다.
}

interface Menu {
    name: string;
    price: number;
    onsale?: boolean; // onsale 속성을 옵션 속성으로 지정해주었다. 
}

const lemonade: Menu = {
    name: "레몬에이드",
    price: 4500
}
// 에러가 발생하지 않는다.

• 인터페이스의 속성 타입이 일치하지 않는 경우

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

const lemonade: Menu = {
    name: "레몬에이드",
    price: 4500,
    onsale: 1
}

6.2.2 함수에서 인터페이스 사용

6.2.2.1 함수의 파라미터를 인터페이스로 지정

function print(str: string){
	console.log(str);
}

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

function Order(item: any) {
	console.log(item, '주문합니다.');
}

Order('핫초코'); // 핫초코 주문합니다.
Order(5000); // 5000 주문합니다.
Order(true); // true 주문합니다. 

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

function Order(item: Menu) {
	console.log(item, '주문합니다.');
}

Order('핫초코'); // 'string' is not assignable to parameter of type 'Menu'.
Order(5000); // 'number' is not assignable to parameter of type 'Menu'.
Order(true); // 'boolean' is not assignable to parameter of type 'Menu'.

interface Menu {
    name: string;
    price: number;
    onsale: boolean;
}

function Order(item: Menu) {
	if (item.onsale === true){
		console.log(item.name, '주문합니다.');
		console.log(item.price, '원입니다.');
	}
}

Order({name: "레몬에이드", price: 4500, onsale: true});
// 레몬에이드 주문합니다.
// 4500 원입니다.

• 인터페이스의 속성을 모두 가지고 있지 않은 경우

Order({name: "레몬에이드", price: 4500}); // 에러(onsale 속성 누락)

6.2.2.2 함수의 구조를 인터페이스로 지정

// 함수 선언문
function sum(x: number, y: number): number {
	return x + y;
};

interface 인터페이스이름 {
	(파라미터: 타입): 반환값 타입;
}

// 함수의 구조를 인터페이스로 지정
interface sum_interface {
	(x: number, y: number): number;
}

interface Operation {
	(x: number, y: number): number;
}

let add: Operation;
let sub: Operation;
let mul: Operation;
let div: Operation;

add = (x:number, y:number): number => x + y;
sub = (x:number, y:number): number => x - y;
mul = (x:number, y:number): number => x * y;
div = (x:number, y:number): number => x / y;

console.log(add(1,2)); // 3
console.log(sub(1,2)); // -1
console.log(mul(1,2)); // 2
console.log(div(1,2)); // 0.5 

interface Operation {
	(x: number, y: number): number;
}

let console_add: Operation;

console_add = (x:number, y:number): void => console.log(x + y);

6.2.3 클래스에서 인터페이스 사용

class 클래스명 implements 인터페이스명

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

class Person implements PersonInterface{
	name: string;
	age: number;

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

• 인터페이스의 속성을 모두 가지고 있지 않은 경우

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

class Person implements PersonInterface{
	name: string;

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

• 인터페이스의 속성 타입이 일치하지 않는 경우

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

class Person implements PersonInterface{
	name: string;
	age: string;

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

6.2.4 인터페이스 상속

interface Menu {
	name: string;
	price: number;
	onsale: boolean;
}

interface SetMenu {
	name: string;
	price: number;
	onsale: boolean;
	option: string;
}	

interface 상속받는인터페이스 extends 상속해주는인터페이스

interface Menu {
	name: string;
	price: number;
	onsale: boolean;
}

interface SetMenu extends Menu {
	option: string;
}

• 인터페이스의 속성을 모두 가지고 있지 않은 경우

interface Menu {
	name: string;
	price: number;
	onsale: boolean;
}

interface SetMenu extends Menu {
	option: string;
}

const cakeSet: SetMenu = {
	option: "cake"
} // 에러

const cookieSet: SetMenu = {
  name: "americano",
  price: 6000,
  onsale: true,
  option: "cookie"
}

6.3 인터페이스와 타입 별칭 비교

type Lion = {
	isCool: boolean;
	roar: () => void;
}

const licat:Lion = {
	isCool: true,
	roar: () => console.log("으르렁!")
}

interface Lion {
	isCool: boolean;
	roar: () => void;
}

const licat:Lion = {
	isCool: true,
	roar: () => console.log("야옹! (사실 고양이)")
}

6.3.1 인터페이스는 선언 병합이 가능하다.

type Icecream = {
  flavor: string;
}

function getIcecreamInfo(icecream: Icecream) {
	console.log("맛: ", icecream.flavor);
}

type IcecreamWithPrice = {
  flavor: string;
	price: number;
}

function getIcecreamInfo(icecream: IcecreamWithPrice) {
	console.log("맛:", icecream.flavor);
	console.log("가격:", icecream.price, "원");
}

// 외부 패키지로부터 가져온 인터페이스
interface Icecream {
  flavor: string;
}

// 선언 병합
interface Icecream {
	price: number;
}

function getIcecreamInfo(icecream: Icecream) {
	console.log("맛:", icecream.flavor);
	console.log("가격:", icecream.price, "원");
}

6.3.2 IDE 상에서 프리뷰가 다르게 나온다.

6.3.3 인터페이스는 객체 타입이어야 한다.

type CatFood = "Cheese" | "Tuna" | "Apple";

type Cat = {
	favoriteFood: CatFood;
	servent: Human;
}

interface Human {
	name: string;
	master: Cat;
}

interface CatFoodInterface {
	catFood: "Cheese" | "Tuna" | "Apple";
}

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

type Age = Human['age'];

const parkShiWooAge: Age = 25; // number type

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

interface Age {
	age: Human['age'];
}

const ageOfShiWoo: Age = { age: 25 };

6.3.4 객체간 교차 타입

• 타입 별칭을 이용할 경우

type Phone = {
	size: string[],
	color: string;
}

type IPhone = Phone & {
	series: "iPhone13" | "iPhone14";
}

const myPhone: IPhone = {
	size: ["71.5mm", "147.5mm"],
	color: "white",
	series: "iPhone14"
}

Phone 이라는 타입 별칭을 선언하고, 이후 & 연산자로 Phone 에 series 프로퍼티를 붙여 확장했다. 이 때, 교차되는 타입들은 인터페이스를 넣어도 무방하다.
 

• 인터페이스를 이용할 경우

interface Phone {
	size: string[],
	color: string;
}

interface IPhone extends Phone {
	series: "iPhone13" | "iPhone14";
}

const myPhone: IPhone = {
	size: ["71.5mm", "147.5mm"],
	color: "white",
	series: "iPhone14"
}

이번에는 각 타입을 인터페이스로 선언하고 extends 키워드를 사용해 기존의 Phone 인터페이스를 확장했다. extends 키워드의 오른편에 놓이는 타입은 인터페이스는 물론, 객체 타입의 타입 별칭도 올 수 있다.