ไม่พบไฟล์ประกาศสำหรับโมดูล 'module-name' '/path/to/module-name.js' มีประเภท 'any'

ฉันอ่านการทำงานของความละเอียดโมดูล TypeScript

ฉันมีพื้นที่เก็บข้อมูลต่อไปนี้: @ TS-สแต็ค / ดิ หลังจากรวบรวมโครงสร้างไดเรกทอรีดังต่อไปนี้:

├── dist
│   ├── annotations.d.ts
│   ├── annotations.js
│   ├── index.d.ts
│   ├── index.js
│   ├── injector.d.ts
│   ├── injector.js
│   ├── profiler.d.ts
│   ├── profiler.js
│   ├── providers.d.ts
│   ├── providers.js
│   ├── util.d.ts
│   └── util.js
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── annotations.ts
│   ├── index.ts
│   ├── injector.ts
│   ├── profiler.ts
│   ├── providers.ts
│   └── util.ts
└── tsconfig.json

ใน package.json "main": "dist/index.js"ของฉันฉันเขียน

ใน Node.js ทุกอย่างทำงานได้ดี แต่ TypeScript:

import {Injector} from '@ts-stack/di';

ไม่พบไฟล์ประกาศสำหรับโมดูล '@ ts-stack / di' '/path/to/node_modules/@ts-stack/di/dist/index.js' มีประเภท 'any'

และถ้าฉันนำเข้าดังต่อไปนี้ทุกอย่างทำงานได้:

import {Injector} from '/path/to/node_modules/@ts-stack/di/dist/index.js';

ผมทำอะไรผิดหรือเปล่า?

นี่คือสองวิธีแก้ไขอื่น ๆ

เมื่อโมดูลไม่ใช่ของคุณ - ให้ลองติดตั้งประเภทจาก@types:

npm install -D @types/module-name

หากข้อผิดพลาดในการติดตั้งข้างต้น - ลองเปลี่ยนimportคำสั่งเป็นrequire:

// import * as yourModuleName from 'module-name';
const yourModuleName = require('module-name');

หากคุณกำลังนำเข้าโมดูลของบุคคลที่สาม'foo'ที่ไม่มีการพิมพ์ใด ๆ ไม่ว่าจะเป็นในไลบรารีเองหรือใน@types/fooแพ็คเกจ (สร้างขึ้นจากที่เก็บDefinitelyTyped ) จากนั้นคุณสามารถทำให้ข้อผิดพลาดนี้หายไปโดยการประกาศโมดูลใน ไฟล์ที่มี.d.tsนามสกุล typescript มองหา.d.tsไฟล์ในสถานที่เดียวกันกับที่มันจะมีลักษณะปกติ.tsไฟล์: ตามที่ระบุไว้ภายใต้ "ไฟล์", "รวมถึง" และ "ยกเว้น" tsconfig.jsonใน

// foo.d.ts
declare module 'foo';

จากนั้นเมื่อคุณนำเข้ามันจะเป็นเพียงแค่พิมพ์เป็น fooany

อีกทางเลือกหนึ่งถ้าคุณต้องการพิมพ์งานของคุณเองคุณสามารถทำได้เช่นกัน:

// foo.d.ts
declare module 'foo' {
    export function getRandomNumber(): number
} 

จากนั้นจะรวบรวมอย่างถูกต้อง:

import { getRandomNumber } from 'foo';
const x = getRandomNumber(); // x is inferred as number

คุณไม่จำเป็นต้องให้การพิมพ์เต็มรูปแบบสำหรับโมดูลเพียงแค่บิตที่คุณใช้ (และต้องการการพิมพ์ที่เหมาะสม) ดังนั้นจึงเป็นเรื่องง่ายโดยเฉพาะอย่างยิ่งถ้าคุณใช้ API จำนวนเล็กน้อย

ในทางตรงกันข้ามถ้าคุณไม่สนใจเกี่ยวกับการพิมพ์ของไลบรารีภายนอกและต้องการให้ไลบรารีทั้งหมดที่ไม่มีการพิมพ์นำเข้าเป็นanyคุณสามารถเพิ่มสิ่งนี้ลงในไฟล์ที่มี.d.tsนามสกุล:

declare module '*';

ข้อดี (และข้อเสีย) ของสิ่งนี้คือคุณสามารถนำเข้าอะไรก็ได้และ TS จะรวบรวม

หากคุณต้องการการแก้ไขด่วนเพียงเพิ่มสิ่งนี้ก่อนบรรทัดการนำเข้าของคุณ:

// @ts-ignore

ความรู้สึกว่าเมื่อคุณกำลังมองออกไปสำหรับสองวันและพบว่ามันเช่นนี้เพียง แต่เอา.jsจาก"main": "dist/index.js"ในpackage.jsonและทุกอย่างทำงานได้ดี!

"main": "dist/index",

UPD : คำตอบนี้ญาติถ้าคุณมีแพคเกจ NPM ของคุณเองหากไม่ได้ - ดูคำตอบของฉันด้านล่าง

และหากคำตอบข้างต้นไม่ได้รับการแก้ไขให้นำเข้าโมดูลของคุณลองเพิ่มtypingsในpackage.json:

"main": "dist/index",
"typings": "dist/index",

แน่นอนที่นี่โฟลเดอร์dist- เป็นที่เก็บไฟล์โมดูลของคุณ

โดยทั่วไปแล้ว TypeScript จะใช้กฎและการเพิ่มประเภทให้กับรหัสของคุณเพื่อให้ชัดเจนและแม่นยำยิ่งขึ้นเนื่องจากไม่มีข้อ จำกัด ใน Javascript TypeScript ต้องการให้คุณอธิบายข้อมูลของคุณเพื่อให้คอมไพเลอร์สามารถตรวจสอบรหัสของคุณและค้นหาข้อผิดพลาด คอมไพเลอร์จะแจ้งให้คุณทราบว่าคุณกำลังใช้ประเภทที่ไม่ตรงกันถ้าคุณไม่อยู่ในขอบเขตของคุณหรือคุณพยายามที่จะคืนค่าประเภทอื่น ดังนั้นเมื่อคุณใช้ไลบรารีและโมดูลภายนอกด้วย TypeScript พวกเขาจำเป็นต้องมีไฟล์ที่อธิบายประเภทในรหัสนั้น ไฟล์เหล่านั้นจะเรียกว่าประเภทไฟล์ประกาศd.tsที่มีการขยาย ชนิดการประกาศส่วนใหญ่สำหรับโมดูล npm นั้นถูกเขียนไปแล้วและคุณสามารถรวมมันได้โดยที่npm install @types/module_name(module_name เป็นชื่อของโมดูลที่มีประเภทที่คุณต้องการรวมไว้)

อย่างไรก็ตามมีโมดูลที่ไม่มีคำจำกัดความประเภทและเพื่อให้ข้อผิดพลาดหายไปและนำเข้าโมดูลโดยใช้import * as module_name from 'module-name'สร้างโฟลเดอร์typingsในรากของโครงการของคุณภายในสร้างโฟลเดอร์ใหม่ด้วยชื่อโมดูลของคุณและในนั้น โฟลเดอร์สร้างไฟล์และเขียนmodule_name.d.ts declare module 'module_name'หลังจากนี้ไปที่tsconfig.jsonไฟล์ของคุณและเพิ่ม"typeRoots": [ "../../typings", "../../node_modules/@types"]ในcompilerOptions(พร้อมพา ธ สัมพันธ์ที่เหมาะสมไปยังโฟลเดอร์ของคุณ) เพื่อให้ TypeScript ทราบว่าจะสามารถหาคำจำกัดความประเภทของไลบรารีและโมดูลของคุณและเพิ่มคุณสมบัติใหม่"exclude": ["../../node_modules", "../../typings"]ลงในไฟล์ได้ นี่คือตัวอย่างลักษณะของไฟล์ tsconfig.json ของคุณ:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": "../dst/",
        "target": "ESNEXT",
        "typeRoots": [
            "../../typings",
            "../../node_modules/@types"
        ]
    },
    "lib": [
            "es2016"
    ],
    "exclude": [
        "../../node_modules",
        "../../typings"
    ]
}

เมื่อทำสิ่งนี้ข้อผิดพลาดจะหายไปและคุณจะสามารถปฏิบัติตามกฎ ES6 และ TypeScript ล่าสุดได้

สำหรับคนอื่นที่อ่านข้อความนี้ลองเปลี่ยนชื่อไฟล์. js เป็น .ts

แก้ไข: คุณสามารถเพิ่มลง"allowJs": trueในไฟล์ tsconfig ของคุณได้

วิธีนี้ใช้ได้กับฉัน:

declare module 'Injector';

  {
    "compilerOptions": {
        "strictNullChecks": true,
        "moduleResolution": "node",
        "jsx": "react",
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports":true,
        "target": "es5",
        "module": "ES2015",
        "declaration": true,
        "outDir": "./lib",
        "noImplicitAny": true,
        "importHelpers": true
      },
      "include": [
        "src/**/*",
        "index.d.ts",   // declaration file path
      ],
      "compileOnSave": false
    }

- แก้ไข: เครื่องหมายคำพูดที่จำเป็นรอบชื่อโมดูล

ฉันมีปัญหาเดียวกันโดยใช้โมดูลโหนดกับแอปพลิเคชันตอบโต้ที่เขียนด้วย typescript npm i --save my-moduleโมดูลที่ได้รับการติดตั้งเรียบร้อยแล้วโดยใช้ มันเขียนใน javascript และส่งออกClientชั้นเรียน

ด้วย:

import * as MyModule from 'my-module';
let client: MyModule.Client = new MyModule.Client();

การรวบรวมล้มเหลวโดยมีข้อผิดพลาด:

Could not find a declaration file for module 'my-module'. 
'[...]/node_modules/my-module/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/my-module` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-module';`

@types/my-moduleไม่มีอยู่ดังนั้นฉันจึงเพิ่มmy-module.d.tsไฟล์ถัดจากไฟล์ที่my-moduleนำเข้าโดยมีบรรทัดที่แนะนำ ฉันได้รับข้อผิดพลาด:

Namespace '"my-module"' has no exported member 'Client'.

ลูกค้าจะถูกส่งออกและใช้งานได้ตามปกติถ้าฉันใช้ในแอพ js นอกจากนี้ข้อความก่อนหน้าบอกฉันว่าคอมไพเลอร์กำลังมองหาไฟล์ที่ถูกต้อง ( /node_modules/my-module/lib/index.jsถูกกำหนดในmy-module/package.json "main"องค์ประกอบ)

ฉันแก้ไขปัญหาด้วยการบอกคอมไพเลอร์ฉันไม่สนใจโดยปริยายanyนั่นคือฉันตั้งค่าfalseเป็นบรรทัดต่อไปนี้ของtsconfig.jsonไฟล์:

    "noImplicitAny": false,

ง่าย ๆ ที่จะแก้ไขคุณคือ:

// example.d.ts
declare module 'foo';

หากคุณต้องการประกาศส่วนต่อประสานของวัตถุ (แนะนำสำหรับโครงการขนาดใหญ่) คุณสามารถใช้:

// example.d.ts
declare module 'foo'{
    // example
    export function getName(): string
}

ใช้อย่างไร ที่เรียบง่าย ..

const x = require('foo') // or import x from 'foo'
x.getName() // intellisense can read this

ฉันได้รับสิ่งนี้เช่นกันทำให้ฉันงุนงงอยู่พักหนึ่งแม้จะมีโมดูลและประเภทที่ติดตั้งไว้แล้วและโหลด IDE ของฉันอีกหลายครั้ง

สิ่งที่แก้ไขในกรณีของฉันคือยุติกระบวนการเทอร์มินัลการลบการnode_modulesล้างแคชตัวจัดการแพ็กเกจโหนดและทำการใหม่installจากนั้นโหลดเอดิเตอร์อีกครั้ง

น่าเสียดายที่อยู่นอกมือของเราไม่ว่านักเขียนแพ็คเกจจะรบกวนไฟล์ประกาศ สิ่งที่ฉันมักจะทำคือมีไฟล์index.d.tsที่จะมีไฟล์ประกาศทั้งหมดที่หายไปจากแพ็คเกจต่างๆ:

Index.ts:

declare module 'v-tooltip';
declare module 'parse5';
declare module 'emoji-mart-vue-fast';

นี่คือสิ่งที่ทำงานแบบฉัน

npm install --save readline

ฉันลองทุกอย่างที่นี่ แต่สำหรับฉันมันเป็นปัญหาที่แตกต่างอย่างสิ้นเชิง: ฉันต้องลบออกจาก*.d.tsคำสั่งการนำเข้าของฉัน:

import { SomeModuleType } from '3rd-party-module';

หลังจากลบข้อผิดพลาดออกไป ...

การทำให้กระจ่าง : เมื่อเราประกาศโมดูลใน*.d.tsไฟล์มันจะถูกรับโดยอัตโนมัติโดยคอมไพเลอร์ typescript เป็นโมดูลล้อมรอบ (โมดูลที่คุณไม่จำเป็นต้องนำเข้าอย่างชัดเจน) เมื่อเราระบุimport ... from ...ไฟล์ตอนนี้จะกลายเป็นโมดูลปกติ (ES6) และด้วยเหตุนี้จะไม่ถูกเลือกโดยอัตโนมัติ ดังนั้นหากคุณยังต้องการให้มันทำงานเป็นโมดูลโดยรอบให้ใช้สไตล์การนำเข้าที่แตกต่างกันดังนี้:

type MyType: import('3rd-party-module').SomeModuleType;

เพียงคุณสามารถนำเข้าโดยใช้รหัสดังต่อไปนี้:

var _ = require('your_module_name');