2.2

({ ... })와 { ... }의 차이

화살표 함수를 사용할 때, 함수 본문이 객체 리터럴을 반환하는 경우 괄호 사용이 필수입니다. 예제를 통해 이 점을 알아보겠습니다.

올바른 형태

const playerMaker = (name: string): Player => ({ name });

여기서는 (name: string): Player => ({ name }) 구문을 통해 객체 리터럴 { name } 을 반환하고 있습니다. 화살표 함수에서 객체 리터럴을 반환할 때는 객체를 소괄호(())로 감싸야 합니다. 그렇지 않으면 {가 코드 블록의 시작으로 해석되기 때문입니다.

잘못된 형태

const playerMaker = (name: string): Player => { name };

이 코드는 오류가 발생합니다. 여기서 { name }은 객체 리터럴이 아닌 코드 블록으로 인식되어 함수의 본문 블록이 됩니다. 그러나 이 경우, name이라는 식만 포함하고 있으므로 함수가 정상적인 반환 값을 가지지 않습니다.

화살표 함수에서 객체 리터럴을 반환하고자 할 때는 ({ name })처럼 소괄호로 감싸주어야 함을 기억하세요.

화살표 함수 기본 형태

화살표 함수의 일반적인 문법은 다음과 같습니다.

• 한 줄로 작성하여 식을 반환할 경우: 중괄호 없이 작성 가능

  const add = (a: number, b: number) => a + b;

• 여러 줄이 필요한 경우, 중괄호로 블록을 열고 명시적 return을 사용해야 합니다.

  const add = (a: number, b: number) => {
    const sum = a + b;
    return sum;
  };

---

3.0 call signature

type Add = (a:number, b:number) => number; // call signature!

const add : Add = (a, b) => a + b

---

3.1 overloading

// call signature - shortcut
type Add = (a:number, b:number) => number;

// call signature - long way
type Add = {
    (a:number, b:number) : number
}

const add : Add = (a, b) => a + b 

3.4 conclusion

type Player<E> = {
    name: string
    extraInfo: E
}

// 방법1
// type NicoPlayer = Player<{favFood:string}>

// const nico: Player<{favFood: string}> = {
//     name: "nico",
//     extraInfo: {
//         favFood: "kimchi"
//     }
// }

// 방법2
type NicoExtra = {favFood: string}
type NicoPlayer = Player<NicoExtra>
const nico: NicoPlayer = {
    name: "nico",
    extraInfo: {
        favFood: "kimchi"
    }
}
const lynn: Player<null> = {
    name: "lynn",
    extraInfo: null
}