[TS]타입스크립트 개념을 공부해보자

이묘·2023년 10월 3일
0
post-thumbnail

서론

본 게시글은 필자가 타입스크립트 공부를 하면서 끄적인 글입니다. 이미 타입스크립트를 많이 알고계신 분들이나 심화 응용등을 바라고 들어오신 분들은 뒤로가기 버튼을 누를 것을 추천드립니다.


타입스크립트란?

기존 자바스크립트(이하 js)에 자바, 파이썬등과 같이 타입을 정의할 수 있는 문법을 더한 것.

그래서 크기가 좀 큰 프로젝트(네이버, 배달의 민족, slack)등에서는 타입스크립트(이하 ts)를 주로 사용한다고 한다. 즉, ts란 js의 모든 기능을 포함하면서 다른 기능까지 포함되도록 타입을 부여하여 확장 된 오픈소스 프로그래밍 언어로 컴파일 언어이자, 정적 타입 언어이다.

조금 지루할 수도 있는 말을 조금 더 써넣자면, 마이크로소프트에서 구현한 js의 슈퍼셋(Superset)프로그래밍 언어이다. 확장자로는 .ts를 사용하며 컴파일 결과물로는 js코드를 출력하게 된다.
여기서 슈퍼셋이란, 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것을 의미한다.

사용 이유(장점)

사용이유들은 거의 다 타입체크를 함으로써 얻을 수 있는 장점이라고 봐도 무방한다.

대형 프로젝트에서 용이

js는 Dynamic Typing을 지원해준다. 쉽게 말하면 아래와 같은 코드가 에러가 나지 않고 계산이 된다는 것.

5 - '3'
//또는
'10' * 1

원래는 {숫자}-{숫자}만 가능하지만 js가 알아서 숫자로 바꿔준다.
나도 코딩테스트등에서 타입변환을 쉽게 하려고 아래 곱셈 연산을 많이 사용하였는데, 이것은 편리하지만 프로젝트 규모가 커질 수록이 자유도와 유연성이 단점이 될 수밖에 없다. 무조건 숫자가 들어와야하는 저 부분에 '안녕'등의 다른 문자열이 잘못들어왔다고 생각해보자. 프로젝트 규모가 커지면 어디가 문제인지 찾기는 쉽지 않아진다.

에러 메시지가 잘 나옴

js는 에러메시지가 추상적이고 추적이 어려운 경우가 많다. 이미 js를 많이 하고있던 나로서는 너무 공감가는 말이다. 자바나 파이썬등의 언어들은 에러가 자세하기 때문에 영어를 어느정도 할 줄 안다면 따로 검색하지 않고도 에러를 보고 코드를 고칠 수 있었는데 js는 쉽지않았다.(지금도 그렇다,,,)
문자가 들어와야하는 부분에 숫자가 들어왔다면 String을 사용해야한다는 에러를 내거나, 함수이름 오타 교정도 해준다.

객체지향 프로그래밍

타입스크립트에서는 객체지향 프로그래밍에서 사용했던 class, interface등과 같은 문법들을 사용할 수 있다. 그리고 이것들을 완벽하게 js로 변환이 가능하다. 즉 객체지향 프로그래밍의 장점들을 모두 ts가 가지고 있다고 봐도 무방하다는 것이다.

단점

기본적인 단점들은 타입을 선언하는 다른 언어들과의 단점과 사실 유사하다.

진입장벽이 낮아짐

사실 다른 언어들(자바, 파이썬, C, ...)을 사용하던 사람들은 "엥? 뭐라는거야"라고 할 수도 있겠지만, js만 사용하더나 주로 사용하던 사람들은 타입을 선언하는 것에 대한 진입장벽이 높아질 수밖에 없다.

떨어지는 가독성

type을 지정해야하기 때문의 코드의 길이가 길어진다. 또한 간편하고 빠르게 코딩을 할 수 있다는 js와는 사실 본질적으로 멀어졌다고 할 수도 있다. 선언되는 type으로 인해서 가독성이 떨어지는 것 또한 사실이다.

모든 js오류를 해결할 순 없다

많은 js의 에러들이 잘못된 타입 지정 또는 오타인데, ts는 이러한 에러들을 기본적으로 잡아줄 수 있다는 점에서 위에서 장점으로 소개했다. 하지만 type 지정으로는 해결되지 않는 js의 본질적인 오류가 발생할 수 있다. 그래서 js를 보완하는 완벽한 언어라고는 말할 수 없다.


결론

오늘은 타입스크립트를 직접 코딩해보기 전에 왜 이렇게 핫한지, 왜 많이들 사용하는지가 궁금해서 기본적인 개요와 장단점들에 대해서 알아봤다.
다음 포스트부터는 ts에 대해 공부해보고 정리하는 포스트들을 올릴 예정이다.

참고

나무위키(https://namu.wiki/w/TypeScript)
코딩애플(https://youtu.be/xkpcNolC270?si=tsqjBybh4NHX8cF9)
블로그(https://well-made-codestory.tistory.com/42, )

profile
본질을 공부해야 응용도 하지 않을까

0개의 댓글