[Typescript] 고급타입 (문자형 리터럴 타입 ~ 다형성 this 타입)

문자열 리터럴 타입

문자열을 하나의 타입으로 지정하여 사용하는 것.

type selectedGroup = 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null;

 

const GroupFilter = ({
  selectedGroup,
  setSelectedGroup,
}: {
  selectedGroup: 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null;
  setSelectedGroup: React.Dispatch<
    React.SetStateAction<'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null>
  >;
}) => {
  return (
    <GroupFilterWrapper>
      <GroupFilterBtn
        $selected={selectedGroup === 'BTS'}
        onClick={() => setSelectedGroup('BTS')}
      >
        BTS
      </GroupFilterBtn>
      <GroupFilterBtn
        $selected={selectedGroup === '뉴진스'}
        onClick={() => setSelectedGroup('뉴진스')}
      >
        뉴진스
      </GroupFilterBtn>
      <GroupFilterBtn
        $selected={selectedGroup === '블랙핑크'}
        onClick={() => setSelectedGroup('블랙핑크')}
      >
        블랙핑크
      </GroupFilterBtn>
      <GroupFilterBtn
        $selected={selectedGroup === '세븐틴'}
        onClick={() => setSelectedGroup('세븐틴')}
      >
        세븐틴
      </GroupFilterBtn>
    </GroupFilterWrapper>
  );
};

 

숫자 리터럴 타입

숫자 그 자체를 타입으로 사용하는 것.

명시적으로 작성되는 경우는 거의 없으나 에러를 잡을 때 유용하게 쓰임.

function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
    // ...
}

열거형 멤버 타입 (Enum Member Types)

모든 멤버가 리터럴로 초기화될 때 타입을 가진다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

enum Status {
  Active = 1,
  Inactive = 0,
}

 

판별 유니언(구별된 유니언)

리터럴 멤버 속성이 있는 클래스가 있다면 그 속성으로 유니언 구성원을 구별 할 수 있다. 고급 유니언 패턴이며, 각각의 타입이 특정 속성을 사용해 구별되도록 할 수 있다.

 

일반 적으로 아래와 같이 정의됨

type MyType = Type1 | Type2 | Type3 | ...;

 

이때 Type1 , Type2 , Type3 은 다양한 형태의 객체를 나타내는 타입이다.

 

구별된 유니언을 정의하기 위해 공통된 속성을 가진 인터페이스를 만들고, 이를 이용해 각 타입을정의한다. 이러한 속성을 통해 타입스크립트는 해당 속성의 값에 따라 각각의 타입을 구별할 수 있다.

 

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

interface Triangle {
  kind: "triangle";
  base: number;
  height: number;
}

type Shape = Circle | Square | Triangle;

Circle, Square, Triangle 각각은 다른 도형을 나타내는 인터페이스입니다. 이들은 모두 kind라는 공통된 속성을 갖고 있고,

이 속성을 통해 TypeScript는 구별된 유니온을 만들어내며, 각 도형을 Shape 이라는 타입으로 나타낼 수 있습니다.

 

그리고 아래와 같이 함수를 작성할 수 있습니다.

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    case "triangle":
      return (shape.base * shape.height) / 2;
  }
}

 

이렇게 코드의 가독성을향상 시키고, 유지 관리를 쉽게할 수 있습니다