TypeScript 유니언 타입, 타입 별칭, 인터섹션 타입

유니언 타입

여러 종류의 타입을 허용하기 위해 |(OR 연산자)로 연결한 타입

• any 타입은 모든 타입을 허용하지만 유니언 타입은 | 연산자로 연결된 타입 중 하나를 허용한다.

(() => {
  // 문자를 받아서 콘솔에 출력하는 함수
  function logString(msg: string) {
    console.log(msg);
  }
  // 숫자를 받아서 콘솔에 출력하는 함수
  function logNumber(msg: number) {
    console.log(msg);
  }

  logString("hello");
  logNumber(123);

  // 유니언 타입
  // | 연산자로 여러 타입을 지정
  function log(msg: string | number | boolean) {
    console.log(msg);
  }

  log("hello");
  log(123);
  log(false);
})();

타입 별칭

값을 변수에 저장하듯 타입을 변수에 저장해서 사용한다.

• 유니언 타입 같은 복잡한 타입에 의미있는 이름을 붙여서 사용한다. (별칭)
• type 키워드로 선언하는 사용자 정의 타입
• 동일한 이름으로 중복 선언이 불가능하다.
• JS로 컴파일되면 제거된다.
• 명명 규칙
  • 파스칼 케이스
  • 명사형
• 객체 타입 선언
  • 객체의 속성명과 속성값의 타입을 지정한다.
  • 속성은 , 또는 ;으로 구분할 수 있지만 ;을 권장한다.
  • 타입 별칭을 타입으로 지정한 객체는 타입 별칭에 정의된 속성명과 속성의 타입을 준수해야 한다.

(() => {
  // 타입 별칭 생성
  type User = {
    name: string;
    age: number;
  };

  const u1: User = {
    name: "하루",
    age: 5,
  };
  const u2: User = {
    name: "나무",
    age: 8,
  };

  console.log(u1.age, u2.name.toUpperCase());
})();

인터섹션 타입

타입 여러 개를 하나로 합치기 위해 &(AND 연산자)로 연결한 타입

• 타입 별칭을 확장할 때 주로 사용한다.
• 동일한 속성을 인터섹션 타입으로 추가할 때 타입이 다르면 never 타입이 되면서 해당 속성은 사용할 수 없다.

(() => {
  // 할일 등록시 사용
  type TodoRegist = { title: string; content: string };

  // 할일 조회시 사용
  type TodoInfo = TodoRegist & { id: number; done: boolean };

  const todo1: TodoRegist = {
    title: "타입스크립트 공부",
    content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
  };
  const todo2: TodoInfo = {
    id: 13,
    title: "타입스크립트 공부",
    content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
    done: false,
  };
})();