⭐️ Union Type
유니온 타입은 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 타입이다.
사용 방법
| 연산자를 이용하여 타입을 여러개 정의할 수 있다. 이를 유니온 타입 정의 방식이라고 한다.
// value에는 string 또는 number 타입이 올수 있다.
const logMessage = (value : string | number) => {...}Union Type 장점
Union타입을 대신하여 any타입을 사용하면 안될까?
any타입은 아무런 타입을 받는다는 것으로 타입을 정하기 난감한 변수또는 객체에 사용된다. 그리고 JS코드를 TS코드로 변환할 때 타입을 미리 정하기 애매할 때 사용한다.
또한 any타입의 경우 IntelliSense의 기능을 사용하지 못한다.
👍 반면 Union타입으로 타입을 정의하고 타입 가드를 통해 타입을 검증하면 IntelliSense의 기능을 사용할 수 있다.
const logMessage = (value: string | number) => {
// if문에서 typeof를 통해 타입을 판별 (Type Guard)
if (typeof value === "number"){
value.toFixed();
}
if (typeof value === "string"){
value.toLowerCase();
}
// sting, number가 아닌 타입에 대한 Error문 출력
throw new TypeError('value must be string or number')
}
💡 Type Guard에 대한 자세한 설명은 TypeScript - Type Guard, Type Compatibility
Union Type 특징
✅ 보장된 속성만 제공한다.
아래 코드의 경우 Developer와 Person의 모든 속성을 사용할 수 있다고 예상할 수 있다.
하지만, TS관점에서 어느 interface의 속성이 올지 모르기 때문에 Type Guard와 같은 타입 검증이 있지 않는 이상 age, skill과 같은 속성은 제공되지 않고 에러를 발생시킨다.
그리고 공통된 속성 즉, 보장된 속성인 name만 제공하는 것을 확인할 수 있다.
✅ OR 속성을 그대로 따른다.
askSomeone의 인자로 Person인터페이스 또는 Developer인터페이스의 속성이 들어오면 된다.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
const askSomeone = (someone: Developer | Person) => {
....
}
askSomeone({name:'디밸러포', skill: '웹 개발', age: 20}) // Developer 속성
askSomeone({name:'디밸러포', age: 20}) // Person 속성⭐️ Intersection Type
인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 의미한다.
Intersection Type 특징
✅ 해당 속성을 모두 제공한다.
보장된 타입의 속성만 제공하는 union type과 달리 모든 타입의 속성을 제공한다.
✅ AND 속성을 그대로 따른다
앞서 말했듯이 유니온타입은 두개의 인터페이스에 대한 타입 둘 중 하나만 만족하면 되지만,
교차 타입의 경우 두개의 인터페이스에 대한 타입 모두를 만족시켜야 한다.
따라서 Developer와 Person에 대한 타입을 모두 만족시키지 않으면 다음과 같이 에러가 발생한다.
const askSomeone = (someone: Developer & Person) => {
...
}
// Error 발생 (Developer에 대한 타입 속성만 나타냈으므로.)
askSomeone({name:'디밸러포', skill:'웹개발'})
// 정상 작동(name,age,skill 모두 만족하였으므로.)
askSomeone({name:'디밸러포', age:20, skill:'웹개발'}) 
💡 실무에서 서비스 개발을 할때는 intersection type보다는 union type이 상대적으로 많이 사용된다.
⭐️ Enum
이넘은 특정 값들의 집합을 의미하는 자료형이다. 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 지원한다.
숫자형 Enum
✅ 아무런 선언이 없는 Nike는 0으로 출력되고, 그 뒤로 차례대로 1씩 증가
enum Shoes {
Nike,
Addias,
Levis
}
var myShoes = Shoes.Nike; //0
var myShoes1 = Shoes.Addias; // 1
var myShoes2 = Shoes.Levis; // 2
✅ 초기값을 2로 선언하면, 그 뒤로 차례대로 1씩 증가
enum Shoes {
Nike = 2,
Addias,
Levis
}
var myShoes = Shoes.Nike; //2
var myShoes1 = Shoes.Addias; // 3
var myShoes2 = Shoes.Levis; // 4
문자형 Enum
✅ 문자형 이넘은 이넘값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화시켜야 한다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}✅ 선언에 맞는 해당 문자가 출력
enum Shoes {
Nike = '나이키',
Addias = '아디다스',
}
var myShoes1 = Shoes.Nike; // 나이키
var myShoes2 = Shoes.Addias;// 아디다스복합 Enum
✅ 기술적으로 이넘에 문자와 숫자를 혼합하여 생성가능하지만 권고하지 않는 방식
enum BooleanLikeHeterogeneousEnum {
No = 0,
Yes = "YES",
}사용 사례
질문에 대한 답에 따라서 결과를 출력하는 로직이 있다. 다음과 같은 코드에서는 한 가지 문제가 있다. answer가 string타입으로 정의되었기 때문에 'yes','no'를 제외한 틀린 문자를 입력할 수 있고, 그에 따른 사전 방지를 할 수 없다.
✅ 따라서, Enum을 통해 yes와 no에 대한 명확한 문자를 선언하여 해당 문자가 입력되지 않을 경우 Error를 통해 방지할 수 있다.
Enum 특징
✅ 런타임 시점에서의 이넘 특징
- 이넘은 런타임시에 실제 객체 형태로 존재한다. 예를 들어 아래와 같은 이넘 코드가 있을 때.
✅ 컴파일 시점에서의 이넘 특징
- 이넘이 런타임 시점에서는 실제 객체지만 keyof를 사용할 때 주의해야한다. 일반적으로 keyof를 사용해야 되는 상황에서는 대신 keyof typeof를 사용하자.
✅ 리버스 매핑(Reverse Mapping)
- 리버스 매핑은 숫자형 이넘에만 존재하는 특징. 에넘의 키(key)로 값(value)를 얻을 수 있고 값(value)로 키(key)를 얻을 수도 있다. (리버스매핑은 문자형 이넘에는 존재 X)
참고 : 캡틴판교 타입스크립트
