Question

我有一个相当奇怪的问题。我扩展了一个类，并且由于某种原因，没有扩展类的属性或方法可以访问。这是我的班级：

import "pixi";
import "p2";
import Phaser from "phaser";

export class MyGameState extends Phaser.State {
    // More stuff [...]
    create() {
        this.game.add.sprite(400, 300, "./assets/paddle.png");
    }
}

这实际上似乎成功编译并运行，但输出了有关如何在game中访问this.game的错误：

ERROR in ./src/my-game/MyGameState.ts (17,14): error TS2339: Property 'game' does not exist on type 'MyGameState'.

Intellij也很困惑。它似乎认识到create()覆盖了基类函数，但也认为game不存在。

但是，只要它不是扩展版本，我就非常乐意从该课程中的game访问Phaser.State。所以这编译并正常工作：

const workingState = new Phaser.State();
workingState.game.boot();

这是phaser.d.ts中我的课程的缩短版本我正在扩展：

declare module "phaser-ce" {
    export = Phaser;
}

declare class Phaser {
    class State {
        game: Phaser.Game;
        create(): void;
    }
}

令人毛骨悚然的毛茸茸的配置我得让Phaser很好地使用打字稿......

package.json

{
  "name": "MyGame",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "devDependencies": {
    "browser-sync": "^2.18.12",
    "browser-sync-webpack-plugin": "^1.1.4",
    "expose-loader": "^0.7.3",
    "source-map-loader": "^0.2.1",
    "ts-loader": "^2.2.2",
    "tslint": "^5.5.0",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.4.1",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "phaser-ce": "^2.8.1",
    "webfontloader": "^1.6.28"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": false,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "allowJs": true
  },
  "include": [
    "./src/"
  ]
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var BrowserSyncPlugin = require('browser-sync-webpack-plugin')

// Phaser webpack config
var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
var pixi = path.join(phaserModule, 'build/custom/pixi.js')
var p2 = path.join(phaserModule, 'build/custom/p2.js')

var definePlugin = new webpack.DefinePlugin({
                                                __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
                                            })

module.exports = {
    entry: {
        app: [
            path.resolve(__dirname, './src/main2.ts')
        ],
        vendor: ['pixi', 'p2', 'phaser', 'webfontloader']
    },
    devtool: 'source-map',
    output: {
        pathinfo: true,
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js'
    },
    watch: true,
    plugins: [
        definePlugin,
        new webpack.optimize.CommonsChunkPlugin(
            {name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */}),
        new BrowserSyncPlugin({
                                  host: process.env.IP || 'localhost',
                                  port: process.env.PORT || 3000,
                                  server: {
                                      baseDir: ['./', './build']
                                  }
                              })
    ],
    module: {
        rules: [
            {test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader', options: {emitErrors: true, failOnHint: true}},
            {test: /\.ts$/, loader: 'ts-loader'},
            {test: /pixi\.js/, use: ['expose-loader?PIXI']},
            {test: /phaser-split\.js$/, use: ['expose-loader?Phaser']},
            {test: /p2\.js/, use: ['expose-loader?p2']},
            {enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
        ]
    },
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    resolve: {
        alias: {
            'phaser': phaser,
            'pixi': pixi,
            'p2': p2
        },
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    }
}

Answer 1

这不是Phaser的具体答案，而是一般性的“从哪里开始”的答案。

第一步是，查看this：

export class MyGameState extends Phaser.State {
    // More stuff [...]
    create() {
        console.log(this);
        this.game.add.sprite(400, 300, "./assets/paddle.png");
    }
}

TypeScript（和JavaScript）中最常见的一个问题是this不是您所期望的。当在不同的上下文（例如事件）中调用类方法时，会在TypeScript中发生这种情况。

如果您发现this是一个元素或其他某个上下文，您可以使用胖箭（=>），which preserves the lexical scope来解决问题。

Answer 2

似乎我的webpack配置创建的花式组合移相器必须以某种形式或形式被打破。

我发现通过以不同的方式导入移相器可以防止打字稿错误：

import * as Phaser from "phaser-ce";

以这种方式导入时，我不会收到错误，可以使用基类的成员。

无法访问Typescript中的基类属性

2 个答案: