VScode javascript Intelisense用于不使用导入的打字脚本库

xqnpmsa8  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(95)

我正在开发一个基于网络的javascript应用程序,它使用了一个相对较大的库(特别是pixi.js)。这意味着InteliSense对于内联文档和语法提示都非常有用。
到目前为止,我已经成功地激活了InteliSense,方法是下载该库的npm包,并导入其原始的typescript文件,就像我在处理node.js项目一样:import * as PIXI from 'pixi.js'
问题是,当试图在网络中运行脚本时,这会使脚本崩溃。这意味着我必须在运行脚本和拥有InteliSense之间做出选择,而InteliSense并不是最优的。

是否有办法不使用import关键字也能达到同样的结果?(因此不会使脚本崩溃)

我还尝试了三重斜杠引用,它对我没有任何作用///<reference path="node_modules/pixi.js/lib/index.d.ts" />
编辑:这是我的package.json文件

{
  "dependencies": {
    "pixi.js": "^5.0.0"
  },
  "devDependencies": {
    "@types/pixi.js": "^5.0.0",
    "pixi.js": "^5.0.0"
  }
}
dtcbnfnu

dtcbnfnu1#

你说你使用这个库是通过直接包含一个script标签来实现的,这说明你没有使用像Vite、Webpack、Rollup、Parcel等这样的捆绑包(这很好),你可以使用捆绑包来解决这个问题;但你不应该这么做。
this answer的帮助下,我已经知道如何将PIXI命名空间类型公开为PIXI(以匹配lib创建的全局变量):
创建一个.d.ts文件来扩充Pixi.js的类型定义,例如augment.pixi.d.ts,包含以下内容:

// Import the PIXI definitions
import type * as PIXI from "pixi.js";
// Export it as a namespace
export as namespace PIXI;
// Expose that namespace globally, to match the global
// variable pixi.js creates
export = PIXI;

现在,在你的TypeScript代码中的任何地方,TypeScript都知道库定义的PIXI全局变量,并且拥有正确的类型。

console.log(PIXI.
//              ^−−−− cursor here

... TypeScript知道自动为您建议什么(ALPHA_MODES等):

下面是我创建的完整的最小项目,以确保它的工作:
package.json

{
    "name": "pixitest",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "tsc --project tsconfig.json"
    },
    "devDependencies": {
        "@types/pixi.js": "^5.0.0",
        "typescript": "^4.9.5"
    }
}

augment.pixi.d.ts,如上所述。
tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "target": "es2018",
        "outDir": "dist"
    }
}

main.ts

console.log(PIXI.ALPHA_MODES.PMA);

当我执行npm run build时,dist只包含main.js,它(在本例中)只是来自main.ts的代码(因为main.ts中没有任何类型注解):

console.log(PIXI.ALPHA_MODES.PMA);

相关问题