TypeError：调用类方法时不是函数

debugcn 发表于 Dev

李·福特

抱歉，这是一个非常基本的问题，但我一直在努力寻找答案。

我正在尝试在类客户端中调用方法/函数，但是当我尝试调用它时，我得到了 TypeError testFunction is not a function

入口点是client.ts，它（为简化起见）具有单个导出：

export * from "./Test"

Test.ts具有一个类和功能：

export class TestClass {

    public testFunction() {

        // do stuff

    }

}

我的webpack.config.js如下：

var webpack = require('webpack');

var argv = require('yargs').argv;

var debug = argv.debug !== undefined;

var config = [
    {
        entry: {
            client: [
                __dirname + '/src/scripts/client.ts'
            ]
        },
        mode: debug ? 'development' : 'production',
        output: {
            path: __dirname + '/dist/web/scripts',
            filename: '[name].js',
            libraryTarget: 'umd',
            library: 'webpack',
            publicPath: '/scripts/'
        },
        externals: {},
        devtool: 'source-map',
        resolve: {
            extensions: [".ts", ".tsx", ".js"],
            alias: {}
        },
        target: 'web',
        module: {
            rules: [{
                test: /\.tsx?$/,
                exclude: [/lib/, /dist/],
                loader: "ts-loader",
                options: {
                    configFile: "tsconfig-client.json"
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'public/fonts/[name].[ext]'
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            }
            ]
        },
        performance: {
            maxEntrypointSize: 400000,
            maxAssetSize: 400000,
            assetFilter: function (assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    }
];

module.exports = config;

我是他们将其嵌入html页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>My Bookings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles/main.css">
</head>

<body>
    <script src="/scripts/client.js"></script>
    <script type='text/javascript'>
        webpack.TestClass.testFunction();
    </script>
</body>

</html>

任何关于我做错事情的指示都很好。如果浏览生成的client.js，则可以看到类和方法，所以我很茫然！

/*!*****************************!*\
  !*** ./src/scripts/Test.ts ***!
  \*****************************/
/*! namespace exports */
/*! export TestClass [provided] [no usage info] [missing usage info prevents renaming] */
/*! other exports [not provided] [no usage info] */
/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "TestClass": () => /* binding */ TestClass
/* harmony export */ });
var TestClass = /** @class */ (function () {
    function TestClass() {
    }
    TestClass.prototype.testFunction = function () {
        // do stuff
    };
    return TestClass;
}());

伊莱贾·埃努姆·乌多古

问题是，你正试图从直接调用非静态方法TestClass，而不是创建一个新实例的TestClass首次。

您需要testFunction在的新实例上调用方法，TestClass或者将testFunction方法声明为static方法。