TypeScript：具有“無”模塊設置的 Pixi.js 類型

Question

我有一個在瀏覽器中運行的 100% JS 項目，其中包含大約 20 個 JS 文件，這些文件在全局 scope 中具有所有 function 名稱。目前我可以只修改一個 JS 文件並刷新並立即看到更改。

但是，我想要 static 類型檢查的好處； 輸入 TypeScript。我為變量和函數添加了類型注釋，並將module設置為none 。 這很好用！ tsc將讀取 the.ts，進行類型檢查，然后發出我之前擁有的 same.js，我可以在瀏覽器中運行而無需修改。

問題是當我想與第 3 方庫集成時。 在我的例子中， pixi.js 。

如果我嘗試做類似let x = PIXI.settings.TARGET_FPMS;的事情 ，然后 tsc 抱怨Cannot find name 'PIXI' 。 我嘗試添加/// <reference path="pixi.min.js"/> ，當路徑解析時，它仍然找不到名稱。

在線解決方案建議我執行npm install pixi.js然后import * as PIXI from 'pixi.js' 。 但是，如果我這樣做，我就不能再使用none模塊設置，這意味着現在我必須在各處放置 import 和 export 語句，這意味着 emitted.js 文件現在具有瀏覽器不兼容的require或import語句，這意味着現在我需要 webpack 或其他東西來擺脫這些，等等......復雜性正在膨脹。

有沒有辦法讓 TypeScript 訪問 pixi.js 類型信息而無需所有導入/導出/模塊/webpack 業務？ 基本上我只是想讓tsc檢查事物的形狀是否正確，而不從根本上改變當前的應用程序架構。

除此之外，似乎唯一的解決方案是添加： declare var PIXI: any; 在文件的某處。

Answer 1

來自HN 帖子：

這是您的用例的最小“重現”：tsconfig.json

{
  "include": ["index.d.ts"],
  "compilerOptions": {
    "target": "es2015",
    "lib": ["es2015", "dom"],
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

索引.d.ts

import * as PIXI from 'pixi.js'

declare global {
  interface Window {
    PIXI: typeof PIXI
  }
}

索引.ts

console.log(window.PIXI)

仍然有一個導入，但因為它在 .d.ts 文件中，所以它不會包含在運行時代碼中。