스터디 과제를 진행하는 중 TS를 선택적으로 사용해도 된다는 말을 듣고 TS를 바로 적용하려다가 이건 아니다 싶어서.. 공부를 진행하고 차근차근 JS를 걷어내고 TS를 사용하기로 마음먹고 유튜브에서 TS강의를 찾아보게 되었습니다.
적당한 길이의 영상이 있나 싶어서 찾아보다가 코딩앙마님의 강좌영상을 보고 이걸 따라가기로 마음먹고 그자리에서 모두 수강했습니다!
이번 카테고리에서는 TS강좌에 대한 간략한 요약 설명을 담아보려고 합니다!
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. 너무 관대한 JS
JS는 다른 언어들에 비해 상대적으로 굉장히 너그럽습니다.
따로 타입을 지정해 주지 않아도 알아서 인식하기도 하고, 호이스팅 등의 기능을 통해 선언과 초기화의 위치가 바뀌어도 문제 없이 동작하기도 합니다.
하지만 이런 관대함은 디버깅을 어렵게 한다는 단점이 존재합니다. (이게 왜 돌아가지?)
위 예제 코드를 보면 우리가 원하는 동작은 세 번째에 위치한 add(1,2)인데, 나머지 요소들도 문제 없이 돌아가는 것을 확인할 수 있습니다.
자바스크립트는 요소가 들어가있지 않으면 오류를 뿜는 것이 아니라 undefined로 처리를 합니다. 또한 추가로 들어간 데이터는 무시하기도 합니다.
또 다른 예시를 보겠습니다.
매개변수로 배열이 들어간 경우 정상적으로 작동하지만, (1,2,3) 처럼 number 형태가 들어간 경우 forEach를 사용할 수 없기 때문에 TypeError가 뜨게 됩니다.
그런데 오류가 언제 떴는지를 보면, 동작할 때 떴습니다.
개발자는 빨간 밑줄이 없고 정상적으로 서버가 작동하기 때문에 괜찮겠지 생각하지만 알고보니 오류가 발생한 것이죠.
JavaScript는 런타임에 타입이 결정되는 동적 언어입니다.
그렇기 때문에 개발자가 한번 실수하면 사용자는 고스란히 그 실수들을 볼 수 있습니다.
반면 Java, TypeScript는 컴파일타임에 타입이 결정되는 정적 언어입니다.
컴파일 오류를 뚫기 위해 상대적으로 오랜 시간이 걸리지만, 한번 뚫는다면 동적 언어에 비해 안정적으로 동작할 수 있다는 장점이 있습니다.
TS는 동적 언어의 특징을 가지는 JS의 단점을 줄이기 위해 등장하게 된 것이죠!
1. 까다로운 TS
이제 실제 TS 코드를 살펴보도록 하겠습니다.
TS는 JS기반으로 만들어진 언어이기 때문에 JS를 알고 있다면 이해하는 것이 크게 어렵지 않습니다.
TS 환경에서 아까 작성했던 예시를 그대로 작성했더니 각종 빨간 줄이 뜹니다.
num1에 마우스를 가져다 대면 num1이 any라는 속성을 가진다고 되어있네요.
TypeScript는 Type을 선언하는 것이 Default입니다. 따라서 이렇게 Type을 지정하지 않고 사용한 경우 빨간 줄을 그어서 개발자가 확인할 수 있도록 한 것이죠. (작성하지 않으면 any로 잡히기 때문에 어떻게든 동작하긴 합니다!)
위의 any 관련 밑줄은 그래도 동작은 가능하지만, 아래 밑줄은 조금 다릅니다.
add에 들어가는 매개변수의 개수가 2개로 한정되었기 때문에 2개가 아닌 경우는 모두 빨간 밑줄을 통해 오류를 내뿜게 됩니다.
우리는 TS를 사용한다고 했죠? TS의 닉값(?)을 하기 위해서 매개변수에 Type을 지정해주겠습니다.
매개변수의 오른쪽에 :(colon)을 붙이고 Type을 작성해주면 됩니다.
이렇게 Type을 작성했더니 맨 아래 있는 add()에도 빨간 밑줄이 생겼죠?
매개변수로 number가 아닌 string이 들어갔기 때문에 오류가 발생하게 됩니다.
다음 예시를 보겠습니다.
forEach를 사용하기 위해서는 배열이 들어가야 합니다.
우리는 배열 중에서도 숫자가 들어간 배열을 받아서 하나씩 찍어내고 싶습니다.
이걸 구현하기 위해서는 arr의 오른쪽에 똑같이 타입을 작성하면 됩니다.
number의 배열형태이기 때문에 number[]를 붙여주면 되는 것이죠.
만약 배열은 배열인데 string 배열이 들어오는 경우 빨간 밑줄을 통해 개발자에게 오류가 발생했다는 사실을 알려주게 됩니다.
반대로 string[]을 arr의 Type으로 넣으면 매개변수로 number의 배열 형태가 들어오는 경우 빨간 밑줄을 통해 오류가 발생했다는 사실을 알려주게 되겠죠.
이렇게 Type을 세밀하게 정해줌으로써 개발자가 보다 쉽게 관리, 디버깅 및 유지보수를 할 수 있게 도와준다는 것이 TS의 가장 큰 장점입니다.
최근댓글