관리 메뉴

클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

타입 심화 3 - Union Type, Intersection Type 3 : 실습 문제 풀기 본문

웹 · 앱 개발/타입스크립트

타입 심화 3 - Union Type, Intersection Type 3 : 실습 문제 풀기

huenuri 2024. 12. 27. 12:37

다음으로는 실습 문제를 두 문제 풀어보겠다. 이 문제에 대한 해설 영상도 상당히 길다. 심화 과정이라 그런지 기초에 비해 훨씬 더 어렵다. 그래도 잘 따라가 볼 것이다.


 

 

 

 

 

실습 1 - Intersection Type

 

 


 

 

문제 풀기

먼저 메서드를 선언하는 구현부를 작성한다. 그런 다음 이 둘의 메서드를 intersection한다. 교차 타입이 되면 타입을 사용한 구현이 가능하다.

 

 

26번째 줄에 선생님은 콤마를 찍었지만 이건 생략을 해도 된다.

 

 

 


 

 

심화 내용 학습

문제는 다 풀었지만 타입스크립트에서 겹치는 타입이 있을 때 주의할 점에 대해서 알아본다.

 

 

1. 타입이 같을 때

공통된 프로퍼티가 있을 때 interesection을 하면 같은 타입이라면 오류가 나지 않는다.

 

이렇게 같은 타입을 쓰고 콘솔 로그로 찍어보았다.

 

 

 

 

output이라는 문장이 잘 찍히는 것을 볼 수 있다.


 

 

 

2. 타입이 다를 경우

 

타입 하나를 number로 바꾸었다.

 

 

 

 

오류가 나는 것을 볼 수 있다. ouput은 지금 string이면서 number 타입이니 이런 타입이 없어서 오류가 나는 것이다.


 

 

 

 

 

실습 2 - Union Type

 

 


 

 

 

1. 문제 풀기

먼저 메서드를 선언한다. 그리고 union type에 해당하는 내용도 선언한다. 반환 타입도 elice에 들어가므로 그대로 써준다.

 

 

이제 elice 객체에 접근하여 메서드를 호출한다.


 

 

 

2. 코드 실행하기

 

 

하지만 이런 오류가 뜨는데 타입스크립트는 elice가 human인지 Dog인지 알 수 없기 때문이다. elice가 human 타입일 때는 bark 메서드에서 오류가 날 수 있으므로 미리 오류를 내서 알려준다.

human 타입이라면 think 메시지만 갖게 될 것이다. elice를 human 타입이라고 지정해주면 이제 오류가 나지 않을 것이다. think는 오류가 나지 않지만, bark 메서드를 사용하면 오류가 날 것이다. 왜냐하면 bark 메서는 elice에 없기 때문이다.

 

 

하지만 강사는 대체 뭘 수정한 건지 모르겠다. 똑같이 작성했는데 계속 오류가 뜬다. 아무튼 헬퍼에게 물어봐서 코드를 수정했다.


 

 

 

 

3. 코드 다시 수정하기

그냥 오류를 확인하는 것이 이 문제였다. 난 오류를 수정하려고 무척이나 애를 썼는데 그럴 필요가 없었다.

 

 

 


 

 

 

 

학습을 마치고

무슨 문제가 이처럼 어렵던지 너무 힘들어서 스트레스를 많이 받았다. 정말 모든 걸 때려치고 싶은 마음이었지만 그래도 끝까지 마무리할 수 있어서 다행이었다. 이번에도 안 되면 정말 포기하려고 했었다.

공부하는 것이 정말 어렵고 힘들다. 이 힘든 공부를 왜 하나 그런 생각이 들 때도 있다. 하지만 단계를 뛰어넘으려면 힘든 과정을 견디어야 한다.