개요
- 최신브라우저는 모듈 로딩을 자체적으로 지원한다. unpkg, esm.sh같은 CDN(Content Delivery Network, 콘텐츠전송네트워크)은 EcmaScript모듈 로딩 시 읽을 수 있도록 노드 모듈과 자바스크립트 의존성을 url로 배포한다.
문제
- 브라우저에서 직접 URL로 JS 모듈 불러오는 경우
다운받은 모듈 자체에는 모듈의 타입 정보가 없어, 타입스크립트 에서 에러가 난다.
index.html
<!DOCTYPE html>
<html lang="en">
<body>
hello
<script type="module" src="./main.js"></script>
</body>
</html>- npx tsc 하여 main.ts를 main.js로 컴파일하여 사용한다.
main.ts
import _ from "https://esm.sh/lodash@4.17.21";
const result = _.flattenDeep([1,2,[3,[4]]]);
console.log(result);
-
이것은 브라우저에서 ESM CDN을 통해 lodash를 직접 불러와서 실행하는 경우. 즉, 번들러 없이 브라우저가 직접 URL을 통해 모듈을 로딩하는 방식이다.
-
다운받은 모듈은 Javascript이므로 타입이 없다.
flattenDeep함수의 인자 타입, 반환타입을 알 수 없다. 따라서 해당 함수에 대한 타입정보를 가지고있어야한다. -
npm i 로 타입을 설치하고, 타입에 대한 정보를 tsconfig.json에 명시하여 해결한다.
해결
- 타입 설치
npm install --save-dev @types/lodash
- 타입스크립트가 사용할 수 있는 .d.ts 파일을 로컬 node_modules에 설치
- tsconfig.json에 paths 설정 추가
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"outDir": "./", // main.js로 출력
"rootDir": "./",
"strict": true,
"esModuleInterop": true,
"baseUrl": ".", // 현재 디렉토리를 기준으로 상대 경로 지정
//"paths"를 사용할 때는 baseUrl이 반드시 지정되어 있어야 하며, 경로는 baseUrl을 기준으로 상대 경로여야 함
"paths": {
"https://esm.sh/lodash@4.17.21": [
"node_modules/@types/lodash/index.d.ts"
]
}
},
"include": ["./main.ts", "./utils.ts"],
"exclude": []
}
학습출처
실무로 통하는 타입스크립트
1.9 URL 로 ecmaScript 모듈 타이핑하기
프론트엔드개발자인디