TypeScript 공식 라이브러리 tslib란 무엇인가

 

유명 오픈 소스들을 살펴보다 문득 tslib라는 라이브러리에 대한 궁금증이 생겼다.

 

하지만 구글링을 아무리 해봐도 이에 대한 정보를 찾기 쉽지 않았다.

 

그래도 스택오버플로우와 함께 머리를 쥐어 싸면서 어느 정도 깨달음을 얻을 수 있었다. 

 

다른 사람들은 나와 같은 시행착오를 겪지 않았으면 하는 마음에 이에 대한 깨달음을 공유해보고자 한다.

 

등장 배경

TypeScript는 사용자가 작성한 코드를 JavaScript로 변환하면서 몇 가지 도우미 함수(helper functions)를 삽입할 수 있다.
 
예를 들어, 클래스 상속, 제너레이터, async/await, spread 연산자 등을 자바스크립트 ES5 버전으로 변환할 때 도우미 함수가 필요하다.
 
이때 도우미 함수들은 각 모듈에 복사되어 자바스크립트 번들의 크기를 증가시킨다.
 

tslib 기능

 tslib는 도우미 함수를 하나로 묶어 라이브러리로 만든 것이다. 
 
tslib를 설치하고 tsconfig.json에서 'importHelpers'를 true로 설정하면 도우미 함수를 각 파일에 복사하는 대신 'tslib'를 참조하게 만든다.
 
이렇게 하면 도우미 함수가 반복적으로 복사되는 것을 막아 번들 크기를 줄일 수 있다.
 

TypeScript의 JavaScript 버전 변환 

여기서 내가 헷갈렸던 것은 타입스크립트가 자바스크립트 ES5 버전으로 변환하는 기능이 있다는 것이었다.
 
ECMAScript 버전 변환은 'Babel'에서 해주는 것으로 생각했기 때문이다.
 
하지만 타입스크립트는 tsconfig 파일 내의 'target' 옵션으로 특정 ECMAScript 버전으로의 변환을 수행할 수 있다.
 
예를 들어, target을 ES5로 설정하면 타입스크립트 컴파일러는 코드를 ES5 버전의 자바스크립트로 변환하는 것이다.
 
https://stackoverflow.com/questions/77780544/is-there-a-function-like-this-in-typescript

Is there a function like this in TypeScript?

 

어떻게 tslib의 다운로드 횟수가 TypeScript보다 많을 수 있을까?

 
tslib는 타입스크립트 라이브러리인데, 어떻게 타입스크립트보다 다운로드 횟수가 많을 수 있는지 의문이 들었다.
 
나의 생각은 다음과 같았다.

- 타입스크립트를 사용하지 않으면 tslib는 사용 못한다.
- 타입스크립트를 사용한다고 해서 tslib가 필수는 아니다.
∴ tslib의 다운로드 횟수는 타입스크립트보다 많을 수 없다.

 
이해가 도저히 되지 않아 스택오버플로우에 질문을 남겼다.
 
https://stackoverflow.com/questions/77773102/how-can-is-tslib-over-typecrypt-in-the-number-of-downloads/77773139?noredirect=1#comment137111578_77773139

How can is 'tslib' over 'typecrypt' in the number of downloads?

 
요약하면 다음과 같다.

1. 타입스크립트는 development 환경(로컬)에서만 사용되지만, tslib는 production 환경(배포) 환경에서도 사용된다.
2. 라이브러리에 따라 여러 버전의 tslib가 필요할 수 있다.
   1. 이로 인해 tslib의 다운로드가 반복될 수 있다.
   2. 타입스크립트 또한 여러 프로젝트에서 사용되지만, 보다 일관된 버전 관리를 통해 다운로드 횟수가 많지 않을 수 있다.

 

tslib 언제 도입하면 좋을까

tslib은 타입스크립트 컴파일러에서 생성된 번들 사이즈를 줄이는 데 도움이 된다.

 

따라서 ES6의 기능을 사용하고 ES5 버전으로 변환해야 하는 경우 tslib를 도입해 보면 좋을 것 같다.

 

아직 tslib를 사용해본적은 없지만, 조만간 tslib를 적용해 보고 그 변화를 추가로 작성해 볼 예정이다.

 

아직 해결되지 않은 의문

github에도 나와있다시피 tslib는 타입스크립트가 컴파일된 최종 자바스크립트 코드가 런타임에서 실행될 때 필요한 라이브러리이다.

 

따라서 package.json의 dependencies 항목에 포함되어야 한다.

 

그래야 프로덕션 환경에서 애플리케이션을 실행할 때 tslib가 설치된다.

 

하지만 어떤 유명 오픈소스에서는 tslib를 devdependencies에 포함하고 있었다.

 

내가 아직 알지 못하는 무언가가 있는지 확실하게 알아보고, 만약 그것이 잘못되었다면 contributing 해볼 계획이다. 

 

Reference

https://github.com/microsoft/tslib 
https://npmtrends.com/tslib-vs-typescript
https://stackoverflow.com/questions/77780544/is-there-a-function-like-this-in-typescript
https://stackoverflow.com/questions/77773102/how-can-is-tslib-over-typecrypt-in-the-number-of-downloads/77773139?noredirect=1#comment137111578_77773139