[TypeScript] - 연산자를 활용한 타입 정의

TypeScript는 JavaScript에서 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 타입을 정할 수 있습니다.

' | '  연산자를 이용한 타입을 유니온(Union) 타입이라고 하며, $ 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 부른다.

---

🔑 유니온 타입( ' | ')

타입을 지정할 때, 하나의 데이터에 하나 이상의 타입을 지정할 수 있게 해준다.

' | '연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입이다.

 

function getMessage(value: number | string) {
  console.log(value);
}

getMessage(100); // 100
getMessage("hello"); // hello

---

유니온 타입의 장점 

 

유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있다.

코드스테이츠 자료출처

---

유니온 타입 사용시 유의사항!

 

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

function askSomeone(someone:Developer | Person){
  someone.name; ⭕️
  someone.skill; ❌
  someone.age; ❌
}

우리는 두 인터페이스 모두 적용될 것이라 생각하여, 파라미터에서 name, skill, age 모두 접근이 될 것이라 예상하지만 두 인터페이스의 공통 속성에만 접근할 수 있다.

 

실질적으로 askSomenone 함수 내부에서는 Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있습니다.

왜냐하면 공통되고 보장된 프로퍼티만 제공해야 하기 때문입니다. 만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 합니다.

타입가드란?
TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나입니다.
타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 줍니다.

 

타입 가드를 사용해 작성된 코드

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

TypeScript에서는 in 연산자를 제공하고 있습니다. in 연산자는 객체의 프로퍼티 이름과 함께 사용되며, 해당 프로퍼티가 객체 내에 존재하는지 여부를 검사한다.

 

---

🔑 인터섹션 타입('&')

 

• 유니온 타입은 A 또는 B 타입으로 지정하는 것이었지만, 인터섹션 타입은 A 이면서 B 인 타입을 지정해 주는 것이다.
• 유니온 타입이 여러 타입 중에서 선택지를 고르는 것이라면, 인터섹션 타입은 그 모든 타입을 충족하도록 강제하는 것이다.

 

인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않다.

 

interface Developer {
  name: string;
  skill: string;
}

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

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

인터섹션 타입을 사용하여 Developer와 Person을 하나의 타입으로 묶었습니다. 따라서 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있습니다.

 

그러나 인터섹션 타입은 타입 가드는 필요 없는 반면 Developer와 Person이라는 새로운 합집합을 만들어 내는 것이기 때문에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야만 합니다.