TS의 모듈 선언

여기서 고품질 Typescript 선언 파일을 작성하는 방법을 알아봅니다. ReactJS에서 코딩 중이고 SVG 파일을 가져오고 싶은데 IDE/tsc에 문제가 있습니다.

[ts] cannot find module './logo.svg'

빠른 복사 붙여넣기 솔루션을 위해 Stackoverflow를 사용할 때입니다.

하지만 잠시만 기다려 이 파일과 이 파일이 우리에게 어떤 역할을 하는지 이해해 보도록 하겠습니다.

모듈이란 무엇입니까?

TS/JS에서는 TS/JS로 작성된 앱을 모듈화하기 위해 많은 접근 방식을 취했습니다. 현재 가장 중요한 것은 ESM(일명 ES 모듈, ES6 모듈)입니다. 우리는 일반적으로 구문으로 이를 알고 있습니다.

원래 질문에 답하자면, ECMAScript 2015에 따른 TS/JS에서는 최상위 가져오기 또는 내보내기가 포함된 모든 파일이 모듈로 간주됩니다.

최상위 가져오기 또는 내보내기가 없는 경우:

1. 어디서나 구할 수 있습니다.
2. 스크립트로 취급됩니다.

모듈을 사용하는 이유는 무엇입니까?

더 이상 글로벌 네임스페이스 오염이 없습니다. 이는 다음을 의미합니다.

1. 모듈은 해당 범위 내에서 실행됩니다.
2. 내보내려는 항목을 명시적으로 내보내야 합니다.
3. 소비자는 자신이 다른 사람에게 노출한 내용을 다른 모듈에서 가져올 수 있습니다.

명명된 내보내기 및 기본 내보내기

모듈 해상도

TS 모듈 해석은 import 또는 require 문에서 문자열을 가져와 해당 문자열이 참조하는 파일을 결정하는 프로세스입니다.

TS에는 두 가지 전략이 있습니다.

1. 클래식:
   • 기본값입니다.
   • compilerOptions.module은 "CommonJS"가 아닙니다.
   • 이전 버전과의 호환성을 위해 포함되었습니다.
2. 노드:
   • CommonJS 모드에서 NodeJS가 작동하는 방식을 복제합니다.
   • .ts 및 .d.ts 파일에 대한 추가 검사.

그나저나 의도적으로 또는 실수로 변경할 수 있는 위치가 많이 있습니다(moduleResolution, baseUrl, paths, rootDirs).

모듈해상도

• TS가 모듈 지정자(import/export/require 문의 문자열 리터럴)를 디스크의 파일로 확인하는 방법을 제어합니다.
• 대상 런타임 또는 번들러에서 사용하는 모듈 확인자와 일치하도록 설정해야 합니다
.

예를 들어 ESM을 활용하도록 앱을 구축하는 경우(컴파일된 버전은 ESM을 사용함)compileOptions.module에서 "NodeNext"를 선택해야 합니다.

• 상대 경로 파일 확장자를 사용하는 한 TS는 문제를 해결할 수 있습니다(예: "./a.js"에서 import {}; // ✅ 모든 moduleResolution에서 작동함).
• ESM을 사용하도록 앱을 컴파일할 계획이라면 파일의 확장자를 지정해야 하며 확장자를 사용하지 않을 수 없습니다(예: 'a.mjs';에서 {} 가져오기).
• index.ts 파일이 있을 것으로 예상되는 디렉터리를 가져올 수도 있습니다.

참고: 해당 디렉토리 안에 package.json이 있는 경우. 그런 다음 TS는 기본 및 유형을 사용하여 유형을 선택합니다.

여기에서 자세히 알아보세요.

경로

따라서 기본적으로 baseUrl을 기준으로 조회 위치*s*에 가져오기를 다시 매핑하고, 그렇지 않으면 tsconfig 파일에 다시 매핑합니다. 이에 대한 가장 일반적인 사용 사례는 경로 별칭입니다.

[ts] cannot find module './logo.svg'

주의

런타임에는 아무런 의미가 없습니다. 이는 귀하의 소중한 번들러나 컴파일러가 이들을 올바르게 번들링하도록 관리해야 함을 의미합니다. 그리고 경로가 존재하지 않는 곳을 가리키는 경우 NodeJS에서 앱을 실행할 때 앱이 중단됩니다.

팁

대신 package.json의 가져오기(AKA Subpath 가져오기)를 활용할 수 있습니다.

기본 URL

• 기본 지정자를 확인할 기본 디렉터리¹모듈 이름
• node_modules의 조회보다 우선순위가 높습니다.
• 경로 사용 시 더 이상 설정할 필요가 없습니다.

루트디르

• 단일 루트 역할을 하는 많은 "가상" 디렉터리.
• 그런 다음 컴파일러는 마치 하나의 디렉토리에 병합된 것처럼 이러한 "가상" 디렉토리 내의 상대 모듈 가져오기를 확인할 수 있습니다.

컴파일된 JS

내보낸 JS 출력에 영향을 미치기 위해 다음을 수정할 수 있습니다.

• 컴파일러옵션.대상:
  • 이전 JavaScript 런타임에서 실행되도록 변환되는 JS 기능을 결정합니다.
  • 이 컴파일된 TS 코드를 실행할 브라우저/NodeJS/Electron과 같은 애플리케이션 요구 사항에 따라 결정됩니다.
• 컴파일러옵션.모듈:
  • 어떤 모듈 시스템 런타임을 사용할지.
  • 최신 NodeJS 프로젝트에는 "nodenext"를 사용하세요. 가장 가까운 package.json 파일을 읽고 "type" 값을 사용하여 CommonJS로 가야 할지 ESM으로 가야 할지 결정합니다.
  • 번들러와 함께 번들로 묶을 때는 "esnext"를 사용하세요.

주요 주제로 돌아가기

그래서 우리는 TS가 어떻게 생겼는지 전혀 모르는(해당 유형을 확인할 수 없는) .graphql 파일이나 기타 확장자를 가져오고 싶습니다. 이제 TS는 가져온 svg, graphql 또는 기타 파일의 모양을 알고 있습니다.

참조

1. Bare 지정자: 상대 경로나 절대 경로가 아닙니다 import 문의 모듈 이름입니다. 이는 일반적으로 프로젝트의 node_modules 또는 기타 구성된 위치에 있는 패키지 이름입니다. ↩

위 내용은 TS의 모듈 선언의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!