Type Script_04 타입스크립트의 꽃🌹 Type Alias & Union Type

항상 타입 보장하기!   타입은 명확하게!     타입은 엄격하게!     관리하기! 

---

타입스크립트의 꽃! 

1. Type Alias

  타입을 내가 지정해서 정의하고 사용하는 것을 말한다.

  (변수 정하는 것과 같은 원리라고 생각하면 편하다!)

type Text = string;
type Num = number;
const animal: Text = 'kitty';
const age: Num = 3;

type Person = {
  name: string;
  age: number;
};
// 타입에 설정해놓은 값 모두 입력해야 오류가 안남
const sister: Person = {
  name: 'Joy',
  age: 26,
};

 

  추가로 문자열로도 타입으로 지정할 수 있다.

// String Literal Types 문자열
type Message = 'Good luck!';
let toYou: Message;
toYou = 'Good luck!';

---

2. Union Type

  ' or '의 의미를 갖고 있는 타입. ' | ' 를 입력하여 사용한다.

  정의한 타입 외에 다른 값을 입력하면 오류 발생! 타입스크립트는 친절하게 들어갈 수 있는 값들을 알려준다.

---

3. Discriminated Union

  공통 필드를 갖고 있는 타입들이 있을 때, 키를 구별하는 기능이다. (TS의 장점인 명확함을 잘 나타내쥬?)

  주의할 점 : type 으로 정해놓은 값은 똑같이 리턴해줘야한다. 안 그러면.. 오류오류!

type SuccessState = {
  result: 'success';
  response: {
    body: string;
  };
};
type FailState = {
  result: 'fail';
  reason: string;
};
type LoginState = SuccessState | FailState; // 유니온 타입으로 상위 2개 타입을 또 타입으로 선언

function login(): LoginState {
  return {
    result: 'success', // SucceessState 타입을 선택
    response: {
      body: 'logged in!', // SucceessState 타입에 있는 값을 그대로 리턴해야 함
    },
  };
}

 function printLoginState(state: LoginState) {
    if (state.result === 'success') {
      console.log(`^_^ ${state.response.body}`); // type SuccessState
    } else {
      console.log(`T_T ${state.reason}`); // type FailState
    }
  }