Bootstrap 4 TypeScript 類型定義無法編譯 - 找不到模塊“popper.js”

Question

我正在嘗試建立一個 TypeScript 項目，並讓 Bootstrap 4 與 Visual Studio Code 中的Popper 、 jQuery和Knockout一起工作。

我安裝了淘汰賽、jquery 和 bootstrap 類型定義，

npm install -–save @types/knockout
npm install -–save @types/jquery
npm install --save @types/bootstrap

在 require.js 配置中引用了 JS 文件

declare var require: any;
require.config({
    paths: {
        "knockout": "externals/knockout-3.5.0",
        "jquery": "externals/jquery-3.3.1.min",
        "popper.js": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
        "bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    }
})

我的tsconfig.json是這樣的：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { 
            "*": ["types/*"] 
        },
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files":[
        "src/require-config.ts",
        "src/hello.ts"
    ]
}

我去編譯項目，我收到以下錯誤：

node_modules/@types/bootstrap/index.d.ts:9:25 - error TS2307: Cannot find module 'popper.js'.

9 import * as Popper from "popper.js";
                          ~~~~~~~~~~~

Found 1 error.

The terminal process terminated with exit code: 1

看來我的 Bootstrap 類型定義文件無法編譯，因為它找不到 popper.js 模塊。

該popper.js模塊是我在@types文件夾

node_modules
 |-@types
 |  |- bootstrap
 |     |-index.d.ts (this is failing)
 |- popper.js
    |- index.d.ts (popper.js type definition)

我如何告訴 TypeScript 編譯器引導類型定義正在尋找的 popper.js 位於層次結構中的更高位置？

我什至無法找到任何接近於此的答案。 所以，要么我偶然發現了一個沒有人遇到過的錯誤（不太可能），要么是 Typescript 的新手，我沒有正確設置我的環境並錯過了其他人都得到的非常基本的設置步驟，因此沒有人曾經遇到過不得不問（很有可能）。

我能做些什么來解決這個問題？

Answer 1

兩種選擇：

• 刪除"module": "amd"配置選項或
• 添加"moduleResolution": "node"選項。

第二個選項如下所示：

"moduleResolution": "node",
"module": "amd",

為什么這些選項有效？

簡而言之，當我們使用amd模塊時，默認的模塊解析策略是Classic而不是Node 。 兩者之間的重要區別在於Node 策略將目錄名稱識別為模塊，而 Classic 策略則不然。

這里有關於模塊解析策略的更多信息。

Answer 2

這是我遇到問題時出現的第一個結果。

這個 Github 評論幫助了我。

這個庫需要DOM庫（瀏覽器環境）

您應該將 dom 和 'es2017' 添加到 tsconfig.json 中的 compilerOptions.lib。

我只在我的tsconfig.json添加了"lib": [ "DOM" ]以使其對我tsconfig.json ，我仍然針對es5 。