[TS] Union Type, Literal Type, Type Aliases

✅ Union Type

자바스크입트의 OR연산자(||)와 같은 의미의 타입

변수값이 숫자타입 혹은 문자열 등 여러타입을 가지는 경우 주로 사용

(BackEnd에서 매핑 데이터가 문자열 | 브라우저 입력값이 문자열인 경우, 변수 age는 string 타입 가능하게 해야함.)

 

`|`연산자를 이용하여 타입을 여러개 연결하는 방식을 Union 타입 정의방식이다.

함수내에서 수행하는 작업과 관련하여 보다 유연하게 활용하는 방법

코드에 하드코딩할 수 있는 정확한 값만 허용하는 것이 아닌 두개이상의 가능한 값을 가지려는 경우 사용

Union타입 대신 any타입을 대체가능하지만, 타입을 추론할 수 없는 경우에 사용되므로 타입스크립트의 강점이 없어진다

(any를 사용하는 경우 마치 JS로 작성하는것처럼 동작하고, Union타입을 사용하면 TS의 이점을 사용하여 코딩가능)

input1 = number | string //(둘 중 하나)

🔅 Enum(열거형)과 Union Type의 차이점

Enum	Union
타임, 런타임에 존재	컴파일 타임에만 존재
문자열 또는 숫자의 열거형	모든 타입의 열거형

TS는 컴파일러이므로 런타임 시점에 Union Type은 존재하지 않음

Enum은 JS객체의 별칭이므로 런타임에 오류없이 동작을 함

따라서 값을 반복하거나 값을 사용해야 하는 경우, Union보다 Enum이 더 나은 방법

✅ Literal Type

두개 이상의 값만 있다면 리터럴 타입의 사용을 고려할 수 있다

유니언타입을 리터럴타입과 결함하여 사용함 

리터럴타입은 스트링이나 숫자 등과 같은 핵심타입을 기반으로 함

예) result : 'as-number' | 'as-text'

=> result에 해당하는 문자열은 저 두값중 하나여야하며 다른 문자열 값은 허용되지 않음

 

✅ Type Aliases (타입 별칭)

type을 통해 타입의 새로운 이름을 만들어 직접 “생성”할 수 있다. (새로운 타입을 만드는것이 아닌, 그 타입을 나타내는 이름을 할당함)

인터페이스와 유사하지만, 원시갑,유니언,튜플 등 다른 타입의 이름을 지을 수 있다.

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === "string") {
        return n;
    }
    else {
        return n();
    }
}

유니온 타입을 저장하는 것만 가능한 것이 아니라 복잡할 수 있는 객체 타입에도 별칭을 붙일 수 있습니다.

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

(양식) type 사용자지정이름(Uppercase) = 타입들

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

//단순화한 후
type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있습니다.

 

 

 

🔅 Interfaces vs  Type Aliases

- 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다.

인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다.

따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다.

 

- interface는 어디서나 사용할 수 있는 새로운 이름을 만들지만, type Aliases는 새로운 이름을 만들지 못함

(예) 오류메세지는 별칭이름을 사용하지 않음,

type Alias = { num: number }
interface Interface {
    num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;

interfaced에 마우스를 올리면 Interface를 반환한다고 보여주지만, aliased는 객체 리터럴 타입을 반환한다고 보여줍니다.

TypeScript의 이전 버전에서, 타입 별칭은 extend 하거나 implement 할 수 없었습니다
(다른 타입을 extend/implement 할 수도 없습니다).
2.7 버전부터, 타입 별칭은 교차 타입을 생성함으로써 extend 할 수 있습니다.
예를 들어, type Cat = Animal & { purrs: true }

소프트웨어의 이상적인 특징은 확장에 개방되어 있기 때문에, 가능하면 항상 타입 별칭보다 인터페이스를 사용해야 합니다.

반면에, 만약 인터페이스로 어떤 형태를 표현할 수 없고 유니언이나 튜플 타입을 사용해야 한다면, 일반적으로 타입 별칭을 사용합니다.

 

👍🏻참고 자료

https://www.udemy.com/share/105tjT3@U9fugnFA3SlfTB_zQAhjQHAb3djkvpoDn2gtwL11pUVE_SNZ2sYDkgljzFyJly5-XA==/

https://typescript-kr.github.io/