javascript - Typescript 找不到名稱 window 或 document

對於任何情況：

document.getElementById('body');
// or
window.document.getElementById('body');

我得到 錯誤 TS2304: 找不到名稱 'window'。

我在 tsconfig.json 中是否缺少我應該安裝的定義檔案？

當我在執行 tsc 和在 vscode 中時，我會收到這個訊息

tsconfig.json：

{
    "compilerOptions": {
        "allowJs": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "sourceMap": true,
        "suppressImplicitAnyIndexErrors": true,
        "target": "ES2016",
        "typeRoots": [
            "node_modules/@types/",
            "typings/index.d.ts"
        ]
    },
    "exclude": [
        "node_modules",
        "**/*-aot.ts"
    ]
}

我的答案：對於 tsconfig.json 的使用，我的目標是 es5，並使用 lib: ["es2015", "dom"]

答案＃1

使用

"lib": ["dom"]

在 tsconfig.json 中

例如

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["./src/**/*"]
}

答案＃2

看起來這個問題是由於指定了 ES2016 引起的。
你是有特別原因要指定它嗎？如果你指定 es6，這個錯誤可能就會消失。

另一個選擇是指定編譯器要使用的函式庫：

tsc -t ES2016 --lib "ES2016","DOM" ./your_file.ts

這也應該會讓錯誤消失。

我不確定為什麼這些庫預設沒有被使用，在編譯器選項的文件中，對 --lib 選項的說明是：

注意：如果未指定 --lib，將注入預設的程式庫。注入的預設程式庫為：
► 對於 --target ES5：DOM、ES5、ScriptHost
► 對於 --target ES6：DOM、ES6、DOM.Iterable、ScriptHost

但是它並未說明當目標為 ES2016 時的預設函式庫有哪些。
這可能是一個錯誤，試著開一個問題回報，如果你這麼做，請在這裡分享連結。

答案＃3

如果你使用 bun 而不是 node，那麼你需要使用 bun add @types/web -D。

問題已在 https://github.com/oven-sh/bun/issues/3030 上說明

解決方案

https://github.com/oven-sh/bun/issues/463#issuecomment-1636727109

注意：如 GitHub 問題中所解釋的，在你的 tsconfig.json 中添加類型引用似乎不是強制性的。僅安裝依賴項似乎就足以消除錯誤。

答案＃4

更新：為了避免必須將這些引用添加到每個檔案中，請參見 stackoverflow.com/a/77103144

我當時在使用 bun，並且在相關的 TypeScript 檔案的頂部添加以下三斜線指令解決了這個問題：

/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

這是因為設定 "types": ["bun-types"] 意味著 TypeScript 將會忽略其他全域型別定義，包括 lib: ["dom"]。

對於其他全域型別定義庫，如 webworker，情況也是一樣。

請參閱 bun 的文件，了解如何添加 DOM 類型以獲取最新資訊。