TypeScript(3)-타입별칭(Type Aliases)

FAST FOX·2023년 6월 1일
0

학습일지

목록 보기
39/39
post-custom-banner

타입별칭

타입별칭이란??

타입 별칭(Type Aliases)이란 새로운 이름으로 기존의 타입을 참조하는 것을 의미합니다. 쉽게 말해 타입의 새로운 이름을 만드는 것인데 이때는 type 키워드를 사용하여 작성합니다.

type MyString = string;

//기존의 타입설정
let str1: string = "hello!";

// 타입 별칭을 사용하여 타입 설정
let str2: MyString = 'hello world!';

이렇게 명시된 타입 별칭은 인터페이스에서도 참조가 가능합니다.

type Person = {
  id: number;
  name: string;
  email: string;
}

interface Commentary {
  id : number;
  content : string;
  user : User; // Person의 타입을 참조하고 있다.
}

const comment1 : Commentary = {
  id : 1,
  content : "뭐예요??",
  user : {
  	id : 1,
  	name : "홍길동",
  	email : "honggilddong@naver.com"
  }
}

comment1의 경우에도 참조된 typeinterface에 명시되어있는 속성들 보다 더 많거나 적어서는 안됩니다.

코드 별칭의 장점

  1. 코드가 더 간결하고 가독성이 좋아진다.

  2. 복잡한 타입을 간략하게 표현할 수 있다.

  3. 타입 정의를 재사용할 수 있다.

인터페이스 VS 타입 별칭

인터페이스와 타입 별칭은 속성에 타입을 지정한다는 같은 특징이 있기 때문에 인터페이스의 역할을 타입 별칭이 수행할 수도 있지만 이 둘에는 미묘한 차이가 있습니다.

type Person = {
    name: string;
    age: number;
}

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

let kimcoding: Person = {
    name: '홍길동',
    age: 30,
}

let coding: User = {
    name: '홍길동',
    age: 30,
}

위와 같은 type과 interface가 있다고 가정해보겠습니다.

차이점 1.

우리가 타입스크립트에서 변수를 선언할 때 기존에 타입 별칭에서 지정한 프로퍼티에 대해서 기억이 안날 수도 있습니다. 이런 경우 변수에 마우스를 올려보면 타입 별칭을 참조한 변수는 정의된 프로퍼티들을 볼 수 있지만 인터페이스의 경우 보이지 않죠.
때문에 타입 별칭을 사용한다면 좀 더 편하게 코드들 작성할 수 있게 됩니다.

차이점 2.

두 번째 차이점은 확장 가능성의 여부입니다.
인터페이스의 경우에는 extends 키워드를 사용한 확장이 가능합니다.

// Person 타입 별칭을 참조하여 새로운 인터페이스 생성.
interface Students extends Person {
    className: string;  
}

// User 인터페이스를 참조하여 새로운 인터페이스 생성.
interface Students extends User {
	 className: string;   
}

하지만 타입별칭의 경우 타입에 새로운 이름을 부영하는 것에서 그치기 때문에 확장성이 없습니다.

결론

타입 별칭의 경우 다른 곳에 참조되지 않는다면 개발자가 좀 더 편하게 코드를 구현할 수 있도록 도와준다.

만약 새로운 인터페이스에 참조하여 확장해야 하는 경우가 있다면 인터페이스를 사용해서 타입을 지정하자.

profile
준비하는 개발자
post-custom-banner

0개의 댓글