TypeScript找不到类定义的globaly

时间：2017-08-31 08:28:57

标签： typescript webpack ts-loader

我有这个文件

routing.ts 

class Market {
    val updates = FXCollections.observableArrayList<MarketUpdate>()
}

class MarketUpdate {
    val timeProperty = SimpleObjectProperty(LocalDateTime.now())
}

class MarketList : View("Markets") {
    val markets = FXCollections.observableArrayList<Market>()
    val data = SortedFilteredList<Market>(markets)

    override val root = borderpane {
        prefWidth = 500.0

        center {
            tableview(markets) {
                column<Market, LocalDateTime>("Created at", { objectBinding(it.value.updates) { first() }.select { it!!.timeProperty } })
                column<Market, LocalDateTime>("Last update", { objectBinding(it.value.updates) { last() }.select { it!!.timeProperty } })
            }
        }
        bottom {
            toolbar {
                // Click to add an update to the first entry
                button("Add update").action {
                    markets.first().updates.add(MarketUpdate())
                }
            }
        }
    }

    init {
        // Add some test entries
        markets.addAll(
                Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
                Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
                Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) },
                Market().apply { updates.addAll(MarketUpdate(), MarketUpdate(), MarketUpdate()) }
        )
    }
}

我这样使用

app.module.ts 

class RouteConfig {
  // Some implementation
}

然后我使用

导入以前的两个文件

index.ts 

angular.module("ApplicationsApp", [
    "ApplicationsApp.Services",
    "ApplicationsApp.Clients",
    "ApplicationsApp.Application"])
    .config(RouteConfig);

我正在使用import "./scripts/routing.ts"; import "./scripts/app.module.ts""; 和webpack，而ts-loader是其中一个切入点。构建成功，但是当我运行它时我得到了这个错误

index.ts

我给app.module.ts:5 Uncaught ReferenceError: RouteConfig is not defined at Object.<anonymous> (app.module.ts:5) at __webpack_require__ (bootstrap 755a82fd7c11e301b6c1:676) at fn (bootstrap 755a82fd7c11e301b6c1:87) at Object.<anonymous> (index.ts:4) at __webpack_require__ (bootstrap 755a82fd7c11e301b6c1:676) at fn (bootstrap 755a82fd7c11e301b6c1:87) at Object.defineProperty.value (events.js:302) at __webpack_require__ (bootstrap 755a82fd7c11e301b6c1:676) at logLevel (bootstrap 755a82fd7c11e301b6c1:722) at main.min.js:726 的配置看起来像是

ts-loader

你知道我做错了什么吗？我查看了几乎所有的{ configFile: paths.resolveOwn('config/tsconfig.json'), compilerOptions: { target: 'ES5', module: 'commonjs', moduleResolution: 'node', sourceMap: true, strict: true, typeRoots: [ paths.resolveOwn('node_modules/@types'), paths.resolveApp('node_modules/@types') ] } } 选项，但找不到解决我问题的选项

1 个答案:

答案 0 :(得分：3)

问题

在routing.ts中，您没有任何export import：对于TypeScript，它是脚本。但您使用Webpack并import：对于Webpack，routing.ts是模块。在编译时，可以在全局访问类RouteConfig，并编译您的程序。但是，在运行时，全局无法访问类RouteConfig。

解决方案1：旧方法，将routing.js加载为脚本

您可以在单独的文件routing.ts中编译routing.js。然后，在HTML代码中，必须从单独的标记<script src="scripts/routing.js">加载编译的文件。

在此解决方案中，请勿从Webpack捆绑的模块import routing.ts文件tsconfig.json。只需确保在RouteConfig中，TypeScript编译器即可访问它。

解决方案2：丑陋的方式，手动将// routing.ts class RouteConfig { // Some implementation } window["RouteConfig"] = RouteConfig; 声明为全局变量

你可以这样做：

index.ts

然后，在routing.ts导入// index.ts import "./scripts/routing.ts"; 。

routing.ts

因此，Webpack确保执行routing.ts。并且您的全局变量在运行时可以访问。

注意：此解决方案基于误解。对于Webpack，在运行时，script不是window，而是一个声明全局变量的模块。对于TypeScript（在编译时），它是一个脚本，以// routing.ts export default class RouteConfig { // Some implementation } 的古怪和不受管理的东西结束。

解决方案3：ES6方式，所有模块，无全局

在ES6方式中，不要创建任何全局变量。所有代码都在模块中。首先，您必须导出您的班级：

// index.ts
import RouteConfig from "./scripts/routing.ts";

然后，您可以导入它：

 span.replace(0,0,getText(R.string.ForeSingleChoice));
                    new DynamicViews().makeNormalContent(getApplicationContext(),span,linearLayout,16,16,16,16,16.0f);
                    span.clear();

                    radioGroup = new DynamicViews().makeRadioGroup(getApplicationContext(),linearLayout);
                    new DynamicViews().makeRadioButton(getApplicationContext(),radioGroup,getString(R.string.Choice_Q2Mathematicsop1_2),-1);
                    new DynamicViews().makeRadioButton(getApplicationContext(),radioGroup,getString(R.string.Choice_Q2Mathematicsop2_2),5);
                    new DynamicViews().makeRadioButton(getApplicationContext(),radioGroup,getString(R.string.Choice_Q2Mathematicsop3_2),-1);
                    new DynamicViews().makeRadioButton(getApplicationContext(),radioGroup,getString(R.string.Choice_Q2Mathematicsop4_2),-1);

                    radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
                        @Override
                        public void onCheckedChanged(RadioGroup group, int checkedId) {
                            switch (checkedId)
                            {
                                case 5: goToNextLevel= true ;
                                    break;
                                default: goToNextLevel = false;
                                    break;
                            }
                        }
                    });

有关ES6模块的文档：ES6 in Depth: Modules。

相关问题
最新问题