[typescript] TypeScript 2 : 유형이 지정되지 않은 npm 모듈에 대한 사용자 지정 입력

불행히도 이러한 사항은 현재 잘 문서화되어 있지 않지만 작동 할 수 있다고하더라도 구성을 검토하여 각 부분이 수행하는 작업과 typescript가 입력을 처리하고로드하는 방법과 관련되는 방식을 이해하도록하겠습니다.

먼저 수신 한 오류를 살펴 보겠습니다.

error TS2688: Cannot find type definition file for 'lodash'.

이 오류는 실제로 가져 오기 또는 참조 또는 ts 파일의 어디에서나 lodash를 사용하려는 시도에서 발생하지 않습니다. 오히려 typeRoots및 types속성 을 사용하는 방법에 대한 오해에서 비롯된 것이므로 이에 대해 좀 더 자세히 살펴 보겠습니다.

에 대한 건 typeRoots:[]과 types:[]속성들이 있다는 것입니다 NOT 임의의 선언 (로드 범용 방법 *.d.ts) 파일을.

이 두 속성은 NPM 패키지 에서 타이핑 선언을 패키징하고로드 할 수있는 새로운 TS 2.0 기능과 직접 관련이 있습니다. .

이는 NPM 형식의 폴더 (예 : package.json 또는 index.d.ts 포함 된 폴더)에서만 작동한다는 점을 이해하는 것이 매우 중요합니다 .

기본값 typeRoots은 다음과 같습니다.

{
   "typeRoots" : ["node_modules/@types"]
}

기본적으로 이것은 typescript가 node_modules/@types폴더 로 이동하여 찾은 모든 하위 폴더를 npm 패키지 로로드하려고 시도 함을 의미 합니다 .

폴더에 npm 패키지와 같은 구조가 없으면 이것이 실패한다는 것을 이해하는 것이 중요합니다.

이것은 귀하의 경우에 일어나는 일이며 초기 오류의 원인입니다.

typeRoot를 다음으로 전환했습니다.

{
    "typeRoots" : ["./typings"]
}

즉, typescript는 이제 ./typings폴더에서 하위 폴더를 검색합니다. 찾은 각 하위 폴더를 npm 모듈로로드하려고합니다.

따라서 방금 typeRoots가리 키도록 설정 ./typings했지만 아직 types:[]속성 설정 이없는 것으로 가정 해 봅시다 . 다음과 같은 오류가 표시 될 수 있습니다.

error TS2688: Cannot find type definition file for 'custom'.
error TS2688: Cannot find type definition file for 'global'.

이것은 폴더를 tsc스캔 ./typings하고 하위 폴더 custom와 global. 그런 다음이를 npm 패키지 유형 입력으로 해석하려고 시도하지만 이 폴더에 index.d.ts또는 이 없으므로 package.json오류가 발생합니다.

이제 types: ['lodash']설정 하려는 속성 에 대해 조금 이야기 해 봅시다 . 이것은 무엇을합니까? 기본적으로 typescript는 내에서 찾은 모든 하위 폴더를 로드 합니다 typeRoots. types:속성 을 지정하면 특정 하위 폴더 만로드됩니다.

귀하의 경우에는 ./typings/lodash폴더 를로드하라고 말하고 있지만 존재하지 않습니다. 이것이 당신이 얻는 이유입니다 :

error TS2688: Cannot find type definition file for 'lodash'

그래서 우리가 배운 것을 요약합시다. 소개 2.0 타이프 라이터 typeRoots와 types패키지로 로딩 선언 파일 NPM 패키지 . d.tsnpm 패키지 규칙을 따르는 폴더에 포함되지 않은 사용자 지정 입력 또는 단일 느슨한 파일이있는 경우이 두 가지 새 속성은 사용하려는 것이 아닙니다. Typescript 2.0은 이것이 소비되는 방식을 실제로 변경하지 않습니다. 여러 표준 방법 중 하나로 컴파일 컨텍스트에 이러한 파일을 포함하기 만하면됩니다.

1. .ts파일 에 직접 포함 :
   ///<reference path="../typings/custom/lodash.d.ts" />

2. ./typings/custom/lodash.d.ts귀하의 files: []재산에 포함 됩니다 .

3. 포함 ./typings/index.d.ts당신의 files: []다음 재귀 적으로 다른 typings를 포함하는 재산 (.

4. 추가 ./typings/**로includes:

바라건대,이 토론을 기반으로하여 tsconfig.json만든 변경 사항이 다시 작동 하는 이유를 알 수있을 것입니다.

편집하다:

내가 언급하는 것을 잊은 한 가지는 typeRootsand typesproperty는 전역 선언 의 자동 로딩 에만 유용하다는 것입니다 .

예를 들어

npm install @types/jquery

그리고 당신이 JQuery와 유형 패키지가 자동으로로드됩니다 그런 다음, 기본 tsconfig을 사용하고 $더 이상을 할 필요 wihtout 모든 스크립트를 통해 사용할 수 있습니다 ///<reference/>또는import

이 typeRoots:[]속성은 유형 패키지 가 자동으로로드 되는 위치에서 추가 위치를 추가하기위한 것입니다.

types:[]재산의 주요 사용 사례는 (빈 배열로 설정하여) 자동로드 동작을 비활성화하는 것입니다, 다음 만이 전 세계적으로 포함 할 특정 유형을 나열.

다양한 유형의 패키지를로드하는 다른 방법 typeRoots은 new ///<reference types="jquery" />지시문 을 사용하는 것 입니다. 알아 차리는 types대신 path. 다시 말하지만 이것은 전역 선언 파일, 일반적으로 import/export.

자, 여기에 typeRoots. 나는 그것이 typeRoots모듈의 글로벌 포함에 관한 것이라고 말했습니다 . 그러나 설정에 @types/folder관계없이 표준 모듈 해상도에도 포함됩니다 typeRoots.

특히, 명시 적으로 가져 오기 모듈은 항상 모든 우회 includes, excludes, files, typeRoots및 types옵션. 그래서 당신이 할 때 :

import {MyType} from 'my-module';

위에서 언급 한 모든 속성은 완전히 무시됩니다. 시 관련 특성 모듈의 해상도가 있습니다 baseUrl, paths그리고 moduleResolution.

사용하는 경우 기본적으로, node모듈의 해상도를,이 파일 이름에 대한 검색을 시작합니다 my-module.ts, my-module.tsx, my-module.d.ts폴더에서 시작하면 가리키는 baseUrl구성.

이 파일을 찾지 못하면, 그것은라는 폴더를 찾습니다 my-module다음 검색 package.json로모그래퍼 typings가있는 경우, 재산 package.json또는 더 typings그것을 말하는 내부 속성이있는 파일은 다음 검색합니다로드하지 않으려면 index.ts/tsx/d.ts해당 폴더 내에서.

그래도 성공하지 못하면 .NET node_modulesFramework에서 시작 하는 폴더 에서 이와 동일한 항목을 검색 합니다 baseUrl/node_modules.

또한 이러한 항목을 찾지 못하면 baseUrl/node_modules/@types동일한 항목을 모두 검색 합니다.

아직 아무것도 발견하지 않은 경우는 상위 디렉토리로 이동 시작하고 검색합니다 node_modules하고 node_modules/@types있다. 파일 시스템의 루트에 도달 할 때까지 디렉토리를 계속 올라갑니다 (프로젝트 외부에 노드 모듈을 가져 오는 경우도 포함).

제가 강조하고 싶은 것은 모듈 해상도가 설정 한 것을 완전히 무시한다는 typeRoots것입니다. 따라서 구성한 경우 typeRoots: ["./my-types"]명시 적 모듈 확인 중에 검색되지 않습니다. 더 이상 가져 오거나 참조 할 필요없이 전체 응용 프로그램에서 사용할 수 있도록하려는 전역 정의 파일을 저장할 수있는 폴더 역할 만합니다.

마지막으로 경로 매핑 (즉, paths속성)으로 모듈 동작을 재정의 할 수 있습니다 . 예를 들어, typeRoots모듈을 해결하려고 할 때 사용자 정의 를 참조하지 않는다고 언급했습니다 . 그러나 마음에 들면 다음과 같이이 동작을 수행 할 수 있습니다.

"paths" :{
     "*": ["my-custom-types/*", "*"]
 }

이 작업은 왼쪽과 일치하는 모든 가져 오기에 대해 가져 오기를 포함하기 전에 오른쪽에서와 같이 가져 오기를 수정 해보십시오 ( *오른쪽에있는 것은 초기 가져 오기 문자열을 나타냅니다. 예를 들어 가져 오는 경우 :

import {MyType} from 'my-types';

먼저 다음과 같이 작성한 것처럼 가져 오기를 시도합니다.

import {MyType} from 'my-custom-types/my-types'

그런 다음 찾지 못하면 접두사없이 다시 시도합니다 (배열의 두 번째 항목 *은 초기 가져 오기를 의미합니다.

따라서 이러한 방법으로 추가 폴더를 추가하여 사용자 정의 선언 파일 또는 .ts원하는 사용자 정의 모듈 을 검색 할 수 import있습니다.

특정 모듈에 대한 사용자 지정 매핑을 만들 수도 있습니다.

"paths" :{
   "*": ["my-types", "some/custom/folder/location/my-awesome-types-file"]
 }

이것은 당신이 할 수 있도록

import {MyType} from 'my-types';

그러나 다음에서 해당 유형을 읽으십시오. some/custom/folder/location/my-awesome-types-file.d.ts