[TypeScript] 타입 오퍼레이터

 

• 타입 오퍼레이터
  • 유니온 타입
  • 인터렉션 타입

---

- 타입 오퍼레이터

 

타입스크립트에서는 자바스크립트의 OR(||) 연산자와 AND(&&) 연산자와 같은 역할을 하는 타입이 존재한다.

 

바로, 유니온 타입과 인터렉션 타입이다.

 

오늘은 타입스크립트 오퍼레이터의 유니온 타입과 인터렉션 타입에 대해 알아보자.

 

 

 

---

 

 

 

- 유니온 타입

 

유니온 타입은 OR(||) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터이다.

 

타입스크립트에서는 ( | )로 여러 개의 타입을 결합한 타입을 말한다.

 

유니온 타입은 연결된 타입 중 1개의 타입만 만족하면 된다.

const firstElements = (elements: number[] | string[]) => elements[0];
firstElements([1, 2, 3]); // 1
firstElements(["a", "b", "c"]); // 'a'

 

첫 번째의 firstElement는 number 형태의 배열이기 때문에 결과창에 1이 출력되고,

 

두 번째의 firstElement는 string 형태의 배열이기 때문에 결과창에 'a'가 출력된다.

 

단, 유니온 타입은 여러 타입중 어떤 타입과 일치하는지 보장할 수 없기 때문에,

 

특정 타입의 메서드를 사용하려고 하면 에러가 나는 경우가 있다.

 

 

이럴 때에는?

타입 가드(Type Guard)라는 개념을 사용하여, 해당 메서드를 사용할 수 있는 타입인지 명시해야 한다.

const firstElements = (elements: number[] | string[]) => {
  // 타입 가드(Type Guard)
  const allNumber = elements.every((el) => typeof el === "number");
  return allNumber
    ? elements.reduce((acc, el) => acc + el, 0)
    : elements.reduce((acc, el) => acc + el);
};

console.log(firstElements([1, 2, 3])); // 1
console.log(firstElements(["a", "b", "c"])); // 'a'

 

타입 가드(Type Guard)에 대해 조금 더 설명하자면,

 

타입스크립트의 컴파일러는 코드에서 값의 타입을 자동으로 좁히는 기능을 제공한다.

 

여기서 타입 가드(Type Guard)를 사용하면?

 

코드 실행 중 특정 타입인지 확인하여 컴파일러가 해당 타입임을 확신할 수 있도록 도와주게 된다.

 

 

- 인터렉션 타입

 

인터렉션 타입은 AND(&&) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터이다.

 

타입스크립트에서는 ( & )로 2개 이상의 타입을 결합한 타입을 말한다.

 

인터렉션 타입은 연결된 타입을 모두 만족해야 한다.

const user1: { name: string; age: number } & { title: string } = {
  name: "John",
  age: 30,
  title: "Software Engineer",
};

 

아래는 any 타입을 사용했을 때의 예시이다.

{
  //1.인터섹션 (&) / AND 연사
  //1.1 여러 개의 타입을 모두 만족하게 하고 싶을 때 사용
}
{
  // 최소 2개 -> 객체에서 활용한다.
  let value: { name: string } & { age: number } = {
    name: "Hello",
    age: 20,
  };
}
{
  // 인터섹션 타입은 any와 결합하면 any로 평가된다.
  let value: { name: string } & any = 10;
  console.log(value.toFixed(2));
}
{
  // 인터섹션 타입이 never 타입과 결합하면 never로 평가된다.
  let value: { name: string } & never;
}

 

---

참고 강의: https://www.sucoding.kr/