TypeScript 인터페이스

타입스크립트에서 인터페이스란,

하나의 타입을 정의하는 것을 말합니다.

 

interface MOUSE {}
// MOUSE라는 타입을 선언하고

const myMouse: MOUSE = {}
//myMouse에 MOUSE타입을 부여했습니다.

 

MOUSE타입에 내용을 추가하여 부가 설명을 하자면

 

//어떠한 행위를 한다고 기술만 함 - clickOn의 실행문장까지 적어주진 않음
//                               - 실제 body까지는 기술하지 않음
interface MOUSE {
    clickOn(): boolean;
    clickOff(): void;
}

//TV란 타입을 정의했고 TV의 타입을 부여받았다면 인터페이스 양식에 맞게 값이 있어야함
const myMouse: MOUSE = {
    clickOn() {
        return true;
    },
    clickOff() {
        console.log();
    }
}

MOUSE 타입에는 clickOn, clickOff란 행위가 있고 그 행위는 각각 boolean,void 타입이 되어야한다.

라고 정의를 한겁니다.

 

그래서 MOUSE타입인 myMouse의 안에는 clickOn, clickOff 행위가 있고 타입까지 맞춰줬음

 

=============================================================================

 

 - 인터페이스를 쓰면 좋은 상황

 

먼저 푸드라는 인터페이스를 생성하고, 그 타입에 맞게 몇 변수들을 생성함

interface Food {
    tasteScore: number,
    type: string
}

const hamburger: Food = {
    tasteScore: 10,
    type: 'fastFood'
}

const bulgogi: Food = {
    tasteScore: 9,
    type: 'gogi'
}

 

위 코드에서 인터페이스를 제거하려면 이와 같이 바꿔주어야 함

const hamburger: {tasteScore: number, type:string} = {
    tasteScore: 10,
    type: 'fastFood'
}

const bulgogi: {tasteScore: number, type:string} = {
    tasteScore: 9,
    type: 'gogi'
}

 

같은 타입의 객체를 많이 생성하면 생성할수록

반복적으로 타입지정을 해 줘야해서 불편함

 

위 예시는

 1. Food 타입으로 만들어진 변수가 [ hamburger, bulgogi ] 단 둘

 2. Food 타입의 프로퍼티가 [ tasteScore, type ] 단 둘

이지만 프로퍼티, 변수가 늘어나면 늘어날수록 반복작업을 해 주어야 한다.

 

 

=============================================================================

 

 - 선택적 프로퍼티

 - 읽기전용 프로퍼티

 

interface Food {
    tasteScore: number,
    type: string,
    price?: number,        //프로퍼티 뒤에 ?를 붙이면 선택적 프로퍼티가 되며 필수옵션이 아니게 된다.
    readonly chef: string  //프로퍼티 앞에 readonly를 붙이면 처음 생성 후, 수정할 수 없다.
}

let gogi: Food = {
    tasteScore: 10,
    type: 'fastFood',
    chef: 'john'
}

gogi.chef = 'john1'; //error