JavaScript의 짧은 역사와 문제점
- JavaScript는 처음에
브라우저를 위한 스크립팅 언어로 만들어졌다. - JavaScript가 처음 나왔을 때, 수십 줄 이상의 코드를 작성하는 것은 다소 이례적인 일이었기에 웹 페이지 속
짧은 코드들을 위해 사용할 것으로 여겨졌다. - 하지만 JS가 유명세를 타며 실행 엔진을 최적화시키는 등의 노력이 이루어져 현재는 수십만 줄의 코드를 작성할 수 있게 되었다.
- 그러나 자바스크립트는 다음과 같은 문제들을 지니고 있다.
자바스크립트의 동일 연산자(
==)는 인수를 강제로 변환하여 예기치 않은 동작을 유발한다."" == 0 // true자바스크립트는 존재하지 않는 프로퍼티의 접근을 허용한다.
const obj = { width: 10, height: 15 }; const area = obj.width * obj.heigth; console.log(area); // NaN // height의 철자가 틀려 NaN이 출력된 것이다. // "heigth"는 철자가 다르므로 존재하지 않는 프로퍼티임에도 접근했을 때 // 에러가 발생하지 않아 개발자들이 원인을 파악하기 어렵다.
- 대부분의 프로그래밍 언어는 이런 종류의 오류들이 발생하면 오류를 표출해주고, 일부는 코드가 실행되기 전인 컴파일 중에 오류를 표출해준다.
- 그러나 자바스크립트는 위와 같은 예상치 못한 오류들이 발생했을 때 이를 알기 어렵기 때문에 코드가 길어질수록 문제를 발견하기 더더욱 어려워진다.
TypeScript : 정적 타입 검사자(Static Type Checker)
- 앞서 몇 언어는 버그가 많은 프로그램을 아예 실행시키지 않는다고 했다.
- 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을
정적 검사라고 한다. - 어떤 것이 오류인지, 어떤 것이 연산 되는 값에 기인하지 않는지를 정하는 것이
정적 타입 검사이다. - 정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에
값의 종류를 기반으로 프로그램의 오류를 찾는다.
위의 예시에서 오류가 있는 이유는 obj의 타입때문이었다.
Typescript에서는 이를 파악해 아래와 같이 보여준다.// @errors: 2551 const obj = { width: 10, height: 15 }; const area = obj.width * obj.heigth;
타입스크립트란? : "타입이 있는 JavaScript의 상위 집합"
타입스크립트는 자바스크립트와 어떤 관계일까?
1. 구문(Syntax)
: 자바스크립트와 사용하는 구문은 동일하다!
TypeScript는 JS의 구문이 허용되는, JavaScript의 상위 집합 언어이다.
구문은 프로그램을 만들기 위해 코드를 작성하는 방법을 의미한다.
예를 들어, 다음 코드는 ) 이 없으므로 구문 오류이다.
// @errors: 1005 let a = (4
2. 타입 (Types)
: 자바스크립트와 달리 타입을 검사해 오류를 검출해준다!
그러나 TypeScript는 다른 종류의 값들을 사용할 수 있는 방법이 추가된, 타입이 있는 상위 집합이다.
위의 obj.heigth 오류는 구문 오류가 아닌, 값의 종류(타입)를 잘못 사용해서 생긴 오류이다.
또 다른 예시로, 아래와 같은 JavaScript 코드가 브라우저에서 실행될 때 구문적으로 틀리지 않았기 때문에 에러가 나지 않고
NaN가 출력된다.console.log(4 / []); // NaN그러나 TypeScript는 배열로 숫자를 나누는 연산이 옳지 않다고 판단하고 오류를 발생시킨다.
// @errors: 2363 console.log(4 / []); // NaN
- 위에서 의도적으로 숫자를 배열로 나눈 것일 수도 있지만, 대부분은 프로그래밍 실수이므로 캐치해주는게 좋다.
- TypeScript의 타입 검사자는 일반적인 오류를 최대한 많이 검출하면서 올바른 프로그램을 만들 수 있게 설계되었다.
3. 런타임 특성 (Runtime Behavior)
: 타입스크립트는 보조 도구로써 자바스크립트의 런타임 특성에 영향을 끼치지 않는다!
TypeScript는 정적 타입 검사 및 추가적인 개발 도구와 기능을 제공하기 위한 언어 확장이다. TypeScript 컴파일러는 TypeScript 코드를 JavaScript 코드로 변환한다. 이 과정에서 TypeScript의 타입 시스템은 타입 오류를 검사하고 컴파일 타임에 타입 정보를 제공한다. 그러나 컴파일된 JavaScript 코드는 기존의 JavaScript 런타임 환경에서 실행되며, 타입 정보는 런타임에는 사용되지 않는다.
다시 말해, TypeScript의 타입은 개발자가 코드를 작성하고 디버깅할 때 도움을 주는 도구이다. 타입 검사는 컴파일 타임에 이루어지며, TypeScript 코드를 JavaScript로 변환할 때는 타입 정보가 제거되고 일반적인 JavaScript 코드가 생성된다. 따라서 런타임 환경에서 실행되는 JavaScript 코드는 TypeScript의 타입 시스템과는 독립적이며, 타입에 대한 정보는 런타임에는 존재하지 않는다.
4. 삭제된 타입 (Erased Types)
: 타입 검사가 끝나면 타입을 삭제하여 자바스크립트에 영향을 끼치지 않는다.
TypeScript의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 "컴
파일된" 코드를 만든다.
즉 코드가 한 번 컴파일되면, 결과로 나온 일반 JS 코드에는 타입정보가 없다.
타입 정보가 없는 것은 TypeScript가 추론한 타입에 따라 프로그램의 특성을 변화시키지 않는다는 의미이다.
결론적으로 컴파일 도중에는 타입 오류가 표출될 수 있지만, 타입 시스템 자체는 프로그램이 실행될 때 작동하는 방식과 관련이 없다.
참고
TypeScript는 JavaScript 프로그램과 같은 표준 라이브러리 (또는 외부 라이브러리)를 사용하므로,
TypeScript 관련 프레임워크를 추가로 공부할 필요가 없습니다.
JavaScript와 TypeScript 학습
"JavaScript를 배우지 않고선 TypeScript를 배울 수 없다."
TypeScript는 JavaScript와 구문과 런타임 특성을 공유하므로, JavaScript에서 배운 모든 것들은 동시에 TypeScript를 배울 때 도움이 된다.
참고
JavaScript 학습 자원이 훨씬 많고, 모든 Javascript 질문은 TypeScript에도 적용할 수 있기 때문에 TypeScript에 관련된 질문의 답을 TypeScript 관련 답변에만 제한시킬 필요는 없다.
