[TypeScript] | & ?

| 연산자

하나의 변수에 여러 타입을 허용해 줄 수 있습니다
이런 타입을 'Union Type'이라고 합니다

let numOrStr : number | string;

numOrStr = "hello";
numOrStr = 3;

& 연산자

여러 타입을 하나로 결합할 수 있습니다
이런 타입을 'Intersection Type'이라고 합니다

type Human = {
  name: string;
}

type User = Human & {
  nickname: string;
}

let user1: User = {
    name: "kang",
    nickname: "user1"
}

? 연산자

- Optional Parameters

두개 혹은 세개의 숫자를 더해주는 함수가 필요하다고 가정해 봅시다

아래와 같이 함수를 작성할 경우, 함수 호출 시 모든 파라미터를 넘겨주어야 합니다

const sum = (a: number, b: number, c: number | undefined) => {
    let result = a + b + (c ?? 0);
    return result;
}

아래와 같이 수정하면, 코드가 줄어들 뿐만 아니라
( 세개의 파라미터가 모두 undefine일 수 있다고 가정해 봅시다 )

마지막 파라미터를 전달하지 않아도 됩니다

const sum = (a: number, b: number, c?: number) => {
    let result = a + b + (c ?? 0);
    return result;
}

- Optional Properties

api를 통해 User의 정보를 가져온다고 가정해 봅시다

interface User {
  id: string;
  name: string;
  address: string;
} 
const loadUser = (id: string): User => {
  let user: User;
  /**
   *   fetch 함수 ...
   */

  return user;
}

하지만 주소는 유저가 필수로 입력해야 하는 값이 아닙니다
서버는 다음과 같은 값을 반환합니다

{
  "id": "28349938477",
  "name": "user1",
}

이렇게 되면, 위의 loadUser 함수는 에러를 만나게 되겠죠

이 때 아래와 같이 수정한다면?!

interface User {
  id: string;
  name: string;
  address?: string;  // 이 부분!!!!!!!
} 
const loadUser = (id: string): User => {
  // ...
}

짠~ 에러 없이 동작합니다