【发布时间】：2020-12-20 00:20:05
【问题描述】：
我对 typescript 有一个奇怪的问题，所以我有 2 个静态类互相使用，这不起作用。
类 ValidationHelper（单个文件）
import { ValidationErrors } from '../dictionary/ValidationErrors';
export class ValidationHelper {
static readonly MaxEmailLength = 320;
static IsEmailValid(email: string): ValidationResult {
if (email.length < 0) {
return new ValidationResult(false, ValidationErrors.MissingEmail);
}
if (email.length > this.MaxEmailLength) {
return new ValidationResult(false, ValidationErrors.InvalidEmailLength);
}
return new ValidationResult(true);
}
}
类验证错误（单个文件）
import { ValidationHelper } from "../helpers/ValidationHelper";
export class ValidationErrors {
static readonly MissingEmail = "Please provide email.";
static readonly InvalidEmailLength = `Email can't be longer than ${ValidationHelper.MaxEmailLength} characters.`;
}
这些类用于反应组件。一切都是由 webpack 4.44.1 构建到 vendor.js runtime.js 和我需要的每个条目的文件中。然后使用<script>标签将这些js文件加载到HTML页面中。
这是我安装的依赖项：
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@typescript-eslint/eslint-plugin": "^3.9.0",
"@typescript-eslint/parser": "^3.9.0",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.1",
"eslint": "^7.6.0",
"grunt": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-watch": "^1.1.0",
"jit-grunt": "^0.10.0",
"less-loader": "^6.2.0",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.1.1"
},
"dependencies": {
"@babel/runtime": "^7.11.2",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-jshint": "^2.1.0",
"grunt-terser": "^1.0.0",
"grunt-webpack": "^4.0.2",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
这是错误： TypeError：无法读取未定义的属性“MaxEmailLength”
作为调查的一部分，我在我的代码中注释掉了很多，我只在 react 组件的 render 方法中留下了这个：
<p>{ValidationHelper.MaxEmailLength}</p>
这不起作用。似乎一个简单的反应组件会因为渲染方法中的那一行而失败。
我还在当前正在运行 typescript/react 的不同项目/解决方案上尝试了这个东西，我遇到了同样的问题（看起来它是这样工作的）。
作为不同测试的一部分，我已经移动了这个
static readonly MaxEmailLength = 320;
分离新的静态类然后它就可以工作了。
看起来这是因为 ValidationHelper 类使用 ValidationErrors 类，然后 ValidationErrors 类使用 ValidationHelper 类。
另外，我可以补充一下，这是 3.9.7 typescript 版本。
我的问题是这应该有效吗？
【问题讨论】：
-
this.MaxEmailLength应该是ValidationHelper.MaxEmailLength，因为该字段是静态的。 -
@Clashsoft - 我试过是一样的
标签： reactjs typescript webpack static frontend