[TypeScript] 리터럴 타입, 유니언 타입, 교차 타입 설명

TypeScript는 프로그래밍 언어, 작성한 코드가 자바스크립트로 변환

개발자가 실수하지 않도록 보호. 어떻게?

타입스크립트 작성 → 통과 → 컴파일 → 자바스크립트 (즉, 타입스크립트에서 에러가 있으면 JS로 컴파일이 안됨.)

---

리터럴 타입(Literal Type): 정확한 타입

- TypeScript의 리터럴 타입은 string, number 두 가지가 있으며, 문자열이나 숫자에 정확한 값을 지정할 수 있습니다.

https://www.typescriptlang.org/play?#code/Q

문자열 리터럴 타입 (String Literal Types)

아래 코드에서 Food 에서 허용한 3개의 문자열 외에 다른 문자열을 사용하게 되면 에러가 발생한다.

type Food = "rice" // 리터럴 타입
type Food = "rice" | "noodle" | "meat"; //유니언 타입

const myFood1: Food = "rice";
const myFood2: Food = "aaa";  // Error: Type 'aaa' is not assignable to type 'Food'.

숫자형 리터럴 타입 (Numeric Literal Types)

숫자형도 마찬가지로 허용한 숫자 외에 다른 숫자를 사용하게 되면 에러 발생

type Grade = 1 | 2 | 3;

const student1: Grade = 1;
const student2: Grade = 5;  // Error

리터럴 타입 좁히기 (Literal Narrowing)

var 또는 let으로 변수를 선언할 경우 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알립니다.

반면, const로 변수를 선언하게 되면 TypeScript에게 이 객체는 절대 변경되지 않음을 알립니다.

// 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다.
const helloWorld = "Hello World";

// 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다.
let hiWorld = "Hi World";

무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을

유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 한다.

---

유니언 타입(Union Types)

- Union Type은 변수의 값이 여러 타입을 가지는 경우 주로 사용되며, 타입 사이에 파이프( | ) 기호를 사용하여 정의합니다.

let age: number | string;

age = 10;
age = '15';

문자열 리터럴(Literal) 타입에 Union Type 적용

Union Type은 주로 문자열 리터럴(Literal)에서 사용됩니다.

type Color = "Red" | "Black" | "White";

let color: Color;
color = "Red";

여러 타입을 가지는 경우

다음 코드처럼 type A와 type B가 존재합니다.

type A = {
  A: number;
  B: string; // 동일한 속성
}

type B = {
  B: number; // 동일한 속성
  C: string;
}

type A와 type B는 동일한 속성 B를 가집니다.

type A는 속성 B를 string 타입으로 정의하였고 type B는 속성 B를 number 타입으로 정의했습니다.

type A = {
  A: number;
  B: string;
}

type B = {
  B: number;
  C: string;
}

type C = A | B;   // 유니언 타입

let obj1: C = {
  A: 10,
  B: 'HI',        // string | number
  C: 'string'
}

let obj2: C = {
  A: 10,
  B: 20,          // string | number
  C: 'string'
}

---

교차 타입(Intersection Types)

- 교차 타입은 유니언 타입과 비슷하지만 다른 방식으로 동작합니다.

// 교차 타입은 교차된 모든 타입을 적어주지 않으면 에러를 뱉어냅니다.

interface Car {
  name: string;
  start() : void;  // 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용
}
interface Toy {
  name: string;
  color: string;
  price: number;
}

const toyCar: Toy & Car = {
  name: '타요',
  start() {},
  color: 'blue',
  price: 1000,
}
// 모든 타입 적용

type A = {
  A: number;
  B: string;
}

type B = {
  B: number;
  C: string;
}

type C = A & B;   // 교차 타입

let obj1: C = {
  A: 10,
  B: 'HI',       // 문제 발생  
  C: 'string'
}
//never: 절대 발생할 수 없는 타입을 나타낸다.항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.
let obj2: C = {
  A: 10,
  B: 20,         // 문제 발생
  C: 'string'
}

문제의 원인은 type A와 type B의 B 속성은 교차되는 속성이지만, 타입이 다르기 때문입니다.

정리하자면 Intersection Type은 Union Type과 비슷하지만, 교차되는 타입이 동일한 경우 사용됩니다.