TypeScript 인터페이스

광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ'

| 타입 스크립트 인터페이스

 

인터페이스는 추상화의 작업이라고 생각한다.

추상화란? 컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다.

 

interface 에는 어떠한 행위(기능)를 하는 메서드를 선언하는 영역이다. 그중 interface TV는 화면을 켜고, 끄는 기능의 선언 부만 작성을 한다. 그리고 그 선언한 메서드의 return 타입 또한 지정해야 한다.

 

선언한 interface TV를 myTv의 타입으로 선언하고 myTv 객체에는 turnOn , turnOff 메서드를 구현해야 합니다.

turnOn 같은 경우는 return type 이 boolean이기 때문에 return ture & false 값을 리턴합니다.

interface TV{
    turnOn() : boolean;
    turnOff() : void;
}

const myTv : TV = {
    turnOn(){
    	// 리모콘으로 켜기
        return true;
    },
    turnOff(){
    }
}

const lgTv : TV = {
    turnOn(){
    	// 목소리로 켜기
        return true;
    },
    turnOff(){
    }
}

tv는 제조사, 기종 등등 에따라 리모컨으로 켜는지 , 아니면 음성으로 켜는 건지 각각의 기능이 다를 수 있습니다.

서로 다른 각각의 기능을 구현한 메서드를 실행할 수 있다.

function tryTurnOn(tv : TV){
    tv.turnOn();
}
tryTurnOn(myTv);

tryTurnOn(lgTv);

 

위의 방식은 기존의 oop언어의 방식이고 타입 스크립트는 interface를 데이터 타입의 형태 즉 데이터의 필수 값, 속성을 정의하여 사용한다.

 

체스판을 만든다는 가정하에 체스 판의 크기를 지정하는 Cell 타입의 데이터는 가로와 세로 그리고 체스 말의 값이 필요하다. 하지만 체스말 piece는 값이 있을 수도 있고 없을 수도 있다. 그럴 때?(optional)을 붙여 준다. 

선언부는 없이 오로지 데이터 값만을 선언한다.

interface Cell{
    row : number;
    col : number;
    piece? : Piece;
}

 

그다음 piece 데이터의 타입은 Piece이다 이때 Piece 타입의 interface를 만든다. 체스 말 들은 이동을 하는 행위 move를 선언한다. 

interface Piece{
    move( from : Cell, to:Cell) : boolean;
}

 

4x3의 체스판을 구현하는 함수이다. es6에서 객체의 속성명과 변수명이 같으면 축약할 수 있다.

function createBoard(x : number , y : number){
    const cells : Cell[] = [];
    for (let row = 0; row < x; row++) {
        for (let col = 0; col < y; col++) {
            // cells.push({
            //     row : row,
            //     col : col
            // })
            cells.push({row,col})
        }        
    }
    return cells;
}
const board = createBoard(4,3);

 

만들어진 board에 0번째 에 말을 올리면 구현되는 구현부를 작성한다.

board[0].piece = {
    move(from:Cell, to: Cell){
        return true;
    }
}

 

이러한 방식으로 interface를 데이터 값으로 선언하여 사용할 수 있다. 이렇게 작성한 파일을 컴파일해보면 typescript의 interface는 모두 사라진다. 그렇기 때문에 interface를 사용하여 코드가 길어지더라도 실제 런타임에서는 코드가 줄어들게 된다.

컴파일1

 

필수 데이터를 interface화 하고 정확한 타입에 맞춰 값을 전달!! 아 귀찮아 

interface SignUp{
    email : string;
    id : string;
    password : string;
}

function ajaxSignUp(data:SignUp){
    // 기능
}

ajaxSignUp({
    email : "abc",
    id : "aaa",
    password : "1234"
})

 

뭔가 자바의 dto , vo 만드는 느낌이네요 자바스크립트의 interface처럼 필수 값은 아니지만