2.0 How Typescript Works
자바스크립트는 개발자를 보호해주지 않는다.
지금까지 자바스크립트는 개발자를 그다지 보호해주지 않는다는 사실을 알게 됐다. 개발자가 실수를 피할 수 있도록 자바스크립트는 보호해주지 않는다는 이야기다. 이전처럼 []+3 같은 말도 안되는 코드를 작성해도 코드가 실행 되고, 함수를 실행할 때에 올바른 입력값을 사용하도록 강제하지도 않는다. 그러니까 만약 함수에 필요한 인자가 두개인데 하나만 전달해도 자바스크립트 내에서는 문제 없이 실행된다는 이야기다. 심지어는 객체 안에 존재하지도 않는 속성이나 함수를 멋대로 호출할 수도 있다. 그리고 이 많은 문제점들을 뒤로하고 가장 최악인 것은 자바스크립트는 코드가 실행되고 나서야 '에러 메세지'를 볼 수 있게 된다는 지점이다. (이렇게 실행할 때 발생하는 에러를 런타임 에러라고 한다.) 그말인 즉슨, 런타임 에러를 마주하게 되는 것은 개발자가 아니라 바로 실제 서비스를 이용할 사용자가 된다는 뜻이다.
코드를 실행하기 전에 에러를 잡아내는 방법
앞서 수 많은 공포스러운 시나리오들을 상정하고 가장 이상적인 방법으로 해결책을 찾기 위해서는 어떻게 해야만 할까? 사용자가 런타임 에러를 마주하기 이전에 그러니까 코드를 실행하기 전에 바로 에러를 잡아내는 것이다. 실수를 하더라도, 실제 유저가 아닌 개발자 자신이 마주하는 것이 어디까지나 훨씬 나은 방법일 테니까 말이다. 그리고 이것을 가능하게 해주는 것이 바로 타입스크립트 이다.
타입스크립트란 무엇인가?
자바스크립트에 타입스크립트라는 해결책을 더하기 이전에 우리는 타입스크립트가 무엇인지에 대해서 알 필요가 있다.
타입스크립트는 프로그래밍 언어다.
타입스크립트의 공식문서를 확인해보면, stringly typed(강한 타입) 프로그래밍 언어라고 소개 되어있다. stringly typed(강한 타입) 프로그래밍 언어는 코드를 다 작성하고 나면 코드를 컴파일(변환)하여 기계가 실행할 수 있는 다른 종류의 언어 코드로 변환시킨다. 타입스크립트도 마찬가지이다. 타입스크립트의 경우는 자바스크립트로 컴파일(변환)되어 브라우저가 이해하도록 만들어준다.
타입 스크립트를 컴파일 하는 이유는 브라우저가 타입스크립트를 이해하지 못하고, 자바스크립트를 이해하기 때문이다.
지금까지 누누히 설명했듯이 타입스크립트는 개발자가 멍청한 실수를 하더라도 런타임 이전에 에러를 발생시킴으로써 개발자가 더이상 실수하지 않도록 보호해주는 역할을 한다. 그러니까 자바스크립트에서는 가능했던 []+3 같은 말도 안되는 코드를 작성할 수 없도록 만든다. 그렇다면 타입스크립트는 어떤 방법으로 개발자를 실수로부터 보호를 해주는 것일까?
타입스크립트가 제공하는 보호장치는 자바스크립트로 변환 되기 전에 발생한다.
즉, 타입스크립트가 컴파일된 자바스크립트 안에서 에러가 발생하기 이전에 개발자가 작성한 코드를 미리 체크 한다는 이야기이다. 개발자가 타입스크립트 코드를 작성하고 해당 코드를 컴파일(변환)하면, 보호장치 없는 일반적인 자바스크립트 코드가 된다. 하지만 타입스크립트 코드를 작성했을 때 실시간으로 에러를 마주하게 되면, 그 해당 코드는 자바스크립트로 컴파일(변환)되지 않는다.
타입스크립트에서 에러가 발생되면, 자바스크립트로 변환되지 않는다.
타입스크립트에서는 에러가 발생할 것이라 감지한 코드는 아예 자바스크립트로 컴파일(변환)조차 되지 않는다는 뜻이다. 그리고 이 덕분에 서비스를 이용하는 유저가 런타임 에러를 마주하지 않을 수 있게 되는 것이다. 만약 타입스크립트가 성공적으로 컴파일(변환)돼서 자바스크립트 코드를 주면 타입스크립트 코드도 제대로 작성된 것이고, 데이터 타입에도 문제가 없었다는 뜻일 것이다. 이말인 즉슨, 자바스크립트 코드에 버그는 더이상 존재하지 않는다는 의미이기도 하다.
const david = {
nickName : "david",
};위의 코드는 자바스크립트 코드처럼 보이지만 동시에 타입스크립트 코드이기도 하다.
const david = {
nickName : "david",
};
david.hello();위의 코드처럼 잘못된 접근으로 david 객체에는 존재하지도 않는 함수 hello()를 실행한다면 어떨까? 놀랍지 않게도, 자바스크립트에선 당연히 그대로 실행되었다. 하지만 타입스크립트에서는 hello() 를 작성하는 즉시 에러가 발생한다. 그리고 이런 방식으로 타입스크립트에서는 개발자가 멍청한 코드를 작성하지 못하도록 실수를 하지 않도록 보호해준다.
그리고 타입스크립트가 띄운 에러 메세지에는 분명하게 해당 객체 타입에는 hello 는 존재하지 않는다고 친절하게 설명해주기까지 한다.
또한, 코드를 저장하기도 전에 VS Code 에서는 에러를 잡아낼 것이다. 다른 코드 예시를 보자.
숫자를 담은 배열과 false를 더한 이상한 코드를 작성하면, 타입스크립트는 바로 에러를 띄우며, 정확한 메세지로 해당 코드가 잘못되었음을 상세하게 설명(숫자 배열에 boolean 을 더할 수 없다)해주고 있는 걸 알 수 있다. 그리고 이러한 종류의 에러는 이전의 자바스크립트에서는 볼 수 없었던 친절함이기도 하다.
함수 예시도 마찬가지이다. divide 함수에는 숫자로 추측 가능한 매개변수 인자 두개를 각각 받아야만 한다. 그 숫자 값을 받아야 나누기 연산자가 가능하고, 그것을 반환해주기 때문이다. 하지만 divide를 호출하면서 숫자가 아닌 문자열을 하나만 보내주고 있다. divide 함수에 필요한 인자의 타입도, 갯수도 다르다.
타입스크립트에서 발생시킨 에러 메세지를 띄워보면, divide 함수는 두 개의 입력값이 필요하지만 하나만 제공되었다고 친절하게 설명을 해주고 있다. 우리는 이 divide 함수를 보면서 타입스크립트의 보호장치가 해당 함수에 두가지 있는 것을 알 수 있다.
첫 번째로, divide 함수의 매개변수 인자 a와 b가 '숫자' 여야만 한다는 것을 알려준다.
두 번째로, divide 함수의 매개변수 인자가 두 개이기 때문에 함수에 인자를 전달할 때 이 두 개의 인자 '갯수'를 지켜야만 한다는 것을 알려줄 수 있다.
정리
이것이 바로 타입스크립트이다. 앞서 코드들을 봤다시피 타입스크립트의 코드 자체는 자바스크립트와 크게 다를게 없다. 그러니 자바스크립트 코드를 사용하면서도 타입스크립트의 타입 체커 기능을 이용해서 조금 더 안전하게 코드를 작성할 수 있게 되는 것이다. 그리고 바로 이점(코드를 많이 바꾸지 않아도 된다는 점) 때문에 많은 개발자들이 타입스크립트를 좋아하는 것이다.
참조
