ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [TS] 모듈 이해하기
    TypeScript 2023. 4. 7. 10:00
    반응형
    SMALL

     

     

     

    타입스크립트 모듈

     

     

     

    • index.ts와 같은 소스파일을 모듈이라고 한다.
    • export default키워드는 한 모듈이 내보내는 기능 중 오직 한개에만 붙일 수 있다.
    • export default가 붙은 기능은 import문으로 불러올 때 중괄호{}없이 사용할 수 있다.

     

     

    # tsconfig.json
    {
      "compilerOptions": {
          "module": "commonjs",                               
          "esModuleInterop": true,                            
          "target": "ES5",
          "moduleResolution": "node",
          "outDir": "dist",
          "baseUrl": ".",
          "sourceMap": true,
          "downlevelIteration": true,
          "noImplicitAny": false,
          "paths": {"*": ["node_modules/*"]}
    },
      "include": ["src/**/*"]
    }
    compilerOption : tsc명령형식에서 옵션을 나타냄
    include항목에서 src는 src하위 디렉터리에 있는 모든파일을 컴파일 대상으로 포함
    
    1. module : 동작대상 플랫폼이 웹브라우저인지 노드제이에스인지 구분해 
    그에 맞는 모듈방식으로 컴파일하려는 목적
     웹브라우저: "module" : "amd" 
     노드제이에스: "module" : "commonjs"
    
    2. moduleResolution키 : module키 값에 따라 바뀜. 
     "module" : "amd"  => classic
     "module" : "commonjs" => node
    
    3. target키 : 자바스크립트의 버전을 설정 
    
    4. baseUrl, outDir키 : 트랜스파일된 자바스크립트 파일을 저장하는 디렉터리 설정
    baseUrl : tsc는 tsconfig.json파일이 있는 디렉터리에서 실행됨. (현재디렉터리 . 설정)
    OutDir : baseUrl설정값을 기준으로 하위디렉터리의 이름. 빌드된 결과가 dist디렉터리에
    
    5. paths키 : import문에서 from부분을 찾아야 하는 디렉터리 설정
    
    6. esModuleInterop키 : 웹브라우저에서 동작하는 AMD방식으로 구현하려면 true로 설정
    
    7. sourceMap키 : true이면 트랜스파일 디렉터리에는 .js파일 이외에도 .js.map이 만들어짐
    이 소스맵 파일은 주로 디버깅할 때 사용
    
    8. downlevellteration키 : 6장의 생성기라는 타입스크립트 구문을 설명한다고 함
    
    9. nolmplicitAny키 : 매개변수에 타입을 명시하지 않은 코드일 경우 
    암시적으로 any타입을 설정한 것으로 간주함. false로 설정하면 타입을 지정하지 않더라도 
    문제로 인식하지 않음.

     

    반응형
    LIST

    'TypeScript' 카테고리의 다른 글

    [TS] 자동세미콜론  (1) 2023.05.08
    [TS] 함수와 메서드  (0) 2023.04.17
    [TS] 객체와 타입  (0) 2023.04.11

    댓글

Designed by Tistory.