본문 바로가기

TypeScript

타입 별칭(Alias)

별칭 : 달리 부르는 이름

타입 별칭이란 타입에 별도의 이름을 붙여 주는 것입니다. 타입 별칭에 대해 아래 간단한 예시 코드와 함께 살펴보도록 하겠습니다.

예시 1

type TypeA = string;

type TypeB = string | number | boolean;


type 키워드로 시작하여 각각의 타입 이름이 지정되어 있으며, 각각의 데이터이 명시되어 있습니다.

type TypeA = string;


간단하게 TypeA를 살펴보면 type 키워드를 사용하여 타입의 이름을 지정하였고, 데이터 타입을 할당하고 있습니다.

지정한 타입의 별칭을 이용하여 할당한 데이터를 사용할 수 있습니다. 즉, string 타입에 TypeA라는 별칭을 추가했기 때문에 별칭 TypeA를 사용하는 것이 string 타입을 사용하는 것과 동일하게 됩니다.

type TypeB = string | number | boolean;


TypeA의 경우 타입을 하나만 할당했기 때문에 별로 유용해 보이지 않지만, TypeB의 경우 union 타입을 할당하는 경우 TypeB를 통해 재사용이 가능하기 때문에 매번 작성할 필요가 없어지게 됩니다.

*위의 예시처럼 타입 별칭은 단일 타입에는 잘 사용이 되지 않지만, union 타입이나 intersection 타입에 별칭을 부여하여 재사용을 합니다.

type User ={
      name: string;
      age: number;
      isValid: boolean;
    } | [string, number, boolean];

const userA: User = {
  name: "rati",
  age: 5,
  isValid: true,
};

const userB: User = ["merry", 3, true];

타입 별칭 User에는 위와 같이 객체의 속성에 대한 타입 정의 또는 tuple 타입이 될 수 있다고 union 타입을 할당해주고 있습니다.

변수 userA는 타입 별칭 User를 사용한 타입을 명시하고 있으며, 타입 별칭 User의 union 타입과 일치하기 때문에 정상적으로 동작하게 됩니다. 변수 userB 또한 타입 별칭 User의 union 타입의 tuple 타입과 일치함으로 정상적으로 동작하게 됩니다.

type TypeA = string;
type TypeB = string | number | boolean;

function someFunc(param: TypeB): TypeA {
  switch (typeof param) {
    case "string":
      return param.toUpperCase();
    case "number":
      return param.toFixed(2);
    default:
      return true; // 타입 에러 발생
  }
}


함수 someFunc는 매개 변수 param에 대한 타입 명시를 타입 별칭 TypeB를 사용하여 타입을 명시해주고 있으며, 반환하는 값의 타입을 타입 별칭 TypeA를 사용하여 타입을 명시해주고 있습니다.

그리고 함수 someFunc는 매개 변수 param에는 타입이 number, string, boolean인 인수가 들어올 수 있기 때문에 각 타입에 대한 switch 문이 작성되어 있습니다.

매개 변수에 전달되는 인수의 타입이 string이나 number일 경우 해당 case 문에서 사용하는 메서드가 반환하는 값이 string이기 때문에 정상 작동하지만, 작성된 case에 일치하지 않으면 default로 boolean 데이터를 반환하기 때문에 타입 에러가 발생하게 됩니다.

예시 2


*타입 별칭은 인터페이스를 대신해서 사용할 수 있습니다.

type TypeUser = {
  name: string;
  age: number;
  isValid: boolean;
};

interface InrterfaceUser {
  name: string;
  age: number;
  isValid: boolean;
}

const rati: TypeUser = {
  name: "rati",
  age: 5,
  isValid: true,
};

const merry: InrterfaceUser = {
  name: "merry",
  age: 3,
  isValid: true,
};

타입 별칭 TypeuUser에는 객체 속성에 대한 타입이 명시되어 있으며, 인터페이스 InterfaceUser 또한 동일한 내용으로 타입이 명시되어 있습니다. 각각의 타입 별칭과 인터페이스를 변수에 사용하여 타입을 명시해주고 있습니다.

즉, 타입 별칭과 인터페이스 중 어떠한 방식을 선택해서 사용하여 타입을 명시하든 상관없이 정상적으로 동작됩니다.

타입 별칭과 인터페이스 둘 중..


*많은 경우 객체의 타입을 명시할 때 타입 별칭과 인터페이스 중 어떤 방식을 사용할지 고민을 하게 되는데 아래의 내용을 참고하면 좋을 것 같습니다.

타입스크립트 그룹에서 객체의 타입을 명시할 때 타입 별칭과 인터페이스는 동일한 기능을 하여 둘 중 어떤 것을 사용해도 상관없지만, 굳이 권장을 하자면 인터페이스 방식을 권장한다고 말했습니다.

이는 타입 별칭은 객체 데이터의 타입을 만드는 구조라기보다는 다양한 타입의 별칭을 지정하는 용도라서 인터페이스에 비해 사용 법위가 넓은데, 인터페이스의 경우 물론 함수, 배열의 타입도 지정할 수 있지만 기본적으로 객체 데이터를 전제로 사용하기 때문에 굳이 사용한다면 인터페이스가 낫지 않을까 정도로 정리할 수 있습니다.

'TypeScript' 카테고리의 다른 글

클래스  (0) 2023.01.02
함수  (0) 2023.01.02
인터페이스 (Interface)  (2) 2023.01.02
타입 가드(Guard)  (0) 2023.01.02
타입 단언과 할당 단언  (0) 2023.01.02