Typescript - type을 적용해 간단한 함수 만들기

Posted by Juri on May 12, 2022

Let’s make a calculator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
type Command = "add" | "substract" | "multiply" | "divide" | "remainder";

const add = (num1: number, num2: number): number => {
    return num1 + num2;
};
const substract = (num1: number, num2: number): number => {
    return num1 - num2;
};
const multiply = (num1: number, num2: number): number => {
    return num1 * num2;
};
const divide = (num1: number, num2: number): number => {
    return num1 / num2;
};
const remainder = (num1: number, num2: number): number => {
    return num1 % num2;
};
const calculate = (command: Command, num1: number, num2: number): number => {
    switch (command) {
        case "add":
            return add(num1, num2);
        case "substract":
            return substract(num1, num2);
        case "multiply":
            return multiply(num1, num2);
        case "divide":
            return divide(num1, num2);
        case "remainder":
            return remainder(num1, num2);
        default:
            throw new Error(`unknown command ${command}`);
    }
};

Let’s make a game

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const position = { x: 0, y: 0 };
type Direction = "up" | "down" | "left" | "right";
const move = (direction: Direction) => {
    switch (direction) {
        case "up":
            position.y += 1;
        case "down":
            position.y -= 1;
        case "left":
            position.x -= 1;
        case "right":
            position.x += 1;
        default:
            throw new Error(`unknown direction ${direction}`);
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
type LoadingState = {
    state: "loading"
};
type SuccessState = {
    state: "success"
    response: {
        body: string
    }
};
type FailState = {
    state: "fail"
    reason: string
};
type ResourceLoadState = LoadingState | SuccessState | FailState

const printLogState= (state: ResourceLoadState) => {
    switch(state.state){
        case "loading":
            console.log("loading...")
            break;
        case "success":
            console.log(`loaded. ${state.response.body}`)
            break;
        case "fail":
            console.log(`no network. ${reason}`);
            break;
    }
}

화살표 함수를 사용한 건 개인의 취향.