interface(인터페이스) 개념 및 Typescript 예제

타입스크립트 소개 및 개발 준비 게시물의 링크는 이 글의 맨 밑에 있습니다.

Art and design icons created by Freepik - Flaticon

 

 

 

목차.

 

A. interface의 개념

• 사전적 정의, 프로그래밍 언어에서의 정의
• 사용이유

B.  Typescript예제   

• 1. object와 class의 청사진이 되는 interface
• 2. function의 청사진이 되는 interface
• 3. +@: readonly제어자와 option(옵션) 항목

 

A. Interface 개념

 

interface(인터페이스)란?

• 타입스크립트의 interface :
  
  class(클래스), object(오브젝트), function(함수) 등을
  정의하기 위한 blueprint(청사진)을 제공하는 구성요소.

• 사전적 의미: 어떤 대상들 간의 공통적인 경계를 형성하는 표면을 뜻한다.
  
  inter: 사이, 상호 간
  face: 얼굴, 표면
  
  
  ex) 이 애플리케이션, 인터페이스 환경이 어때? =
  "유저와 프로그램이 만나 상호작용하는 경계(주로 화면) 구성이 어때?"

기존 자바스크립트에는 존재하지 않는 타입스크립트만의 구성요소이다.

왜 interface를 사용할까?

• interface를 상속하는 요소들은 꼭 필요한 세부 항목들이 정의되었는지 쉽게 확인할 수 있다.

 

• abstract class(추상클래스), custom type(커스텀 타입) 등과 다르게
  class, object, 그리고 function 등 다양한 요소의 정의에 이용할 수 있다.

 

 

 

세부항목 정의체크 예시

 

 

hamburger 인터페이스를 order1의 타입으로 정했다.

order1은 Hamburger를 타입으로 갖기 때문에

order1의 정의에는 name, price, recheck가 전부 포함되어있어야 한다.

 

오류내용 recheck메서드를 추가하여 오류를 해결할 수 있다.

 

 

 

 

 

B. TS 예제

 

1. Object와 Class의 청사진이 되는 interface

 

 

예제: interface를 타입으로 사용하는 object

TS코드

interface Hamburger {
    name: string;
    price: number;

    recheck(phrase: string): void;
}
// Hamburger 인터페이스를 타입으로 갖는 요소는
// name, price 변수와 recheck 메서드를 포함해야한다.

let order1: Hamburger;

order1 = {
    name: 'cheese burger',
    price: 4000,

    recheck(phrase: string) {
        console.log(phrase + ' check your order ' + this.name + ' is '  + this.price + ' won');

    }
}

order1.recheck('wait a minute, ')

 

 

위의 코드를. js파일로 transpile(트랜스파일)할 시 다음과 같은 코드를 얻게 된다.

 

JS코드

 

"use strict";
let order1;
order1 = {
    name: 'cheese burger',
    price: 4000,
    recheck(phrase) {
        console.log(phrase + ' check your order ' + this.name + ' is ' + this.price + ' won');
    }
};
order1.recheck('wait a minute, ');

interface라는 키워드가 없어졌다.

 

이유는 자바스크립트에는 interface가 존재하지 않기 때문이다.

고로 당연히 자바스크립트로 트랜스파일된 코드에서는 사라진다.

 

 

 

 

 

예제: interface를 상속받는 class

 

"implements" 키워드를 사용한다.

 

다른 class를 상속받을 때 extends를 사용하는 것과 다르게,

interface를 상속받을 땐 implements를 사용한다.

class Hamburger2 implements Hamburger {
    name: string;
    price: number;
//"implements" 키워드로 Hamburger 인터페이스를 상속받았다.

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

    recheck(phrase: string) {
        console.log(phrase + ' check your order ' + this.name + ' is '  + this.price + ' won');
        
    }

}

let order2 = new Hamburger2('chicken burger', 5000)
order2.recheck('sir, ')

 

 

 

예제: interface를 상속하는 또 다른 interface

sayEvent라는 method를 추가함으로써, 새로운 요구사항을 지닌 interface를 정의했다.

interface가 interface를 상속할 땐"extends" 키워드를 사용한다.

interface EventHamburger extends Hamburger{
    sayEvent(phrase: string): void;
    
}
//extends 키워드로 Hamburger 인터페이스를 상속받았다.

let order3: EventHamburger;
order3 = {
    name: 'cheese burger',
    price: 4000,
    recheck(phrase: string) {
        console.log(phrase + ' check your order  ' 
        + this.name + ' is '  + this.price + ' won');
        
    },

    sayEvent(phrase: string) {
        console.log(phrase + ' congraturations! '
        + this.name + ' with Event !!' +'select the toy which you want' );
    }
    //EventHamburger의 sayEvent 메서드

}

order3.recheck('Now time to ');
order3.sayEvent('wow! ');

 

 

예제:  Hamburger 인터페이스를 return값의 타입으로 사용하는 함수

 

interface는 함수의 return값의 타입이 될 수 있다.

function getOrder(burgerName: string, burgerPrice: number): Hamburger {
    let name = burgerName;
    let price = burgerPrice;
    let recheck = (phrase: string) => {
        console.log(phrase + ' check your order  ' + name + ' is '  + price + ' won');
    };

    return {
        name: name,
        price: price,
        recheck: recheck
    };
    //반환값이 Hamburger로 정의되어있으므로 return을
    //Hamburger의 요소들로 정의하였다. 

}

let order4 = getOrder('beef burger', 8000)
order4.recheck('function order!, ')

 

예제: interface는 다중상속이 가능하다

class는 하나만 상속받을 수 있지만, interface는 여러 개를 상속받을 수 있다.

interface GiftEvent {
    giveGift(giftname: string): void;
}


interface GiftEventHamburger extends EventHamburger, GiftEvent {}

//sayEvent 메서드와 giveGift 메서드를 모두가진 
//GiftEventHamburger 인터페이스

let order5: GiftEventHamburger;
order5 = {
    name: 'fish burger',
    price: 3800,
    recheck(phrase: string) {
        console.log(phrase + ' check your order  ' 
        + this.name + ' is '  + this.price + ' won');
        
    },

    sayEvent(phrase: string) {
        console.log(phrase + ' congraturations! '
        + this.name + ' with Event !!' +'select the toy which you want' );
    },
    //EventHamburger의 메서드

    giveGift(giftname: string) {
        console.log(giftname + 'is ' + 'for you')
    }
    //GiftEvent 의 메서드

}
order5.recheck('excuse me ');
order5.sayEvent('oh! ');
order5.giveGift('rabbit doll');

 

 

 

 

2. function의 청사진이 되는 interface

arrow function 기능을 이용, 함수를 정의하는 데 사용할 수 있다.

let addF: arithmetic;

addF = (n1: string, n2: number) => {
    return n1 + n2;
};
//오류 메시지 Type '(n1: string, n2: number) => string' is not assignable to type 'arithmetic'.
//  Types of parameters 'n1' and 'a' are incompatible.
//  Type 'number' is not assignable to type 'string'.
// arthmetic을 타입으로 갖으므로 n1: number로 고쳐주어야 한다.

 

 

 

예제: interface를 이용하여 사칙연산 정의

interface arithmetic {
    (a: number, b: number): number;
    // 두개의 number를 받아 하나의 number를 내보내는
    // 함수의 청사진
}

let addF: arithmetic;
let multipleF: arithmetic;
let subtractF: arithmetic;
let divideF: arithmetic;

//interface arithmetic을 타입으로 갖는 함수들이므로
// 2개의 number를 입력받고, 한개의 number를 출력한다.

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


multipleF = (n1: number, n2: number) => {
    return n1 * n2;
};

subtractF = (n1: number, n2: number) => {
    return n1 - n2;
};

divideF = (n1: number, n2: number) => {
    return n1 / n2;
};

console.log(addF(5,5), multipleF(5,5), subtractF(5,5), divideF(5,5))

 

3. +@: readonly 제어자와 option(옵션) 요소

+@ interface에서 사용가능한 modifier

 

private, public 등은 사용이 제한된다.

오직 readonly 키워드만이 사용가능하다.

interface Hamburger {
    readonly name: string;
    price: number;

    recheck(phrase: string): void;
}

 

+@@ option(옵션) 항목

 

"?" 기호를 통해 필수가 아닌 옵션요소들을 정의할 수 있다.

interface Hamburger {
    name: string;
    price: number;

    orderNumber?: number;
    //옵션 변수
    recheck(phrase: string): void;
    
    sayHello?(phrase?: string): void;
    //옵션 함수
}

 

처음의 Hamburger interface를 위와 같이 고쳐주었다.

 

이미 정의한 order요소에 orderNumber와 sayHello를 일일이 추가하지 않아도

전체 코드는 아무 문제 없이 작동한다.

 

예제: 옵션을 갖는 object

let order1_5: Hamburger;

order1_5 = {
    name: 'cheese burger',
    price: 4000,
    orderNumber: 3,

    recheck(phrase: string) {
        console.log(phrase + ' check your order ' + this.name + ' is '  + this.price + ' won');

    },

    sayHello(phrase: string) {
        console.log('hello ' + phrase);
    }
    //order1_5는 Hamburger interface를 타입으로갖는다.
    //옵션으로 sayHello와 orderNumber 요소를 갖고있다.
    //하지만 옵션에도 없는 property나 method를 가질 순 없다.
   }

 

 

예제: 옵션메서드 사용하기

 

 

 

옵션메서드는 반드시 메서드가 존재하는지 확인해야 한다.

그냥 호출하면 typescript가 오류를 표시해준다.

 

 

 

if문을 사용하여 존재여부를 확인하도록 하자

if(order1_5.sayHello) {
    order1_5.sayHello(' nice to meet you');
}
// if 블록을 이용해서 order1_5에 sayHello 
// 메서드가 존재하는지 반드시 확인해야한다.

console.log(order1_5.orderNumber);

// 변수는 그럴필요없다.

 

예제출력 결과

 

먼저 읽을거리:

https://batcave.tistory.com/33

TypeScript(타입스크립트)? 간단하게 알아보기

https://batcave.tistory.com/34

VSCODE에서 TypeScript 개발 준비하기