TypeScript를 사용하는 이유에 대해 알아보기
Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types.
위 문장은 타입스크립트 홈페이지에서 제일 처음 보이는 두 문장입니다. 문장 그대로, 타입스크립트는 자바스크립트의 확장판이며 어떤 규모의 자바스크립트에서도 사용할 수 있습니다.
그런데 우린 타입스크립트를 왜 사용하는 걸까요?
예측 불가능한 자바스크립트
타입스크립트의 장점에 대해 설명하기 전에, 먼저 자바스크립트가 가진 문제점들에 대해 알아보려고 합니다.
이 코드는 작동하는 코드지만, 문제점이 있습니다.
Problem 1의 코드는 원하지 않는 값인 NaN이 나왔습니다. 자바스크립트의 객체는 기본적으로 존재하지 않는 프로퍼티에 접근이 가능하기 때문입니다.
Problem 2의 코드 중 checkNumberIsZero() 함수는 인자의 타입을 제한하지 않아 아무 타입이나 인자로 쓸 수 있고, 비교 부분에서는 강제 형변환을 해서 예기치 않았던 동작이 발생합니다.
그 이유와 해결법
자바스크립트는 타입을 런타임 이전이 아닌, 런타임에 동적으로 검사합니다. 그래서 프로그램을 실행해보지 않는 이상 어떤 타입 에러도 잡아낼 수 없습니다.
그래서 이런 에러를 잡아내기 위해 “런타임 이전에 (정적으로) 타입을 검사할 수 있는 자바스크립트를 만들자!” 고 접근하게 됩니다.
타입 선언
Problem 2의 코드는 TypeScript로 아래처럼 재작성할 수 있습니다.
checkNumberIsZero() 함수의 인자의 타입을 number로 제한하여, number 이외의 인자를 넘겨줄 시 트랜스파일 단계에서 에러가 발생합니다.
트랜스파일(Transpile)이란, 소스 코드를 같은 언어 혹은 다른 언어의 소스 코드로 변환하는 작업입니다.
타입스크립트는 이처럼 타입을 선언하여 모호한 타입에 대한 문제를 해결합니다.
이렇게 문제는 해결했으나, 이미 작성된 코드를 타입스크립트로 재작성하려면 상당히 오랜 시간이 걸립니다. 이미 작성된 코드에 굳이 타입을 모두 붙여주면서 해결해야만 할까요?
타입 추론
Problem 1의 코드는 타입스크립트 없이도 단순히 obj.heigh를 obj.height로 수정하면 해결할 수 있습니다. 그런데 왜 타입스크립트를 도입해야 할까요?
오타가 난 코드를 그대로 트랜스파일해봅시다.
에러를 살펴보시면, 특별히 타입을 정의하지 않았는데 obj 객체가 { width: number; height: number; } 라는 타입을 가지고 있다고 추론되었습니다.
타입스크립트는 이처럼 타입 추론으로 어느 정도의 타입 시스템을 제공하여 점진적 타이핑을 가능하게 합니다.
결론
동적으로 타입을 검사하는 자바스크립트는 엄청 미약한 오류도 프로그램을 실행하기 전까지는 오류인지 알 수 없습니다. 그래서 프로젝트가 커지면 이런 사소한 오류들이 모여 방해꾼이 될 수 있습니다.
타입스크립트는 이렇게 예측할 수 없는 상황을 개발자에게 알려주어 버그를 미연에 방지할 수 있도록 도와줍니다.
앞으로 타입스크립트로 할 수 있는 많은 일을 알려드리려고 하니, 오늘 타입스크립트를 한 번 세팅해보시는 것은 어떤가요? :)
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
