TypeScript找不到全局定义的类

Question

我有这个档案

routing.ts

class RouteConfig {
  // Some implementation
}

我这样使用

app.module.ts

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

然后，我使用导入两个先前的文件

索引

import "./scripts/routing.ts";
import "./scripts/app.module.ts"";

我正在使用webpackand 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')
    ]
  }
}

你知道我在做什么错吗？我查看了几乎所有tsconfig.json选项，但找不到能解决我的问题的选项

Answer 1

问题

在routing.ts你没有任何export既不是import：为打字稿，这是一个脚本。但是您使用了Webpack，并且使用了import它：对于Webpack，routing.ts是一个模块。在编译时，该类RouteConfig可以全局访问，并且您的程序可以编译。但是，在运行时，RouteConfig无法全局访问该类。

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

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

在此解决方案中，请勿使用Webpack捆绑的模块中import的文件routing.ts。只要确保tsconfig.json其中可以被TypeScript编译器访问。

解决方案2：丑陋的方式，手动声明RouteConfig为全局变量

您可以这样做：

// routing.ts
class RouteConfig {
  // Some implementation
}
window["RouteConfig"] = RouteConfig;

然后，在index.ts您导入routing.ts。

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

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

注意：此解决方案基于误解。对于Webpack以及在运行时，routing.ts不是一个script而是一个声明全局变量的模块。对于TypeScript（在编译时），它是一个以古怪且不受管的东西结尾的脚本window。

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

以ES6方式，请勿创建任何全局变量。所有代码都在模块中。首先，您必须导出类：

// routing.ts
export default class RouteConfig {
  // Some implementation
}

然后，您可以导入它：

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

有关ES6模块的文档：深度：模块中的ES6。