Typescript

Question

我正在尝试为我的 Vector2 class 创建一些 toPixiPoint() 扩展，但是当运行 npm 构建并在浏览器中查看它时。我在控制台中收到以下错误。

我只在浏览器中打开构建时出现错误。 vs 代码中没有错误，并且该函数会自动完成。这意味着什么？奇怪的是我的同事在他的项目中使用了这个完全相同的代码并且它工作正常？我对打字稿相当陌生，只是想不通。

globals.d.ts

import { Vector2 } from "~/ts/Physics/Vector2";
import * as PIXI from 'pixi.js';

declare module '~/ts/Physics/Vector2' {
    interface Vector2 {
        toPixiPoint(): PIXI.Point;
    }
}

ExtensionMethods.ts

import { Vector2 } from "~/ts/Physics/Vector2";
import * as PIXI from 'pixi.js';

Vector2.prototype.toPixiPoint = function() : PIXI.Point {
    return new PIXI.Point(this.x, this.y);
}

调用放在Tank.TS

的构造函数中

let v = new Vector2(0,0);
console.log(v.toPixiPoint());

TSConfig

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~*": ["./*"]
    },
    "lib": ["es2015.core", "es2015.promise", "es2015.collection", "es2015.iterable", "dom"]
  },
  "include": ["src/**/*"]
}

Package.JSON

{
    "name": "typescriptgame",
    "version": "1.0.0",
    "description": "",
    "main": "",
    "dependencies": {
        "@types/pngjs": "^3.4.0",
        "pixi.js": "^5.2.0",
        "public": "^0.1.5",
        "strongly-typed-events": "^1.6.3",
        "typescript": "^3.7.2"
    },
    "scripts": {
        "serve": "parcel ./src/index.html --open",
        "build": "parcel build src/index.html --no-source-maps --public-url ./"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/node": "^12.12.17",
        "cssnano": "^4.1.10"
    }
}

编辑看同事的项目，发现他除了用Parcel，还在用Babel。这与它有什么关系吗？他从一个安装项目开始，所以他实际上并不知道为什么要使用 Babel。我从头开始设置项目。唯一不同的是，除了 Parcel 之外，他还使用了 Babel。但是使用两个编译器不是很奇怪吗？我正在研究这个。

Answer 1

解决方案是在 Tank.ts 中使用 import "~ts/Extensions/ExtensionMethods"。我认为我不需要它，因为我的同事也没有使用它。但它有效。

Typescript - Uncaught (in promise) TypeError: v.toPixiPoint is not a function

Typescript - Uncaught (in promise) TypeError: v.toPixiPoint is not a function

extension-methods