[ TypeScript ] 타입스크립트의 연산자 활용 타입이란 ?

타입스크립트의 연산자 활용 타입에 대해 알아봅시다~!

---

유니온(Union) 타입

• 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다.
• 예를 들어, number | string 은 숫자 또는 문자열 타입을 의미한다.

function logText(text: string | number) {
  // ...
}

유니온 타입을 사용해 TypeScript의 이점을 살리면서 코드를 작성해보자.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

타입을 any로 정의하게 된다면 JavaScript로 작성하는 것과 큰 차이가 없기 때문에,

유니온 타입을 사용해 TypeScript의 이점을 살리면서 코딩하는 것이 좋다.

 

유니온(Union) 타입의 장점

• 유니온 타입을 사용하면 타입을 추론할 수 있기 때문에, 타입에 관련된 API를 쉽게 자동완성으로 얻을 수 있음
  • any 타입을 사용하면 타입 추론 X, 자동완성 기능 사용이 어려움
• 코드의 가독성을 높일 수 있다.

3개의 타입으로 선언된 변수는 3개의 타입 중 하나의 값을 가질 수 있다는 것이 표시되어
코드를 이해하기 쉽게 만들어 줌
let value: string | number | boolean;

유니온(Union) 타입을 쓸 때 주의할 점

• 유니온 타입인 값은 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.
• 타입 가드를 해줘야만 전달인자를 전달 할 때 선택지가 생기게 된다.

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

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

인터페이스를 사용하여 Developer와 Person을 정의

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

 

실질적으로 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);
  }
}

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

---

인터섹션(Intersection) 타입

• 여러 타입을 모두 만족하는 하나의 타입을 의미, & 연산자를 사용하여 표현한다.
• 인터섹션 타입은 타입 가드는 필요 없지만 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야 한다.
• 인터섹션 타입은 전달인자를 전달할 때 선택지가 없음

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

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

// User 변수는 두 객체에 각각 정의된 속성 모두를 받게 됨
type User = Developer & Person;

// 또는 함수로 받을 때 
function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

---

정리

유니온 타입	인터섹션 타입
A | B : A타입, B 타입 둘 중 하나	A & B : A타입이면서 B타입
공통 프로퍼티 외 프로퍼티에 접근 시, 타입 가드 필요 O	인터섹션으로 타입을 연결하기 때문에 타입가드 필요 x
전달 인자를 전달할 때 선택지가 생김	전달 인자를 전달할 때 선택지가 없음