한번쓰면 빠져나올 수 없다는 typescript. 왜 쓰는 걸까?
JS와의 비교
TS는 바로 브라우져에서 띄워줄 수가 없다. 때문에 JS로 변환 후에 사용된다.
이렇게 한 단계가 필요함에도 쓰는 이유는 무엇일까?
JS는 동적타입언어
JS는 동적언어이다. 무슨 의미이냐? 바로 런타임에 타입이 결정되고 오류가 발견된다는 것이다.
쉽게 말해 작성해놓고 실행하기 전까지는 어디에 오류가 야기될지 알 수가 없다. 개발자의 실수를 사용자가 알 수 있는 셈
function add(num1, num2) {
console.log(num1+num2)
};
add() // NaN
add(1) // NaN
add(1,4) // 5
add(1,4,6) // 11? nope! 5
add('hello','world'); // "helloworld"개발자A가 위에서 두개의 숫자의 합을 구하는 함수를 만들었다고 가정하자. 그런데 개발자A가 만들어놓은 함수에 꼭 인수가 2개만 들어갈 수 있는 것은 아니다.
개발자B는 숫자의 합을 구하는 함수라고 들어서 1, 4, 6의 인수를 넣어 11이라는 결과를 기대했지만 생각과 다르게 4가나왔다. 첫번째와 두번째만 사용된 후 세번째는 무시되었기 때문.
그리고 개발자C는 문자를 넣었다. 게다가 오류없이 결과도 나왔다. 문자도 연산이 되기 때문이다.
그렇다면 숫자의 합을 구하는 함수를 만들고자 했던 개발자A의 의도대로 사용되지 않는 것이지만 이걸 사용할 다른 사람들은 알려주지 않는 한 알 수가 없다.
function showItems(arr) {
arr.forEach((item) => {
console.log(item);
});
};
showItems([1,2,3]); // 1, 2, 3
showItems(1,2,3); // Error하나더 예시를 보자면 배열을 돌면서 실행되는 함수를 만들었을 때 [1,2,3]이라는 배열을 넣었을 땐 문제가 없지만, 1,2,3이라는 값으로 넣었을 때는 문제가 발생한다.
배열에만 forEach라는 메소드를 지니기 때문이다.
TS는 정적타입언어
이에 반해 TS는 컴파일 과정에서 타입이 결정되는 정적타입언어이다.
때문에 작성시간은 오래걸리되 오류를 줄일 수 있는 안정적인 작업을 할 수 있는 것이다.
typescript로 위의 코드를 똑같이 작성해보면 위처럼 빨간 밑줄이뜨고 경고된다.
코드를 작성하고 실험해보고 싶다면 TS playground에서 가능하다.
작성된 함수에 맞는 인수의 개수가 아니라는 뜻이다. 그리고 여기에서 인수의 type을 지정해주면?
문자를 넣어준 코드도 경고가 떴다. ('world'에는 밑줄이 안 뜬 이유는 그저 이미 첫번째에서 경고가 떴기 때문, 'hello'를 숫자로 바꾸면 결국 뒤에 밑줄이 간다.)
이처럼 의도한 것과 다르게 실행되면 경고를 띄워주는 것.
두번째 예시는 다음처럼 작성할 수 있다.
결론
이와 같은 이유로 우리는 TS를 사용하고, 이를 통해 보다 오류를 줄이는 안정적인 코드를 작성할 수 있다 !
TS만세!
- 출처: 코딩앙마님의 유튜브 강의
