My Boundary As Much As I Experienced

TypeScript) 교차 타입 본문

FrontEnd/TypeScript

TypeScript) 교차 타입

Bumang 2023. 10. 20. 14:45

교차 타입

커스텀 타입을 혼합해서 쓸 수 있다.

 

사용법1. 객체 커스텀 타입과 객체 커스텀 타입을 혼합하면 합집합을 강제한다.

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

type Employee = {
  name: string;
  startDate: Date; // 자바스크립트 Date객체를 말한다.
};

type ElevatedEmployee = Admin & Employee;
// 이런걸 교차타입이라고 한다.

const e1: ElevatedEmployee = {
  name: "Max",
  privilages: ["create-server"],
  startDate: new Date(),
};

console.log(e1);

 

인터페이스를 커스텀 타입으로 조합할 수도 있다.

/* 

  인터페이스

*/

//인터페이스 상속으로도 비슷한걸 만들 수 있다.
interface Manager {
  name: string;
  privilages: string[];
}

interface Crew {
  name: string;
  startDate: Date; // 자바스크립트 Date객체를 말한다.
}

type CLevel = manager & crew;
// 타입으로 인터페이스 여러개를 조합할수도 있다!

const ceo: CLevel = { // 그 결과물
  name: "Max",
  privilages: ["create-server"],
  startDate: new Date(),
};

interface cLevelEmployee extends Crew, Manager {}
// 물론 인터페이스로도 인터페이스를 조합할 수 있다. 이런식으로 구현할 수 있다.

// 교차 타입이 좋은 이유 한 가지 더
// 객체 타입이 아니어도 조합할 수 있다.

 

사용법2. 유니언 타입을 교차타입으로 만들면 교집합만 취한다. 즉, 겹치는 것만 취한다.

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

type Universal = Combinable & Numeric;
// number로 판단한다. 왜냐하면 교차하는게 number이기 때문

'FrontEnd > TypeScript' 카테고리의 다른 글

d.ts파일 설정  (0) 2024.02.14
TypeScript) 타입가드  (1) 2023.10.20
TypeScript) 커스텀 타입 vs 인터페이스  (0) 2023.10.20
TypeScript) enum  (0) 2023.10.18
TypeScript) 배열과 튜플 타입  (1) 2023.10.18