感谢这个问题已被问过几次,但我遇到的几乎所有情况都是有人试图扩展非本地类的情况。我的情况不同。我有一个名为 CObject
的非常简单的基类,如下所示:
export class CObject extends BaseObject {
constructor() {
super();
}
static url(path: string): string { return ""; }
static wssUrl(): string { return ""; }
static callMethod(method, path: string, params: any, noConvertData?: boolean): Promise<any> { return null; }
static post(path: string, params: any, noConvertData?: boolean): Promise<any> {
return CObject.callMethod('post', path, params, noConvertData);
}
static put(path: string, params: any, noConvertData?: boolean): Promise<any> {
return CObject.callMethod('put', path, params, noConvertData);
}
static patch(path: string, params: any, noConvertData?: boolean): Promise<any> {
return CObject.callMethod('patch', path, params, noConvertData);
}
static get(path: string, params: any, noConvertData?: boolean): Promise<any> {
return CObject.callMethod('get', path, params, noConvertData);
}
static delete(path: string, params: any, noConvertData?: boolean): Promise<any> {
return CObject.callMethod('delete', path, params, noConvertData);
}
}
包括 BaseObject 在内的整个类层次结构只是简单的 Typescript 类。但是,当我从 CObject
扩展一个类然后尝试实例化它时,我得到了这个可怕的错误(现在 4 天了!)。有趣的是,我可以毫无问题地自行实例化 CObject
。只是派生类出现了问题,甚至是像这样的空派生类:
export class TestClass extends CObject {
constructor() {
super();
}
}
需要注意的一点是,此代码在我的服务器 (Node.js) 和客户端之间共享。该代码在服务器端工作得很好。没有任何问题。
我试过查看 babel 生成的代码,它只是简单的 ES6 类。所有其他 TS 生成的类都正常工作,CObject
下面的所有内容在调用 CObject
构造函数时都会失败。
我的 .babelrc 如下:
{
"presets": [
"es2015-node5",
"react",
"stage-0",
"stage-1",
"bluebird"
],
"plugins": [
"transform-decorators-legacy",
"react-hot-loader/babel",
"transform-async-to-bluebird",
"transform-promise-to-bluebird",
"transform-runtime",
[
"module-alias",
[
{ "src": "./build/Server", "expose": "Server" },
{ "src": "./build/Shared", "expose": "Shared" },
{ "src": "./build/Client", "expose": "Client" }
]
]
],
"compact": "false"
}`
对于客户端编译,我在 tsconfig.json 中的 awesome-typescript-loader 配置如下:
编辑:我看的是错误的 ATL 配置。完整配置如下:
"awesomeTypescriptLoaderOptions": {
"babelrc": true,
"useBabel": true,
"useWebpackText": true,
"useTranspileModule": true,
"doTypeCheck": true,
"forkChecker": true,
"presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
"babelOptions": {
"sourceMaps": true
},
"useCache": true
}
客户端webpack配置如下:
var path = require('path');
var webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
let outputDir = path.join(__dirname, "..", "dist", "Client");
console.log(`Output: ${outputDir}`);
module.exports = {
entry: "./src/Client/Browser/Src/Main.tsx",
output: {
filename: "client.js",
path: outputDir
},
target: 'web',
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"],
plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
modules: [
"./node_modules",
"./src/Shared",
"./src/Client"
]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
}
};
任何帮助将不胜感激。谢谢你。
编辑:确切的错误是:
ConfigSection.ts?26cc:18 Uncaught TypeError: Class constructor CObject cannot be invoked without 'new'
at new ConfigSection (ConfigSection.ts?26cc:18)
at Object../src/Shared/Model/Config/ShAlpha.ts (ShAlpha.ts:338)
at __webpack_require__ (bootstrap:19)
最佳答案
好的,感谢 Oscar Paz,我已经能够解决这个问题。原来罪魁祸首是我的 ATL 配置:
"awesomeTypescriptLoaderOptions": {
"babelrc": true,
"useBabel": true,
"useWebpackText": true,
"useTranspileModule": true,
"doTypeCheck": true,
"forkChecker": true,
"presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
"babelOptions": {
"sourceMaps": true
},
"useCache": true
}
更具体地说,这一行:
"presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
即使我设置了:
"babelrc": true,
期待 .babelrc 被使用,这正是 Node.js 代码所使用的。这导致生成从 CObject
派生的类的多个定义(ES6 和 ES5)。所以 CObject
被正确生成了:
let CObject = exports.CObject = class CObject extends _BaseObject.BaseObject {} ...
ConfigSection
的第一个定义也已正确生成:
let ConfigSection = ConfigSection_1 = class ConfigSection extends Shared_Core_CObject__WEBPACK_IMPORTED_MODULE_1__["CObject"] {} ...
然后再往下看:
var ConfigSection = ConfigSection_1 = function (_CObject) {
(0, _inherits3.default)(ConfigSection, _CObject); ...
这就是导致错误的原因。我不知道为什么 ATL 不忽略这些选项以及为什么这些选项会导致这种代码生成。也许,有更好理解的人可以阐明一些问题。
关于javascript - 没有 'new' 无法调用类构造函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49741791/