리터럴 타입(literal type) / 유니언 타입(union type) / 인터섹션 타입(intersection type)

최종 수정 : 2024-05-27

리터럴 타입(literal type)

변수를 let과 const 키워드로 타입을 선언했을 때, 타입이 다르게 추론된다. const로 선언한 변수의 타입을 '리터럴 타입'이라고 한다. 변수의 값을 타입으로 설정한다는 의미이다. const로 선언된 변수는 값이 바뀔 일이 없으므로, 값 자체를 타입으로 추론해버리는 것이다.

let name1 = 'yeongtaek'; // string 타입
const name2 = 'yeongtaek'; // 리터럴 타입

let price = 100;
const cost = 5000;

---

유니언 타입(union type)

여러 개의 타입 중 한 개만 쓰고 싶을 때 사용하는 문법이며, OR 연산자(합집합)의 | 를 이용하여 여러 개의 타입 중 1개를 사용하겠다고 선언하는 방식이다.

function bookPage(text: string | number) {
 console.log(text);
}

// 타입 별칭으로 유니언 타입으로 타입들을 합칠 수 있다.
type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Union1 = Dog | Person;

let union1: Union1 = {
  name: "",
  color: "",
};

let union2: Union1 = {
  name: "",
  language: "",
};

let union3: Union1 = {
  name: "",
  color: "",
  language: "",
};

타입이 다르다는 이유로 함수를 하나 더 작성해서 관리해야 하는 불편함을 해결해준다. 또한 any 타입을 사용하는 것보다 더 타입을 정확하게 사용할 수 있다.

 

any 타입은 지양하는 것이 좋다.

any 타입은 타입이 없는 것과 마찬가지이므로 타입스크립트의 장점을 살리지 못한다.
또한 타입이 정해져 있을 때 자동으로 속성과 API를 자동 완성하는 기능을 지원받지 못한다.
자동완성 기능을 이용할 수 없으므로, 오탈자가 발생했을 때 에러를 미리 발견하기가 어렵다.

---

인터섹션 타입(intersection type)

타입 2개를 하나로 합쳐서 사용할 수 있는 타입이며, and 연산자(교집합)의 &을 이용하여 인터페이스 2개를 합치거나 타입 정의 여러 개를 하나로 합칠 때 사용한다.

interface Book {
 name: string;
}

interface BookPage {
 page: number;
}

function bookInfo(book: Book & BookPage) {
 console.log(something.name);
 console.log(something.number);
}

type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Intersection = Dog & Person;

let intersection1: Intersection = {
  name: "",
  color: "",
  language: "",
};

단! 인터섹션을 사용하는 경우, 합친 타입의 속성들은 모두 사용해야 한다.

 

왜 합쳐지는가?

타입스크립트에서 타입은 Structural Subtyping이라는 규칙을 따른다. 구조가 같으면 같은 타입이라고 판단하는 것이다. 

 

---

타입스크립트에서 자주 쓰는 연산자

keyof 연산자

객체 타입에서 프로퍼티 이름들을 모아서 Union한 타입으로 만들고 싶을 때 사용한다.

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

type ProductProperty = keyof Product; // 'id' | 'name' | 'price' | 'membersOnly

 

typeof 연산자

자바스크립트 코드에서 사용하면 결괏값이 문자열이지만, 타입스크립트 코드에서는 결과 값은 타입스크립트의 타입이다.

const product: Product = {
  id: 'c001',
  name: '카드타드',
  price: 4700,
  salePrice: 3500,
  membersOnly: true,
};

console.log(typeof product); // 문자열 'object'

const product2: typeof product = { // 타입스크립트의 Product 타입
  id: 'h001',
  name: '오예스',
  price: 3900
  salePrice: 2700
  membersOnly: false,
};

 

typeof 나 in 연산자

특정 타입의 속성과 메서드를 사용하고 싶을 때

 

1) in 연산자는 객체에 특정 속성이 있는지 확인한다.

함수 내부에서 파라미터 타입의 종류에 따라 특정 로직을 실행하고 싶다면, in 연산자를 사용하면 된다.

 

2) typeof 연산자는 해당 데이터가 어떤 데이터 타입을 갖고 있는지 문자열로 반환해 준다.

interface Book {
 name: string;
 page: number;
}

interface Film {
 name: string;
 author: string;
}

// Error
function view(something: Book | Film) {
 console.log(something.page);
 console.log(something.author);
}

// in 연산자
function view(something: Book | Film) {
 if ('page' in something) {
  console.log(something.page);
  return;
 }
 if ('author' in something) {
  console.log(something.author);
  return;
 }
}

// typeof 연산자
function view(something: Book | Film) {
 if (typeof someting === 'string') {
  console.log(something.toUpperCase());
 }
 if (typeof something === 'number') {
  console.log(something.toLocaleString());
 }
}