230815 TypeScript: 리터럴, 유니온, 교차 Type

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

1. 리터럴 타입 (Literal Types)

리터럴 타입은 값자체를 타입으로 사용하는 것을 말한다. 예를 들어, 문자열 리터럴 타입은 특정 문자열을 가리킨다. 코드에서 이 타입에 대한 변수는 해당 리터럴 값만 할당할 수 있다. 리터럴 타입은 문자열, 숫자, 불리언 및 객체의 자료형을 가질 수 있다.

type Color = 'Blue' | 'Green' | 'Red'; // Color의 타입은 Blue 또는 Green 또는 Red만 있다
let age: 25; // age는 25라는 숫자 값만 가질 수 있다.
let isDone: true; // isDone은 true라는 불리언 값만 가질 수 있다.

type Job = 'teacher' | 'developer' | 'designer'

interface User {
	name : string
    job: Job // Job이라는 타입만 가질 수 있다. 다른 string은 안됨.
}

---

2. 유니온 타입(Union Types)

유니온 타입은 여러 다른 타입 중 하나를 가질 수 있는 타입으로 "| (vertical bar)" 기호를 사용하여 타입을 나열한다. 이전글들을 보면 종종 사용한 코드가 있다. 유니온의 형태는 예를 들면 아래와 같다.

let value: string | number;
value = "hello"; // 문자열 타입
value = 42; // 숫자 타입

식별가능한 유니온 타입이라는 것도 있는데, TypeScript 3.0 버전부터 도입된 개념이다. 이는 유니온 타입의 각 멤버를 구별하기 위해 타입 가드(Type Guard)를 사용하여 타입 시스템이 더 정확한 유형 추론을 할 수 있도록 도와주는 개념이다.
기본적으로, TypeScript에서 유니온 타입의 멤버를 사용하려고 할 때 어떤 멤버인지에 따라 해당 멤버의 공통 속성만 사용할 수 있도록 해준다. 예를 들어:

interface Cat {
  kind: "cat";
  name: string;
  meow: () => void;
}

interface Dog {
  kind: "dog";
  name: string;
  bark: () => void;
}

function petSounds(pet: Cat | Dog) {
  pet.name; // 공통 속성인 name에 접근 가능
  // pet.meow(); // Error! meow 메서드는 Cat 타입에만 존재
  // pet.bark(); // Error! bark 메서드는 Dog 타입에만 존재
}

이 경우, petSounds 함수에서 pet은 Cat 또는 Dog 타입일 수 있다. 하지만 유니온 타입의 멤버인 meow나 bark 메서드에 접근하려면 해당 멤버의 타입을 구분할 수 있어야 한다.
때문에 식별가능한 유니온 타입을 사용해 이러한 문제를 해결할 수 있다. 각 타입의 구분을 위해 kind라는 속성을 사용하여, 속성 값을 각 타입마다 고유한 값을 가지게 한다.

function petSoundsImproved(pet: Cat | Dog) {
  pet.name; // 공통 속성인 name에 접근 가능

  if (pet.kind === "cat") {
    pet.meow(); // 이제 meow 메서드는 Cat 타입에서 사용 가능
  } else {
    pet.bark(); // 이제 bark 메서드는 Dog 타입에서 사용 가능
  }
}

이렇게 식별가능한 유니온 타입을 사용하면 TypeScript는 kind 속성을 분석하여 각각의 타입을 식별하고 해당 타입에 특정한 속성과 메서드에 접근할 수 있는지 여부를 체크할 수 있다.

---

3.교차 타입 (Intersection Types)

교차타입은 여러타입을 합쳐서 사용하고 "& "기호를 사용하여 타입을 결합한다. 예를 들어:

interface Person {
  name: string;
  age: number;
}

interface Address {
  city: string;
  country: string;
}

const PersonWithAddress = Person & Address = {
	name: 'mimi',
        age: 28,
        city: 'seoul',
        country: 'korea',
};

위의 코드에서 PersonWithAddress 타입은 Person과 Address 인터페이스의 속성을 모두 가지고 있다. 조화를 다 작성해주지 않으면 에러가 나니 interface가 가진 속성을 모두 적어야한다.

유니온 타입과 교차 타입은 복잡한 타입을 표현하거나 조합할 때 유용하게 사용 가능하다. 이 세 가지 타입은 TypeScript의 강력한 기능 중 일부이며, 코드를 더 안전하고 유지보수 가능하게 만드는 데 도움을 준다.