TypeScript와 호환성
인터넷에서 모든 사용자가 볼 수 있는 사이트를 만든다고 했을 때, 현재, 기능적인 하한선은 Internet Explorer 11 4입니다 (그러나, 우리나란 IE6까지 호환하는 걸 원하는 막장 상황).
Google 검색 엔진 로봇도 이와 거의 똑같은 기능(const, let이 있는 클래스 제외)인 Chrome 41로 고정되어 있습니다. 그렇지만, 버전업이 더이상 지원되지 않는 iOS 및 Android 스마트폰의 경우엔 최신 기능이 작동하지 않을 수 있습니다. 브라우저 이외에, Google Apps Script가 ECMAScript3에만 대응하고 있습니다.
브라우저 호환성 100%를 만들고 유지한다는 것은 개발 자원이 아무리 많아도 불가능합니다. 그래서 공수와 현실적인 부분을 고려하여 지원 범위를 결정하는 게 보편적입니다. 브라우저 버전마다 어떤 기능을 지원하는지는 ECMAScript Compatibility Table6 사이트에서 확인할 수 있습니다.
새로운 브라우저에 한정할 수 있는 인트라넷 서비스, Node.js 이외엔 Babel, TypeScript 컴파일러를 사용하여, 이전 버전의 js 파일을 생성합니다. 이 파일은 JavaScript 코드로 최근엔 ES6를 ES5로 변환하는 것이 일반적입니다. Lambda, Cloud Functions, Google App Engine 등은 경우에 따라서 약간 오래된 버전의 Node.js를 대상으로 해야 하므로 이것도 변환이 필요할지 모릅니다.
TypeScript의 경우 거의 최신 ECMAScript 문법을 쓸 수 있지만, 컴파일 시에 출력할 코드 버전을 결정할 수 있습니다. 기본적으로 ES3지만 ES5, ES2015 부터 ES2018, ESNEXT와 함께 총 7가지의 버전을 선택할 수 있습니다. 일부 기술적 부분은 대상 브라우저가 오래된 경우에 추가 옵션을 설정할 필요가 있습니다. 최소한 ES5면 어떤 브라우저에서도 문제가 발생하진 않을 겁니다. (그러나 여긴 헬조선입니다. 장담할 순 없네요. 특히 공공기관 개발자분들 ...)
그러나, TypeScript가 커버하는 건 문법 부분뿐입니다. 예를 들어, Map, Set 같은 클래스는 ES5에 없으며 반복자와 관련된 Array 메소드도 없습니다.
TypeScript에는 tsconfig.json이라는 컴파일러 동작을 결정하는 (정의된) 파일이 있습니다. 브라우저의 변경 가능성이 있다면, 각 브라우저별로 새로운 요소를 지원하는 항목을 추가 기술해야 합니다. 현재, 부족한 클래스나 메소드를 추가하기 위해(Polyfill이라고도 함) 가장 많이 사용되는 것이 core-js8로 Babel에서도 사용되고 있는 것 같습니다.
자바스크립트 소스 코드를 오래 사용하다 보면 기존에 사용했던 클래스 등도 오래되므로 대책이 필요합니다. 우선, ES2017과 ES2018 등의 버전 중 필요한 클래스를 정의하고 있는 버전이 무엇인지를 찾아야 합니다. 어떤 버전이 어떤 기능을 지원하는지는 위의 compat-table 사이트에서 도움을 받으면 됩니다.
출력 대상을 es5로 선택하면 lib에는 ["DOM", "ScriptHost", "ES5"]가 정의됩니다. lib은 사용할 클래스, 메소드 등이 정의되어 있는 것으로, 내용을 늘린다고 해서 구현 범위가 넓어지는 것은 아니지만, "이건 없어요"라는 등의 컴파일러 오류를 출력하기 위한 정보 소스로 사용됩니다. "ES5"에는 해당 버전에서 사용할 수 있는 클래스와 메소드밖에 없기 때문에, 다음과 같이 ES2017로 바꿉니다.
이렇게 하면, Map 등을 사용해도 TypeScript 오류는 발생하지 않지만, 변환된 소스 코드에는 Map이 처음부터 있었던 것처럼 출력됩니다. Map을 사용하는 다른 위치에 import 추가하면, 해당 기능이 없는 환경에서도 작동됩니다. core-js 옵션을 알고 싶다면, core-js 사이트의 README를 참고하세요. 상세히 설명되어 있습니다.
-- 미완성 글입니다.
