"Module System" in Typescript

Junghyun Park·2021년 7월 6일
0

module 이란?

sandbox 환경에서 작동하는 javascript 파일이고, public에 어떤 value를 노출
import문과 export문을 포함하는 일반적인 javascript 파일

declare Keyword 란?

  • 변수 앞에 delcare를 붙이면, ts compiler에게 이 값은 런타임에 존재하고, shape(type)을 제공한다고 말하는 것 (반대로 없으면, 런타임에는 존재하지 않는 것으로 인식)
  • 여기서 declare 붙은 변수 내의 타입들을 ambient delclaration이라고 함 (일반적으로 이 선언들은 d.ts 파일에 저장되어 있음/ 이 파일들은 ts compiler에 의해 자동으로 import 되거나 tsconifg.json 파일에 의해 import 됨)
// declare Lodash interface
interface Lodash {
    tail( values: any[] ): any[]
}
// declare `_` constant of type `Lodash`
declare const _: Lodash;
// works in runtime
const result = _.tail( [ 1, 2, 3 ] );

Script Vs Module

자바스크립트 파일은 script로서 또는 module로서 역할 수행
타입스크립트에서 global로 모듈을 사용하고 싶다면, config 파일 내 files에 추가할 수 있음

Script

: script file은 <script> 태그를 사용하여 import 됨
: 모든 script 파일 내의 값들은 global scope에서 사용가능 (스크립트로 취급) but 파일내 import나 export를 포함하면 모듈로 취급되므로, 명시적으로 import/export를 통해 값을 공유 가능

module

: 명시적으로 구체화되지 않으면, global scope에는 영향을 주지 않는 파일 레벨에서 values가 선언되어 있는 sandboxed 스크립트 파일
: 모듈간 값을 share할수 있는 유일한 방법은 import/export

파일(모듈)을 import하는 방법은 2가지가 존재(i) 파일 경로 ii) 모듈명)
경로 내에서 처음 .ts 파일을 찾고 다음으로 .d.ts를 검색
ts compiler가 파일시스템에서 모듈파일을 찾는 과정을 module resolution이라고 함

Module Resolution Strategies

  1. Classic
    : 오래된 버전들과의 backward compatibility를 위한 전략
    : 현재 파일이 속한 폴더를 import 문이 있는지 서치하고, 높은 수준의 폴더로 이동해가면서 검색
  2. Node (Default)
    : 대부분의 3rd party library가 node modules 이므로 대다수 사람들이 이를 선호
    : Node.js의 standard module resolution strategy로부터 유래
    : 예를 들어, 아래는 상대경로와 비상대 경로인 경우 탐색 순서
// relative import - Node strategy
Import statement: import '../program';
Import Location: /root/dir/sub/example.ts
1. ../program.ts
2. ../program.d.ts
3. ../program/package.json -> [[types]] -> file path
4. ../program/index.ts
5. ../program/index.d.ts
6. Error: Cannot find module
// non-relative import - Node strategy
Import statement: import 'package';
Import Location: /root/dir/sub/example.ts
1. /root/dir/sub/node_modules/package.ts
2. /root/dir/sub/node_modules/package.d.ts
3. /root/dir/sub/node_modules/package/package.json -> [[types]] ->
4. /root/dir/sub/node_modules/package/index.ts
5. /root/dir/sub/node_modules/package/index.d.ts
6. /root/dir/node_modules/package.ts
7. /root/dir/node_modules/package.d.ts
8. /root/dir/node_modules/package/package.json -> [[types]] ->
9. /root/dir/node_modules/package/index.ts
10. /root/dir/node_modules/package/index.d.ts
11. /root/node_modules/package.ts
12. /root/node_modules/package.d.ts
13. /root/node_modules/package/package.json -> [[types]] ->
14. /root/node_modules/package/index.ts
15. /root/node_modules/package/index.d.ts
16. Error: Cannot find module

<참고 링크>
https://medium.com/jspoint/typescript-module-system-5022cac310f6

profile
21c Carpenter

0개의 댓글