[타입스크립트(TypeScript)] 고급 타입(Advanced Types)

// 고급 타입(Advanced Teypes)

- 타입 중에서도 더 복잡하거나 특정 용례를 다루기 위한 타입

---

// 인터섹션 타입, Intersection Type

- 두 개 이상의 타입을 결합하여 새로운 타입을 정의하는 것.

- 여러 타입의 속성을 모두 가지고 있게 된다.

- & 연산자를 사용한다.

- 유니언 타입을 교차시킨다면 공통적인 것만 교차된다.(교집합)

type 타입명1 = {
  prop1: string;
  prop2: number;
};

type 타입명2 = {
  prop3: boolean;
  prop4: Date;
};

type 타입명3 = 타입명1 & 타입명2;

- 타입3는 prop1, prop2, prop3, prop4 속성을 모두 가진다.

---

type Admin = {
  name: string;
  privileges: string[];
};

type Employee = {
  name: string;
  startDate: Date;
};

type ElevatedEmployee = Admin & Employee;

const e1: ElevatedEmployee = {
  name: 'Hana',
  privileges: ['create-server'],
  startDate: new Date(),
};

---

type Combinable = string | number;
type Numeric = number | boolean;

type Universal = Combinable & Numeric;
let test: Universal = 3;

---

// 타입 가드(Type Guard)

- 변수의 타입을 확인하는 방법

1. typeof 가드

- 주로 원시 타입을 확인한다.

if (typeof 변수 === '변수의타입') {
  //처리
}

---

2. in 연산자 가드

- 객체나 클래스 등이 특성 속성을 가지고 있는지 확인한다.

if ('속성' in 객체) {
  //처리
}

---

3. instanceof 가드

- 클래스 인스턴스의 타입을 확인한다.

if (인스턴스 instanceof 클래스) {
  //처리
}

---

// 구별된 유니언(Discriminated Union))

- 공통 속성을 가진 여러 타입을 구별하는 데 도움을 준다.

- 각 타입에 공통 속성을 추가해야 한다. > discriminant or tag

- 공통 속성은 보통 고유한 리터럴 타입을 가진다.

---

type Rabbit = {
  kind: "rabbit";
  legs: number;
};

type Chicken = {
  kind: "chicken";
  eggs: number;
};


type RaiseAnimal = Rabbit | Chicken

function getRaiseAnimal(animal: RaiseAnimal) {
  switch (animal.kind) {
    case "rabbit":
      return 4;
    case "chicken":
      return 3;
  }
}

---

// 형 변환(Type Casting)

- 변수의 타입을 명시적으로 지정하는 것

1. <>로 형 변환 대상 앞에 타입 명시

let 변수명: 타입 = <타입>(대상);

---

2. as 로 형 변환 대상 앞에 타입 명시( JSX 사용할 때 권장사항)

let 변수명: 타입 = 대상 as 타입;

---

// 함수 오버로딩(Function Overloading)

- 같은 함수 이름으로 매개변수 타입과 반환 타입을 다양하게 가질 수 있게 해준다.

- 대상 함수 바로 위에 같은 이름의 함수를 정의한다.

function 함수명(매개변수: 타입2): 반환타입2;

function 함수명(매개변수: 타입1): 반환타입1 {
  //처리
}

---

// 옵셔널 체이닝 연산자(Optional Chaining Operator)

-  속성을 읽을 때, 해당 속성이 존재하지 않아도 오류가 발생하도록 처리해주는 연산자

- null 또는 undefined를 만나면 멈춘다.

- '?.' 연산자를 사용한다.

---

const fetchedUserData = {
  id: 'u1',
  name: 'Hana',
  // job: { title: 'Developer', description: 'Front-end developer' },
};

console.log(fetchedUserData?.job);

---

// Null 병합

- Nullish(null, undefined) 데이터 처리를 도와준다.

- '??' 연산자를 사용한다.

- 왼쪽 피연산자가 nullish일 때만 오른쪽 피연산자 값을 반환한다.

---

const storedData = userInput ?? 'DEFAULT';