TS - interface

TS에는 interface라고, 파라미터 값이 어떤 '타입'을 갖는지 정의해주는 기능이 있다.

 

예시1) 로그인 ajax요청할 때, 아이디, 패스워드, 이메일 값을 string으로 받아와야 한다.

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

function ajaxSignup(data:singupType){
}

ajaxSingup({
   //vsc에서 자동완성으로 어떤 타입을 넣어야 하는지 알 수 있음
})

 

예시2) tv는 꼭 turnOn , turnOff 가 되어야 한다.

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

const myTv:TV={
  turnOn(){
   return true
  }
  turnOff(){}
}

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

tryTurnOn(myTv)

✨ ts->js

const myTv={
  turnOn(){
   return true
  }
  turnOff(){}
}

function tryTurnOn(tv){
	tv.turnOn()
}

tryTurnOn(myTv)

 

예시3) row:숫자   col:숫자   piece:row,col에서 움직여야 한다.

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

interface PieceType{
  move(from:Cell to:Cell):boolean
}

function createBoard(){
  const cells:Cell[]=[];
  for(row=0;row<4;row++){
    for(cell=0;cell<3;cell++){
      cells.push({row,col})
    }
  }
}

const board= createBoard();

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

✨ ts->js

function createBoard(){
  const cells=[];
  for(row=0;row<4;row++){
    for(cell=0;cell<3;cell++){
      cells.push({row,col})
    }
  }
}

const board= createBoard();

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