Pixi 6原生模塊如何獲取typescript類型補全？

Question

我正在使用本機 ES 模塊構建 PixiJS 游戲，而不使用 Parcel 或 Rollup 等打包器。

我還將 PixiJS 作為本機模塊加載，我在node_modules/pixi.js/dist/esm/pixi.js中找到了該模塊。 我現在可以使用：

import { Sprite } from './pixi.mjs' 

唯一的問題是 VS Code 無法識別隨附的index.d.ts文件（我在node_modules/pixi.js/index.d.ts中找到了這個文件），因此 PixiJS 的類型檢查無法正常工作，即使盡管代碼確實運行了！

我的文件夾結構非常簡單。 甚至沒有package.json 。

index.html
js/app.js
js/pixi.mjs
js/pixi.mjs.map
js/index.d.ts

如何強制 VS Code 讀取index.d.ts文件？

Answer 1

這種方法有幾個問題。

聲明文件丟失

首先，如果你查看node_modules/pixi.js/index.d.ts中 pixi.js 安裝的類型，你會發現它大部分是空的，它引用了以@pixi開頭的外部包。 這是由於pixi 項目中的 mono-repo 方法。

如果這些包安裝為npm 模塊（安裝 pixi.js 后自動發生）並且你需要一個package.json以便 TypeScript 通過它們的名稱 package 找到它們，你將只完成這些引用。

導入的類和類型之間的鏈接

其次，VS Code（或者更確切地說，TypeScript 引擎）一旦將文件pixi.mjs和index.d.ts從node_modules文件夾中移出，就無法關聯它們。 盡管這些類的名稱相同（Sprite、Container 等），TypeScript 無法斷定它們指的是同一事物。

由於node_modules/pixi.js/package.json中的types屬性，使用 npm 時此工作流是自動的。 或者，您可以將文件index.d.ts重命名為pixi.mjs.d.ts ，TypeScript 將通過文件名關聯它們。

這是TypeScript能看懂的文件夾結構：

index.html
js/app.js
js/pixi.mjs
js/pixi.mjs.d.ts
js/pixi.mjs.map

TypeScript JS文件中的錯誤檢測

最后，之前的修復只會提供類型推斷，而不會在 js 文件中進行錯誤檢測。 如果想讓 VS Code 報錯，需要創建一個tsconfig.json文件，設置如下：

{
  "compilerOptions": {
    "noEmit": true,
    "checkJs": true,
  },
  "include": ["js/*.js"],
}