Module设为none时，TypeScript如何获取Pixi.js类型信息？

方案1：利用官方类型包（推荐） #

不需要安装pixi.js本体，只需要安装其类型声明包，就能让TS识别全局PIXI对象：

1. 安装类型包：

npm install @types/pixi.js --save-dev

2. 配置TS：
   • 要么在tsconfig.json的compilerOptions里添加"types": ["pixi.js"]，让TS自动加载该类型包的全局声明；
   • 要么在你的全局TS文件顶部添加一行引用指令：

     /// <reference types="pixi.js" />
     

3. 保持tsconfig.json的module设为none，其他编译选项（如target）保持原有兼容浏览器的配置即可。

注：之前你添加引用路径无效，是因为误用了/// <reference path="..." />——这个是指向本地文件的，而npm安装的类型包需要用/// <reference types="..." />来引入。

方案2：自定义全局类型声明（灵活适配） #

如果官方类型包不符合你的PIXI版本，或者只需要用到部分类型，可以自己写精简的声明文件，比declare var PIXI: any;更有类型检查能力：

1. 在项目根目录创建pixi-global.d.ts文件，内容示例（按需补充你用到的API）：

declare namespace PIXI {
  namespace settings {
    const TARGET_FPMS: number;
    // 按需添加你用到的其他配置项
    const RESOLUTION: number;
  }
  class Application {
    constructor(options?: { width?: number; height?: number });
    ticker: { add(callback: () => void): void };
    view: HTMLCanvasElement;
  }
  // 按需添加更多你用到的PIXI类、方法、属性
}

2. 在tsconfig.json的include字段里添加这个文件路径，比如：

"include": ["./src/**/*", "./pixi-global.d.ts"]

关键注意事项 #

• 浏览器端必须通过<script>标签正常引入pixi.js，保证运行时全局PIXI对象存在——TS只是做静态类型检查，不会影响运行时的全局变量机制；
• 保持原有编译流程：tsc编译后输出原JS文件，修改后刷新浏览器即可生效，完全不需要引入打包工具。

内容的提问来源于stack exchange，提问作者Gillespie