[TypeScript] 타입 별칭

타입 별칭

• type이라는 키워드를 사용해서, 나만의 타입을 지정.
• 타입을 반복해서, 재사용하고 싶을 때도 주로 사용. → 유지보수성 증가
• 가독성 문제를 해결할 수 있는 방안으로 제시!

readonly 키워드

• 최초에 초기화하고, 읽기만 가능 → 수정은 불가!

타입 별칭에 문자열을 준다면?

• 다음과 같이, 자동완성 기능을 켰을 때, 둘 중 하나만 선택 가능하게 됨.

  

    type Status = "error" | "success" ;
    const status: Status = // "error" 또는 "success"만 올 수 있음
  

타입 별칭 - 함수

• 함수도 다음과 같이 타입 별칭을 지정할 수 있음

• 화살표 함수 예시

    type SumFunc = (n1: number, n2: number) => number;
    const sum: SumFunc = function sum(n1, n2) {
      return n1 + n2;
    };
  

타입 별칭 - 튜플

• 튜플도 다음과 같이 타입 별칭을 지정할 수 있음

• 튜플 예시

    type Point = [number, number];
    const point: Point = [10, 15];
  

타입 별칭 - 인터섹션

• &(앰퍼샌드) 기호를 통해, 다음과 같이 타입을 연결하여 지정할 수 있다

• 이미 만들어진 타입끼리 연결과 각각의 구문의 연결 가능

    type Nameable = {
      name: string;
    };
      
    type Ageable = {
      age: number;
    };
      
    type Person = Nameable & Ageable;
      
    type PersonOther = {
      name: string;
    } & {
      age: number;
    };
  

타입 별칭 - 키 선택

• keyof이라는 키워드를 사용하면, 해당 속성의 키 값들이 반환

• 다음과 같이 특정 키 값을 가져올 수 있음

    type Person = {
      name: string;
      age: number;
      gender: string;
    };
      
    type PersonOfKeys = keyof Person;
    const key: PersonOfKeys = "gender";
  

타입 별칭 - 객체 선택

• typeof이라는 키워드를 사용하여, 특정 객체의 타입을 추출 가능

• 다음과 같이 특정 객체의 타입을 가져와서 사용 가능

    const user = {
      name: "jaegeon",
      age: 20,
    };
      
    type User = typeof user;
    const user2: User = {
      name: "a",
      age: 30,
    };
  

재귀 타입 별칭

• 타입 별칭으로 지정된 타입을 재귀 호출 할 수 있음

• 다음처럼 옵셔널 파라미터 ?와 함께, 재귀 호출 로직을 구현 가능

    type Category1 = {
      name: string;
      subCategory: { name: string; subCategory?: { name: string }[] }[];
    };
      
    // 재귀 타입 별칭
    type Category2 = {
      name: string;
      subCategory?: Category2[];
    };
      
    const category: Category1 = {
      name: "Electronics",
      subCategory: [
        {
          name: "Phones",
        },
        {
          name: "Laptops",
          subCategory: [
            {
              name: "Phones",
            },
          ],
        },
      ],
    };
  

→ 주의사항: 재귀 호출이 반복되어 호출된다는 개념이 아니므로, 혼재 주의!

• 재귀 호출 예시 코드 2

    type Tree = {
        value: string;
        children: {
          value: string;
          children: {
            value: string;
          }[];
        }[];
      };
      type Tree2 = {
        value: string;
        children?: Tree2[];
      };
      const tree: Tree = {
        value: "root",
        children: [
          {
            value: "child1",
            children: [
              {
                value: "child2",
              },
            ],
          },
        ],
      };