(TS) tsconfig / lib

https://www.typescriptlang.org/tsconfig#lib

TSConfig Reference - Docs on every TSConfig option

먼저 공식문서의 tsconfig에 대한 lib의 설명을 보자.

 

타입스크립트는 빌트인 JS API (Math 메서드 세트 같은) 에 대한 타입 정의를 디폴트 세트로 가지고 있습니다.

그리고 브라우저 환경에 관련된 타입(document 같은 것들) 정의도 찾아볼 수 있습니다. 

또한 JS가 버전업됨에 따라서 추가되는 새로운 JS API도 tsconfig의 target 버전을 바꾸어 추가할 수 있습니다.

예를들어, Map 자료형은 target이 ES6나 그 이상에서 타입을 자동적으로 정의할 수 있습니다.

 

당신은 몇가지 이유로, tsconfig의 기본 설정을 바꾸고 싶을 수 있습니다.

• 프로그램이 브라우저에서 실행할 필요가 없어서 "dom" 타입 정의가 필요하지 않을 때
• 런타임 플랫폼에서 자바스크립트 API 객체에 대한 내용을 제공하지만, 현재 사용하는 ECMAScript에서는 해당 문법을 모두 지원하지 않을 때
• 모든 폴리필을 사용할 필요는 없지만, 몇몇개는 ECMAScript의 상위 레벨 버전의 기능이 필요할 때 등등

하이 레벨 라이브러리 이다.

---

공식문서의 해설은 이러하다.

 

이걸 어떻게 실전에서 사용할 수 있을까?

 

몇가지 설정을 해보자.

타겟은 es2016이고, lib는 설정하지 않아 디폴트값이 선언되어 있다.

위 스크린샷에서 tsconfig에서 사용하는 디폴트 타입 정의는 es2016과 매치된다.

그리고 lib가 주석처리 되어있어서 lib에는 디폴트 값이 적용되어 있으며, 디폴트값에는 DOM, 빌트인 API 라이브러리가 정의되어 있다.

 

그래서 tsconfig를 기본값으로 둔 상태에서 dom 요소를 건드릴 때, 타입 정의가 이미 되어있다.

별도로 lib를 손보지 않았으므로 이미 타입 정의가 되어있다.

 

이 때 lib의 주석을 풀어 디폴트값을 해제해버리면

ts파일은 document의 타입을 인식하지 못해 에러를 뿜게 된다.

lib의 주석을 푼다면?

document를 찾을 수 없다고 에러를 뿜게 된다.

위와 같이 타입을 찾을 수 없다고 any타입이 일단 선언되며, 에러를 뿜게된다.

하지만 에러 설명에서 친절하게 lib 컴파일러 옵션에 "dom"을 추가하라고 말해준다.

 

에러 설명에서 처럼 DOM을 lib에 추가해주면

lib에 DOM을 추가해주면?

 

ts가 document의 타입 추론을 할 수 있게 되어 에러가 사라진다.

에러가 사라진다.

 

---

 

새로운 것을 배울때는 공식문서를 참조하는 것이 가장 빠르게 배우는 방법인 것 같다.

열심히 하자