pixi.js + typescript + es6 为什么我不能扩展类？答案

【问题标题】：pixi.js + typescript + es6 why can't I extend the class?pixi.js + typescript + es6 为什么我不能扩展类？
【发布时间】：2015-11-17 05:35:33
【问题描述】：

Использую связку pixi.js + машинопись + es6 + system.js

import Test from './test';

export class Main {
    constructor() {
        console.log('typescript main ');
        new Test();
    }
}

import PIXI from 'pixi.js';

export default class Test extends PIXI.Sprite{
    constructor(){
        super();
    }
}

typescript main test.js:4 Uncaught (in promise) TypeError: Cannot read 未定义的属性“原型” 在新的 __extends (http://localhost:8080/javascripts/test.js:4:21) 在新的主要 (http://localhost:8080/javascripts/main.js:13:21) 在http://localhost:8080/javascripts/systemfile.js:18:16

如何解决此错误？

附言
值得注意的是 pixi.js.d.ts 不适合 es6。
我不得不换一条线。是 -

declare module 'pixi.js' {
    export = PIXI;
}

改为-

declare module 'pixi.js' {
    export default PIXI;
}

也许还有什么需要改变的？

UPD：0.0.1

如果你原样返回 -

declare module 'pixi.js' {
    export = PIXI;
}

然后写——

import * as PIXI from 'pixi.js';

然后你得到错误 -

错误 TS1192：模块“pixi.js”没有默认导出。

【问题讨论】：

您似乎更改了pixi.js 的导出类型。您是否也更改了它的实际代码？
也许你应该切换到import {PIXI} from 'pixi.js'而不是搞乱.d.ts文件

标签： typescript ecmascript-6 pixi.js typescript1.6

【解决方案1】：

值得注意的是，pixi.js.d.ts 不适合 es6。我不得不改变一行

不要更改定义，请将import PIXI from 'pixi.js';更改为import * as PIXI from 'pixi.js';

【讨论】：

更新了问题。

【解决方案2】：

您可以通过以下方式向 PIXI 添加方法以及扩展类型：

import * as PIXI from "pixi.js";

declare module "@pixi/graphics" {
  interface Graphics {
    drawDashedPolygon(
      polygons: PIXI.Point[],
      x: number,
      y: number,
      rotation: number,
      dash: number,
      gap: number,
      offsetPercentage: number
    ): void;
  }
}

// Extracted from https://github.com/pixijs/pixijs/issues/1333#issuecomment-379000150
PIXI.Graphics.prototype.drawDashedPolygon = function (
  polygons,
  x,
  y,
  rotation,
  dash,
  gap,
  offsetPercentage
) {
  let i;
  let p1;
  let p2;
  let dashLeft = 0;
  let gapLeft = 0;
  if (offsetPercentage > 0) {
    const progressOffset = (dash + gap) * offsetPercentage;
    if (progressOffset < dash) dashLeft = dash - progressOffset;
    else gapLeft = gap - (progressOffset - dash);
  }
  const rotatedPolygons = [];
  for (i = 0; i < polygons.length; i++) {
    const p = { x: polygons[i].x, y: polygons[i].y };
    const cosAngle = Math.cos(rotation);
    const sinAngle = Math.sin(rotation);
    const dx = p.x;
    const dy = p.y;
    p.x = dx * cosAngle - dy * sinAngle;
    p.y = dx * sinAngle + dy * cosAngle;
    rotatedPolygons.push(p);
  }
  for (i = 0; i < rotatedPolygons.length; i++) {
    p1 = rotatedPolygons[i];
    if (i == rotatedPolygons.length - 1) p2 = rotatedPolygons[0];
    else p2 = rotatedPolygons[i + 1];
    const dx = p2.x - p1.x;
    const dy = p2.y - p1.y;
    const len = Math.sqrt(dx * dx + dy * dy);
    const normal = { x: dx / len, y: dy / len };
    let progressOnLine = 0;
    this.moveTo(x + p1.x + gapLeft * normal.x, y + p1.y + gapLeft * normal.y);
    while (progressOnLine <= len) {
      progressOnLine += gapLeft;
      if (dashLeft > 0) progressOnLine += dashLeft;
      else progressOnLine += dash;
      if (progressOnLine > len) {
        dashLeft = progressOnLine - len;
        progressOnLine = len;
      } else {
        dashLeft = 0;
      }
      this.lineTo(
        x + p1.x + progressOnLine * normal.x,
        y + p1.y + progressOnLine * normal.y
      );
      progressOnLine += gap;
      if (progressOnLine > len && dashLeft == 0) {
        gapLeft = progressOnLine - len;
      } else {
        gapLeft = 0;
        this.moveTo(
          x + p1.x + progressOnLine * normal.x,
          y + p1.y + progressOnLine * normal.y
        );
      }
    }
  }
};

【讨论】：