Skip to content

Latest commit

 

History

History
178 lines (137 loc) · 6 KB

Union_Intersection.md

File metadata and controls

178 lines (137 loc) · 6 KB
Raw

TypeScript의 연산자 활용 타입

1. 유니온(Union) 타입

  • 둘 이상의 타입을 합쳐서 만들어진 새로운 타입

  • | 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입 (e.g. number | string : 숫자 또는 문자열 타입)

  • value 매개변수의 타입을 any로 정의하고, 타입이 number인지 string인지에 따라 if-else 문으로 나누어 출력한 경우

      function printValue(value: any): 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의 이점을 살리 코딩하는 것이 좋음

    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

  • 위의 printValue 함수는 숫자 또는 문자열 값을 입력받고 있음.

  • 이때, 유니온 타입을 사용해 number | string 타입으로 지정하고 있음.

  • 이후 입력된 값의 타입을 typeof 연산자를 사용하여 검사 → 해당 값이 숫자인 경우와 문자열인 경우 각각 다른 로그를 출력

  • 이처럼 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용

(1) 유니온(Union) 타입의 장점

  • 타입을 추론할 수 있기에, 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있음

  • 코드의 가독성을 높일 수 있음: 타입으로 선언된 변수는 문자열, 숫자, 불리언 타입 중 하나의 값을 가질 수 있다는 것이 명시적으로 표시되어 코드를 이해하기 쉽게 만들어 줌

    let value: string | number | boolean;

(2) 유니온(Union) 타입 사용 시 유의할 점

  • 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 함

    // interface를 사용해 Developer와 Person을 정의
interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}
    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);
  }
}

2. 인터섹션(Intersection) 타입

  • 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법

  • & 연산자를 사용하여 표현

  • 타입을 결합해 아래 Developer와 Person 각각에 정의된 속성 모두 받음

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

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

// 타입 결합
type User = Developer & Person;

  • &로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기에, 타입 가드가 필요 없음

  • askSomeone 함수 내에 정의된 프로퍼티에 전부 접근 가능

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

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

  // 타입 결합해 가드 필요 X
  function askSomeone(someone: Developer & Person) {
      console.log(someone.age);
      console.log(someone.name);
      console.log(someone.skill);
  }

  • 반면 Developer와 Person이라는 새로운 교집합을 만들어 내는 것이기에, 전달인자를 전달할 때 모든 프로퍼티를 전부 보내줘야만 함.

  • 반대로 유니온 타입은 타입 가드를 해줘야 하지만 전달인자를 전달할 때 선택지가 생기게 됨

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

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

  function askSomeone(someone: Developer | Person) {
      // 아래와 같이 프로퍼티에 접근
      if ('skill' in someone) {
          console.log(someone.skill);
      }

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

  // 유니온 타입은 전달인자를 전달할 때 선택지가 생김
  askSomeone({name: '김코딩', skill: '웹 개발'});
  askSomeone({name: '김코딩', age: 20});

  function askSomeone2(someone: Developer & Person) {
      // 타입 가드를 사용하지 않아도 모든 프로퍼티에 접근할 수 있음
      console.log(someone.age);
      console.log(someone.name);
      console.log(someone.skill);
  }

  // 그러나 인터섹션 타입으로 결합하게 된다면 전달인자를 전달할 때 선택지가 없음
  askSomeone2({name: '김코딩', skill: '웹 개발', age: 20});