[타입스크립트] 기본 타입 연습해보기

이번 시간에는 타입스크립트의 기본 개념을 다루면서 연습해보는 시간을 가져보겠습니다.

1. 간단한 계산을 도와주는 함수 만들어보기

console.log(calculate('add', 1, 3)); // 4
console.log(calculate('substract', 3, 1)); // 2
console.log(calculate('multiply', 4, 2)); // 8
console.log(calculate('divide', 4, 2)); // 2
console.log(calculate('remainder', 5, 2)); // 1

이러한 결과값을 만들어보는 함수를 만들어보겠습니다.

function calculate(type:'add'|'substract'|'multiply'|'divide'|'remainder',num1:number,num2:number):number {
    let answer = 0;
  switch(type) {
    case "add" :
      return num1 + num2
    case "substract" : 
      return num1 - num2
    case "multiply" : 
      return num1 * num2
    case "divide" : 
      return num1 / num2
    case "remainder" : 
      return num1 % num2
      default:
      throw new Error('잘못된 식')
  }
}

이런식으로 type이라는 매개변수 안에 오로지 사칙연산과 나머지몫을 나타내는 타입만을 받고 싶을때 유니온타입을 사용해서 만들 수 있습니다.

하지만 함수안에 저렇게 많은 타입을 지정하면 코드의 가독성이 매우 떨어지기 때문에 type alias를 사용하는것이 좋습니다.

type Type = 'add'|'substract'|'multiply'|'divide'|'remainder'

function calculate(type:Type,num1:number,num2:number):number {
    let answer = 0;
  switch(type) {
    case "add" :
      return num1 + num2
    case "substract" : 
      return num1 - num2
    case "multiply" : 
      return num1 * num2
    case "divide" : 
      return num1 / num2
    case "remainder" : 
      return num1 % num2
      default:
      throw new Error('잘못된 식')
  }
}

이런식으로 위에서 type alias를 사용하여 훨씬더 간결하게 코드를 줄일 수 있습니다.

2. 좌표 움직이기

console.log(position); // { x: 0, y: 0}
move('up');
console.log(position); // { x: 0, y: 1}
move('down');
console.log(position); // { x: 0, y: 0}
move('left');
console.log(position); // { x: -1, y: 0}
move('right');
console.log(position); // { x: 0, y: 0}

해당 방향을 받는 함수를 실행하면 그 방향으로 좌표가 움직이는 간단한 함수를 만들어보겠습니다.

const position = {x:0,y:0}
type Direction = 'up' | 'down' |'left' | 'right'
function move(direction:Direction) {
  switch(direction) {
    case "up":
    position.y += 1
    break
    case "down":
    position.y -= 1
    break
    case "left":
    position.x -=1
    break
    case "right":
    position.x +=1
    break
    default:
    throw new Error('잘못된 식!')
  }
}

위에다가 좌표를 0 0 으로 초기화하는 변수를 만들어줍니다.
그리고 type alias를 사용하여 4개의 방향만 받을 수 있는 Direction 타입을 만들어줍니다.
그 후 switch문을 사용하여 case 별로 좌표를 움직입니다.
좌표가 움직이면 switch문이 멈춰야함으로 break를 반드시 걸어줍니다!

---

타입스크립트 인터넷 강의를 보면서 기본 개념을 이용한 함수를 간단하게 만들어봤습니다.

조금더 숙달되면 타입스크립트+리액트 조합으로 개인프로젝트를 만들어보는것이 목표입니다!

감사합니다