[패캠] 타입스크립트 문법 - 타입 별칭 (Alias) (11/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

11. 타입 별칭(Alias)

---

별칭(alias) : 달리 부르는 이름. 별명

 

타입 별칭은 type 키워드를 사용하여 내가 지정하고 싶은 타입에 이름(별명, 별칭)을 부여하고 재사용하는 용도로 사용한다. 기본적으로 단일 타입보다는 또는(|) 기호를 사용하는 Union 타입이나 그리고(&) 기호를 사용하는 Intersection 타입에 별칭, 또 다른 말로 별명을 부여한다.

type TypeA = string
type TypeB = string | number | boolean
type MyUser = {
    name: string
    age: number
    isValid: boolean
} | [string, number, boolean]

const myUserA: MyUser = {
    name: 'Neo',
    age: 85,
    isValid: true
}
const myUserB: MyUser = ['Evan', 36, false]

function someFunc(param: TypeB): TypeA {
    switch (typeof param) {
        case 'string':
            return param.toUpperCase()
        case 'number':
            return param.toFixed(2) // 소수점 2자리까지 남겨놓은 문제 데이터 반환
        default:
            return 'true'
    } 
}

 

정리하면, 타입 별칭이라는 개념을 통해서 내가 지정하고 싶은 타입에 이름을 부여할 수 있고, 그 이름을 통해서 재사용이 가능하다. 이름이 지정된 타입은 단일 타입일 수도 있고, Union 타입이나 Intersection 타입도 가능하다. 타입 별칭을 만들 때는 type 키워드가 앞쪽에 사용된다.

Type Vs Interface

타입 별칭은 인터페이스를 대신해서 작성할 수도 있다. 처음 타입스크립트를 학습하는 사람들이 대표적으로 객체 데이터의 타입을 지정할 때 타입 별칭을 사용할지 혹은 인터페이스를 사용할지 헷갈려 한다.

먼저 배운 인터페이스의 작성 방식은 interface 키워드를 쓰고, 인터페이스의 이름, 중괄호를 사용하여 데이터의 타입, 이렇게 세 가지를 적어주면 된다. 타입 별칭은 type 키워드를 쓰고, 지정하고 싶은 이름, 할당 연산자(=)를 붙인 다음 데이터 타입, 이렇게 네 가지를 적어준다.

타입 별칭은 인터페이스와 다르게 할당 연산자가 꼭 있어야 된다는 점에 주의한다. 키워드와 할당 연산자의 필요하다는 점 외 작성 방식은 같다. 또한 기능적으로 아무런 차이가 없다. 아래 코드에서 TypeUser 대신 InterfaceUser를 사용해도 Error가 발생하지 않는다.

type TypeUser = {
    name: string
    age: number
    isValid: boolean
}
interface InterfaceUser {
    name: string
    age: NamedCurve
    isValid: boolean
}

const heropy: TypeUser  = { // InterfaceUser로 해도 정상동작함
    name: 'Heropy',
    age: 85,
    isValid: true
}

 

결과적으로, 두 개의 객체 데이터 타입 중에 어떤 방식을 쓰는 것이 좋을까?

기능적인 차이는 없고 취향에 맞게 쓸 수 있는데, 굳이 권장을 하자면 인터페이스 방식을 더 권장한다. 별다른 이유가 있는 건 아니지만 타입 별칭은 객체 데이터의 타입을 만드는 구조라기 보다는 다양한 타입의 별칭을 지정하는 용도라서 조금 더 사용 범위가 넓다. 인터페이스 같은 경우에는 함수라든가 배열 데이터의 타입도 지정할 수 있지만 기본적으로 객체 데이터를 전제하기 때문에 굳이 사용한다고 하면 인터페이스가 조금 더 낫지 않을까 정도로 정리해볼 수 있다.

타입 별칭이든 인터페이스든 어떤 방식을 사용해도 문제가 없으니 그저 상황이나 취향에 맞게 적절히 사용하면 된다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY