[TypeScript] 오늘의 공부 정리

계산기 함수 만들기

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

위 조건을 이뤄낼수 있는 함수를 만들어내는것이었다. 

어려운것이 아니지만 강사님이 작성한것과 내가 작성한것에 차이를 적으면서 

비교를 기록으로 남기려고한다.

 

내가 만든함수방식

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

function calculate(tool:Tool, num1 :number, num2: number) {
    if(tool === 'add'){
        return num1 + num2
    } else if(tool === 'substract'){
        return num1 - num2
    }
     else if(tool === 'multiply'){
        return num1 * num2
    }
     else if(tool === 'divide'){
        return num1/num2
    } else {
        return num1%num2
    }
}

강사님이 만든 함수방식

function calculate(command:Command, a:number, b:number):number{
    switch(command){
        case "add":
            return a + b
        case "substract":
            return a - b
        case "multiply":
            return a * b
        case "divide":
            return a / b
        case "remainder":
            return a % b
        default:
            throw Error('unknownCommand')
    };
};

<차이점을 보고 배운점>

케이스가 많은경우는 if else보다 가독성이 좀더 좋은 switch를 쓰자

그리고 만약 원하는 파라미터가 안들어올경우에 대비하여 에러 처리를 하자

 

별건아니지만 별거아닌것들이 모여서 실력을 만들어낸다고 생각한다

 

---

좌표이동 함수 만들기

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 MoveCommand = "up" | "down" | "left" | "right" 

function move(move : MoveCommand) {
    switch(move){
        case "up":
            return position['y'] = position.y +1;
        case "down":
            return position['y'] = position.y -1;
        case "left":
            return position['x'] = position.x -1;
        case "right":
            return position['x'] = position.x +1;
        default:
            throw Error("unknownMoveCommand")
    }
}

강사님이 만든 함수방식

function move(move: MoveCommand) {
  switch (move) {
    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(`unknownMoveCommand${move}`);
  };
};

<차이점을 보고 배운점>

나의 경우에는 할당 연산자가 이 함수를 작성할때 생각이 나지않아 그냥 머리있는 그대로 객체에 다시 할당을 해주었다.

(다시 보니 이 기본적인게 왜 기억이 안났지 싶다... 부끄럽다...)

 

나같은 경우는 switch 문에서 케이스에 맞는경우가 있다면 return값을 사용하여 함수로 다시 돌아가였는데,

강사님의 경우는 break를 사용하여 switch문에서 나가는 형식으로 작성하였다.

 

물론 지금의 방식에서는 return을 사용하던 brek를 사용하던 문제가 되는 점은 없지만,

이 둘의 차이는 다시 한번 짚고 갈필요가있다생각하여 아래 코드를 통해 직접비교 해보았다.

const employee = {
  name: "james",
};

const test = (employee: any) => {
  let answer;

  switch (employee.name) {
    case "james":
      return answer = "web";
      //break로 switch문을 탈출할경우에만 18번쨰 줄 console이 작동이된다.
      //return으로 할경우는 조건이 맞는경우에 바로 함수를 종료하고 함수를 실행시킨곳으로 바로 가기 때문
    case "aiden":
      answer = "R&D";
      break;
    default:
      answer = "없는 직원입니다.";
  }
  console.log('break일때만 보임');
  return answer;
};

console.log(test(employee));

---

로딩함수 만들기

  type LoadingState = {
    state: "loading";
  };

  type SuccessState = {
    state: "success";
    response: {
      body: string;
    };
  };

  type FailState = {
    state: "fail";
    reason: string;
  };
  
  printLoginStates({ state: "loading" }); // 👀 loading...
  printLoginStates({ state: "success", response: { body: "loaded" } }); // 😃 loaded
  printLoginStates({ state: "fail", reason: "no network" }); // 😱 no network

내가 작성한 코드

  type ResourceLoadState = LoadingState | SuccessState | FailState;

  //내가 작성한 것
  function printLoginStates(state:ResourceLoadState){
    switch (state.state) {
      case "loading":
        console.log("👀 loading...");
        break;
      case "success":
        console.log(`😃 ${state.response.body}`);
        break;
      case "fail":
        console.log(`😱 ${state.reason}`);
        break;
      default:
        throw new Error(`unknown Commnand${state}`);
    }
  }

 

위 문제는 typeScript Discriminated Union를 이용하는것으로

큰 어려움없이 문제를 해결할 수있었다.

 

이 코드는 강사님도 나의 생각과 동일하여 별차이 없어 생략을 한다.

 

비록 간단한 문제지만 typeScript의 기본문법들을 머리속에서 끄집어내는 연습을 해보아서 재미가 있었다.

차근차근이렇게 typeScript도 친해져야겠다.