image source
Why not JavaScript?
왜 타입스크립트를 사용해야 할까? 바로 타입안정성 때문이다.
타입안정성 덕분에 런타임 에러가 줄어들고, 생산성도 증가되고, 코드에 버그가 줄어드는 효과를 누릴 수 있다.
먼저, 자바스크립트는 너무너무 유연한 언어다.
이상한 코드를 작성해도 에러가 나기는 커녕 어떻게든 코드가 돌아가준다. (좋은건가? 그럴리가ㅋ)
[1, 2, 3, 4] + false
> "1,2,3,4false"위와 같은 자바스크립트 코드를 작성하면 마법같은 결과물을 내어준다.
1. 배열(list)가 사라졌다.
2. boolean인 false는 string으로 변했다.
아, 물론 정말로 배열안의 값과 false를 문자열로 합치고 싶을 수 있지만, 저런 방법을 통해서는 안된다라고 생각한다는 거지. (적어도 에러는 발생해줘야지..? python 마렵다🐍)
적어도 내 생각에 저런 코드를 작성하면 에러가 발생해서 노티를 줘야한다고 생각한다는거지?
1. 왜 list에 boolean을 더하려고함? 이거 잘못됨! 이라던지
2. 어 너 혹시 list에 뭐 추가하고 싶구나? 그럼 push(혹은 append)라는거 쓰고싶니? 라던지
또 다른 예를 들어보면
function divide(a, b) {
return a / b
}입력받은 2개의 숫자를 나눠주는 함수를 devide(2,3) 이렇게 함수를 call하면 0.6666이라는 정상적인 반환값을 주겠지만, devide("xxxx") 이렇게 말도안되게 함수를 call해도 에러하나 발생하지 않고 NaN 이라는 반환값을 준다.
여기서 중요한건 코드가 실행이 됐다는건데, 최소한
1. devide 함수는 2개의 인자가 필요한데 1개만 넣었잖아. 라던지
2. string 타입은 나누기 연산자를 사용못해. 라던지
뭐 이런 종류의 에러라도 발생을 해야할탠데 일단 실행을 시켜준다.
따라서! 코드를 작성할때 보다 보호받아야할 의무(?)가 있지 않은가??
런타임 에러를 줄이고, 자동완성, 옳바른 데이터 타입 등등의 도움을 받기 위해서라도 타입스크립트를 사용해야할 이유는 충분하다고 생각한다.
What is TypeScript?
타입스크립트(앞으로 TS라고 하겠음)는 자바스크립트(앞으로 JS라고 하겠음)를 기반으로 구축된 강!력!한! 형식(Typed)의 프로그래밍 언어다.
또 TS 프로그램은 결국 JS로 변환 된다. (.d.ts도 알아보자)
JS는 어플리케이션을 개발할때 여러가지 챌린지들을 제시하는데 이를 해결하기 위해서 나온게 타입스크립트다.
(위에 예시로 들은것만 봐도 끔찍 그 잡채임...)
또, 이를 통해서 해결되는 문제들은 유형검사, 코드 구조화 및 디버깅 등등이 있다.
npm install typescript --save-devSome of important points between TS and JS
1. Dynamic vs Static typed
JS는 동적 프로그래밍 언어로 변수의 데이터 타입을 선언하지 않는다는 의미다. (파이썬 짱)
변수의 데이터 유형은 변수에 할당된 값에 따라 런타임시 지정이 된다. (파이썬 다시한번 짱)
Dynamic typed에서는 모든 데이터 타입의 값을 변수에 할당할 수 있는데 이로 인해서 런티임시 에러가 발생할 수 있다.
예시로 아래 사진처럼 fisrtName 변수에 문자열이 할당되지만 정수형태의 숫자가 할당되면 데이터 타입이 변한다.
TS는 옵셔널한 정적 타입의 프로그래밍 언어로 변수에 데이터 타입을 할당할수도 있고 할당하지 않을수도 있다.
데이터 타입을 설정하면, 설정한 데이터 타입 외에 다른 타입의 값을 할당할 수 없기에 코드의 오류를 줄이는데 도움이 된다.
2. Interpreted Vs Compiled
간략하게 컴파일러는 프로그래밍 언어로 작성된 소스코드를 통째로 코드 실행 이전에 기계어로 번역하는걸 의미히고(컴파일된 이후에 속도는 빠르겠지만, 특정 부분의 코드를 수정했는데 이를 확인하기 위해서 전체 코드를 컴파일 하니 이부분은 살짝 아쉽)
인터프리터는 소스코드를 한줄씩 읽어들이면서 기계어로 변환하는 과정없이 바로 해석해 실행하는걸 말한다.
(런타임 상황에서 한줄씩 실시간으로 읽어서 실행하기에 속도가 컴파일 언어대비 느리지만, 코드 수정 후 빌드없이 바로 실행이 가능하기에 이부분은 장점)
비유를 하자면 이탈리어로된 파스타 레시피가 있다고 할때
1. 내 옆에 친구가 이탈리아 출신이라 내가 레시피를 준비하는 동안 번역을 해줄 수 있고
2. 다른 친절한 사람이 이미 한국어로 번역을 했을 수도 있는데
여기서는 첫번째가 interpreted 언어를 의미하고 두번쨰가 compiled 언어를 의미한다.
JS는 인터프리터 언어로 런타임시 오류가 발생하고 디버깅에 시간이 많이 걸리는데, TS는 컴파일 언어로 개발중에 오류와 워닝이 발생해 조기에 버그를 찾아낼 수 있다.
위의 예시와 같이, TS에서 바로 빨간줄과 함께 빠르게 버그를 발견하게 도와준다.
3. Typescript is more structured
TS를 사용하면 Interface를 사용해 데이터 타입을 정의할 수 있다.
(나중에 type과 interface의 차이도 찾아봐야겠다, 언뜻 알기로는 type이 더 많은걸 할 수 있다고 들었단 말이지? 일단 이름도 interface script가 아닌 TS니까?)
(30이라는 나이가 마음을 아프게 하네 🥶)
위 사진과 같이 user라는 오브젝트의 타입을 IUser로 interface를 사용해서 정의해 주었는데,
user 오브젝트는 IUser가 정의된것 처럼 엄격하게 이름과 타입까지 준수해야 하고, 그렇지 않으면 오류가 발생한다.
결론?
따라서 타입스크립트를 사용함으로써 자바스크립트를 사용할때 야기할 수 있는 문제점들을 보완할 수 있고, 동시에 좀 더 나은 개발경험을 개발자에게 제공(자동완성이라던지, 에러를 미리 예방한다던지)할 수 있다.
참고
