인터섹션 타입

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

타입스크립트에는 그 이름에 걸맞게
앞서 알아본 타입 외에도 또 여러 가지 타입들이 있습니다!
오늘은 그 중에서 인터섹션 타입에 대해 알아보도록 하겠습니다.

👀 인터섹션 타입

인터섹션 타입은 서로 다른 타입(사용자 타입)을 하나로 결합하여 사용할 수 있게 해주는 타입입니다.
원하는 타입들을 &기호로 연결하여 사용합니다.

type Student = {
  id:number;
  name: string;
};

type ITTest = {
  name: string;
  score: number;
};

//인터섹션 타입
type ITStudentScore = Student & ITTest;

const myTestScore: ITStudentScore = {
  id: 20230001,
  name: 'Mary',
  score: 90
};

👀 인터섹션 대신 인터페이스로 대체하기

인터섹션 타입은 인터페이스로도 대체가 가능합니다.

interface Student = {
  id:number;
  name: string;
};

interface ITTest = {
  name: string;
  score: number;
};

interface ITStudentScore extends Student, ITTest {}

const myTestScore: ITStudentScore = {
  id: 20230001,
  name: 'Mary',
  score: 90
};

👀 교차 타입

두 가지 원시타입으로 이뤄진 유니언 타입이 있다고 가정해봅시다.

type NumberOrString = number | string;

그리고 여기 비슷하지만 다른, 유니언 타입이 하나 더 있습니다!

type StringOrBoolean = string | boolean;

위의 둘을 인터섹션 타입으로 합치면 어떤 결과가 나올까요?
아래 Result의 타입은 무엇일까요?

type Result = NumberOrString & StringOrBoolean;

타입스크립트는 Result를 string 타입으로 인식합니다.
위의 두 유니언 타입에서 string을 공통으로 갖고 있기 때문입니다.

이처럼 두 유니언 타입을 합쳐서 인터섹션 타입을 만들면,
인터섹션의 타입은 두 유니언 타입이 가진 원시타입 중 교차하는 타입을 가지게 됩니다.

😝 마무리

오늘은 인터섹션 타입에 대해 알아보았습니다.
앞으로 알아둬야할 타입들이 많기 때문에...
조금씩 하나하나 알아가 보려고 해요!

이렇게 하나씩 보니까 좀 더 이해가 쉬운데, 다음에는 또 어떤 타입이 저를 기다리고 있을까요?

저는 다음 시간에도 살아남을 수 있을까요?!😂

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/