[TypeScript] 리터럴, 유니온/교차 타입 - 정의 및 사용

리터럴, 유니온/교차 타입

---

리터럴 타입(Literal Types)

TypeScript에는 문자열과 숫자, 두 가지 리터럴 타입이 있는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있다.

userName1처럼 정해진 string 값을 가진 변수를 '문자열 리터럴 타입'이라고 한다.

 

📌 Literal Types

const userName1 = "Bob";
let userName2 = "Tom";

// userName2 = 3 
// -> Error : 최초 할당된 값이 string이므로

// Literal + Union
// | : Union Type

type Job = "policer" | "developer" | "teacher";

interface User {
  name: string;
  job: Job;
}

const user: User = {
  name: "Bob",
  job: "policer"
  // 문자형 리터럴 타입
}

interface HighSchoolStudent {
  name: String;
  grade: 1 | 2 | 3;
  // 숫자형 리터럴 타입
}

job / grade에는 허용된 세 개의 값이 아닌 다른 값을 사용할 수 없다. (사용시 오류 발생)

 

 

유니온 타입(Union Types)

유니온 타입(Union Types)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 타입이다.

 

📌 Union Types

interface Car {
  name: "car";
  color: "string";
  start(): void;
}

interface Mobile {
  name: "mobile";
  color: string;
  call(): void;
} 

function getGift (gift: Car | Mobile) {
  console.log(gift.color);
  if (gift.name === "car") {
    gift.start();
  } else {
    gift.call()
  }
}

여기선 if문을 사용했지만, 검사할 항목이 많아지면 switch를 사용하는 것이 가독성에 좋다.

getGift()의 파라미터 gift에는 Car나 Mobile 타입이 모두 올 수 있다.

이렇게 동일한 속성의 타입을 다르게 해서 구분할 수 있는 것을 '식별 가능한 유니온 타입'이라고 한다.

 

교차 타입(Intersection Type)

교차 타입(Intersection Types)이란 여러 타입을 하나로 합쳐주는 역할을 한다.

유니온 타입이 or 연산자(||)와 같이 작동한다면, 교차 타입은 and (&&)를 의미한다. (✅ 'A' 그리고 'B')

 

📌 Intersection Types

// Intersection Types : 교차 타입

interface Car {
  name: string;
  start(): void;
}

interface Toy {
  name: string;
  color: string;
  price: number;
}

const toyCar: Toy & Car = {
  name: "타요",
  color: "red",
  price: 100,
  start() {
    console.log("출발합니다")
  },
}

---

🚀 참고

• TypeScript #5 리터럴, 유니온/교차 타입, 코딩앙마
• TypeScript 공식문서 (한국어 번역본)
• [TypeScript] 유니온 타입과 인터섹션 타입 (Union Type & Intersection Type) #4