230803 TypeScript: 사용하는 이유

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

TypeScript를 사용하는 이유?

가령 아래와 같은 JS코드가 있다고 생각해보자

// 숫자를 더하는 add함수를 구현했다고 가정 해 보자
function add(num1, num2) {
	console.log(num1 + num2);
}

// 값을 불러올까?
add();
add(1);
add(1, 2);
add(3, 4, 5); // 12??
add('hello', 'world');

이에 대한 결과들은 Console에서 이렇게 보여준다. 이유가 뭘까?

NaN
NaN
3
7
"helloworld"

 

function add(num1, num2) {
	console.log(num1 + num2);
}

// console결과의 이유
add(); 
// NaN: 아무런 인수도 전달하지 않아 undefined상태에다가 undefined + undefined이기 때문

add(1); 
// NaN: 두 개의 인수를 전달해야하는데 한 개만 전달했기 때문에 1 + undefined이기 때문

add(1, 2); 
// 3: 두 개의 인수를 전달 받은 값 출력

add(3, 4, 5); 
// 7: 두개의 인수만 결과값으로 출력되고 세번째 인수는 무시
// 가령 어떤 개발자가 12라고 예상하고 코드를 짰다면, 어디서 에러가 났는지 파악하기 어렵게됨. 
// 코드상으론 에러가 없기 때문....!!

add('hello', 'world'); 
//"helloworld": + 로 문자열과 문자열이 더해져 에러 없이 결과값이 나옴

소름 돋게도 JS는

function add(num1, num2) {
	console.log(num1 + num2);
}

add();

이런식으로 작성해도 에러를 뱉지 않는다. 어쨌거나 잘못된게 없기 때문....

에러를 뱉지않는다는 것은 원하는데로 코드를 짠게 맞는지 파악하기 어렵다는 것. 앞선 코드만 봐도 add라는 더하는 기능을 가진 함수를 만들었지만, string을 더해도 에러 없이 값이 나오는 것 처럼, "원하는 방향으로 기능을 구현한게 맞는지"를 판단하기가 어려워진다. 

다른 예시를 살펴보자

function showItems(arr) {
	arr.forEach((item) => {
    	console.log(item);
    }
}

showItems([1, 2, 3, 4]); // 1 2 3 순차적으로 정상출력
showItems(1, 2, 3, 4); // Uncaught TypeError발생
// 숫자 1에는 배열 순회 메소드인 .forEach 메소드가 없기 때문

JavaScript는 동적언어이다. 때문에 런타임(실행되는 시점)에 타입이 결정되고, 오류가 발생하면 그 때 발생한다. 때문에 개발자가 오류를 발생하는 코드를 짰는데 발견하지 못했다면 사용자가 실행 했을 때 에러를 고스란히 겪게 되는 것이다.

1. TypeScript로 리팩토링 해 보기

 Java, TypeScript는 정적언어로, 동적언어인 JS와 달리 컴파일 타임(컴퓨터가 이해할 수 있는 언어로 변환되는 시점)에 타입을 결정한다. 때문에 코드작성 초기에 시간이 많이 걸릴 수 있지만 많은 고민을하며 코드를 짠다면 안정적이고 빠르게 작성할 수 있다. 고민을 많이 하게되는데 어째서 빠르게 짤 수 있는건지 앞서 JS로 만든 예시를 통해 TypeScript Playground에서 리팩토링해보자

TypeScript Playground에서 JS코드를 복붙했을 때 발생하는 에러

에러결과를 보면 인자값이 타입이 설정되어 있지않아 아무타입인 'any'로 타입선언이 되어있어 에러를 뱉고있다. 나머지 에러들은 인자를 두 개를 받아야 하는데 아무것도 받지 않았다, 또는 1개만 받았다. 또는 3개를 받았다. 등으로
개발자가 코드를 잘못 작성했다는 것을 TypeScript가 알고 에러를 통해서 알려주고 있다.

이제 타입 선언을 해 TypeError를 없애보자

인자의 타입 number로 선언해주기

num1과 num2의 타입을 'number'로 선언해주니 첫줄에 있던 빨간선이 사라지고 대신 9번째 줄의 문자열 helloworld가 에러가 발생했다. 에러 내용은 인자의 타입이 문자열이므로 선언된 인자타입인 number로 허락될 수 없다는 것.
이런식으로 타입을 선언해 함수를 의도했던대로 실행 될 수 있도록 안전하게 짤 수 있게 되는 것이다.

함수를 실행할 때 받아야하는 인자 갯수와 타입등을 미리 보여준다

더 나아가 함수를 사용하려할 때 굳이 그 함수를 찾아가 그에대한 정보를 파악할 필요없이 사용하려할 때 작은 창으로 어떤 타입의 인자값을 몇개를 보여줘야하는지, 리턴유무에 대해 간단히 보여준다.

---

간단하게나마 TypeScript를 사용해야하는 이유에 대해 작성해 보았다. JS를 학습 할 당시엔 단순 기능구현만 되면 좋아서 후에 TypeScript를 공부해야할 때는 거부감이 심하게 들었다. 귀찮다고 생각했기 때문이다.

하지만 지금은 생각이 달라졌다.

물론 JS 굉장히 파워풀하고 좋은 언어인건 맞지만, 개인이나 소규모로 빠른 산출물을 내고자 할 때 좀 더 적합한 언어인 것 같고, 서비스가 어느정도 규모가 있고 협업하는 팀원이 있다면 귀찮더라도 안전성과 보수 할 상황을 고려하고, 내 코드를 남이 타고타고 보면서 코드를 짠 의도를 조금이나마 파악할 수 있는거로는 TS가 적합하지 않나라는 생각이든다.
그렇지 않다면 좋은(클린한)코드를 고려할 수 없는 것은 물론이고, 에러발생 시 얼레벌레 수정하기 바쁜 상황에 놓이는 좋지않은 습관을 가질 것이 눈에 훤히 보이기 때문이다 :(

얼레벌레 코드 고치지말자

예시로 작성했던 코드에 number처럼 타입이 여러개가 있는데, 다음 글은 타입종류에 대해 작성해 볼 것이다.