[TypeScript] Unions and Arrays

안녕하세요 동기 여러분! 오늘은 유니온 타입의 네 번째 시간으로 유니온과 배열의 조합은 어떤지 알아봅시다!

 

Unions and Arrays

유니온은 배열과 함께 조합되어 사용될 때 그의 진가를 볼 수 있습니다. 

 

아래의 코드를 살펴봅시다.

const dateNumber = Date.now();

const dateString = Date().toString();

• 변수 dateNumber를 Date.now() 메서드로 선언하는데 Date.now()는 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환한 값입니다.
• 변수 dateString을 Date() 생성자와 .toString() 메서드로 선언하는데 Date()는 생성 순간의 날짜와 시간을 나타내는 Date객체를 생성하고 .toString() 메서드는 객체를 문자열로 바꾸어 줍니다.

 

위 두 코드를 하나의 배열에 넣어보도록 합시다.

 

const timeList = [dateNumber, dateString];

• dateNumber는 정수로 반환한 값이기 때문에 타입이 number이어야 하고
• dateString은 객체가 문자열로 바뀌었으니 타입이 string입니다. 
• 이런 경우 아래와 같이 튜플로 선언 할 수도 있지만

 

const timeList:[number, string] = [dateNumber, dateString]; // 튜플

• 튜플로 타입이 선언되면 배열과 인덱스 번호가 맞지 않거나 요소가 더 많거나(적거나) 타입 선언이 더 많거나(적거나)하는 경우 에러가 발생합니다.
• 하지만 아래와 같이 유니온 타입을 배열에 선언해주면 그러한 에러를 피해 갈 수 있습니다.

 

const timeList: (number | string)[] = [dateNumber, dateString];

• (number | string)[]으로 유니온 타입으로 배열이 선언되었기 때문에 string이나 number로 요소 추가도 가능하고 삭제도 가능합니다. 
• 유니온 타입을 배열에 선언할 때의  주의할 점은 number와 string을 반드시 ( ) (parentheses)에 넣어주어야 합니다. 왜냐하면 number | string[]로 타입을 선언할 경우 string에만 배열이 적용되기 때문에 배열 안에 숫자가 들어가면 에러가 발생합니다. (아래의 스샷이 증거)

증거

• 마지막으로 당연한 소리지만 timeList에 string이나 number가 아닌 다른 타입의 요소를 넣으면 에러가 생깁니다. (아래의 스샷이 증거)

타입이 불린인 독립 변수는 타입이 문자 또는 숫자인 매개 변수에 선언할 수 없다.라고 에러가 뜹니다.

 

• 문자나 숫자 타입은 추가가 가능합니다. (아래 스샷)

당연한 소리지만 '냉면이 먹고싶다.'라는 문자 타입은 추가 시 에러가 없습니다.

 

---

 

오늘의 느낌

왜 냉면이 먹고싶다고 적은 걸까.... 

 

아 냉면 하니까 생각하는데 저는 냉면 보다는 맛있는 냉면 육수에 찬 소면을 넣어서 먹는 게 훨씬 맛있더라구요! 냉면의 면의 질겨서 안 끊기니까 속이 더부룩한 느낌