이번 포스팅에서는 리터럴, 유니온, 교차 타입에 대해서 알아보려고 합니다!
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. 리터럴 타입
const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용합니다.
겉보기에는 자바스크립트와 차이가 없어보이죠?
마우스를 올려서 타입을 확인해보면 더 정확하게 알 수 있습니다.
userName1은 const이기 때문에 변하지 않습니다. 그렇기 때문에 userName1의 타입은 우리가 넣어준 "Bob"이 그대로 들어가게 되죠.
userName2는 let이기 때문에 변할 수 있습니다. 그래서 userName2의 타입은 "Tom"의 타입인 string이 됩니다.
만약 let으로 선언한 userName2에 다른 요소를 넣고 싶다면 그 요소의 타입을 명시해주어야 합니다.
그리고 userName1 처럼 변하지 않는 값을 가진 변수의 타입을 문자열 리터럴 타입이라고 부릅니다.
앞에서 배운 것들 중에서 enum 키워드가 있는데, 문자열 리터럴 타입과 type 키워드를 이용하면 이와 비슷한 형태를 구현할 수 있습니다.
Job이라는 type형태의 변수를 만들고 그 안에 문자열 리터럴들을 넣어줍니다.
이렇게 만든 타입을 사용하면 이 타입의 변수는 반드시 해당 문자열 리터럴에 들어있는 값만 사용할 수 있게 됩니다.
아래 예시에서 user.job에는 "police", "developer", "teacher"만 들어갈 수 있는 것이죠!
당연히 숫자형 리터럴 타입도 사용할 수 있습니다. (상수는 변하지 않으니까!!!)
문자열 리터럴 타입과 같은 방식으로 만들면 됩니다.
1. 유니온 타입
리터럴 타입의 예시에서 | 기호가 많이 나왔죠?
이 세로줄은 유니온 타입이라고 부릅니다.
말 그대로 OR, 혹은 합집합이라고 보시면 됩니다.
위 사진은 실제로 유니온 타입을 사용한 예시입니다.
getGift라는 함수는 gift라는 매개변수를 하나 받습니다.
그리고 gift는 Car 타입이거나 Mobile 타입이 됩니다.
이렇게 확정적이지 않은 상태에서는 둘 중 하나의 타입에만 사용할 수 있는 변수 혹은 메소드는 그대로 사용할 수 없습니다. Car 타입에서만 사용이 가능한 start 메서드를 사용하려고 하면 아래처럼 에러가 발생하게 되죠!
(당연히 두 타입 모두에서 사용 가능한 변수 혹은 메서드는 사용이 가능합니다!!)
이걸 방지하기 위해서 예시에서는 if와 else문을 이용해서 두 타입을 구분해줬습니다.
구분을 하고 나니 에러가 사라진 모습이죠?!
2. 교차 타입
여러 개의 타입을 하나로 합쳐서 사용하는 타입을 교차 타입이라고 부릅니다.
AND, 교집합이라고 부를 수 있고, & 기호를 사용합니다.
위 예시에서는 Toy와 Car 타입을 모두 가진 toyCar라는 객체를 하나 생성했습니다.
정상적으로 toyCar 객체를 생성하기 위해서는 Car에 있는 모든 변수 / 메서드와 Toy에 있는 모든 변수를 생성하는 객체에 담아주어야 합니다.
만약 하나라도 빠지게 된다면 바로 오류가 발생하게 되는 것이죠.
대신 이렇게 만들게 되면 필요한 모든 기능을 가진 객체를 생성할 수 있겠죠?!
최근댓글