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 文件中，所以它不会包含在运行时代码中。