Question

非常喜欢TypeScript，遵循这个假设的简单sample，最后一部分＆＃34; 导出和导入概念＆＃34;，爆炸！首先得到＆＃34; JavaScript运行时错误：require未定义＆＃34;。 Google发现我需要安装RequirJS，有意义，安装，绕过它。现在，＆＃39; 出口＆＃39;。

的相同未定义消息

这就是我所经历的：

我在SO中经历了所有3个相关的帖子， TypeScript Modules in Visual Studio 2015 Update 2 - 'require' is undefined

How to fix '0x800a1391 - JavaScript runtime error: 'require' is undefined'?

Typescript ReferenceError: exports is not defined

仍未解决。
添加类似this的TSConfig.json，同样。
下载了所谓的ok源代码，哈哈，他以'System' is undefined结束了。 npm是否安装了SystemJS，得到了＆＃34; ...打开＆＃39; C：... \ package.json＆＃39;，...没有描述，没有存储库，......，没有许可证。＆＃34 ;好的，添加了一个空的package.json，结果相同。

所以我的问题是：

我在这里为自己的项目缺少什么？
TypeScript需要TSConfig.json和package.json吗？

我的项目 tsconfig.json ：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

Customer.js

import { Address } from "./Address";

class Customer
{
    private _customerName: string = "";
    private _addressObj: Address = new Address();

    public set CustomerNameBase(value: string){
        this._customerName = value;
    }
    public get CustomerNameBase(){
        return this._customerName;
    }

    Validate()
    {
        this._addressObj.PlotNumber = 12;
        alert(this._addressObj.PlotNumber);
    }
}

class CustomerModified extends Customer
{
    Validate()
    {
        throw "throw from CustomerModified";
    }
}

Address.ts：

export class Address
{
    public PlotNumber: number;
}

Customer.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="./Address.js"></script>
    <script src="Scripts/require.js"></script>
    <script src="./customer.js"></script>
    <script>
        var customer = new CustomerModified();
        try
        {
            customer.Validate();
        }
        catch (exception)
        {
            alert("exception raised: " + exception);
        }
        finally
        {
            alert("finally.");
        }
    </script>
</body>
</html>

VS 2017 Professional v15.1（26403.3）

Answer 1

您正在使用import和export，这意味着模块系统。默认情况下，TypeScript将转换为CommonJS模块，但是，当您使用RequireJS作为模块加载器时，您需要使用AMD模块。

更改您的tsconfig.json以指定您希望使用的模块格式。

{
  "compilerOptions": {
    "module": "amd",
    "strict": true,
    "target": "es5",
    "sourceMap": true
  },
  "exclude": ["node_modules", "wwwroot"],
  "compileOnSave": true
}

此外，您需要修复代码的另一个问题。在模块中定义某些内容时，它仅适用于导入它的代码。这意味着应删除内联脚本并替换为包含代码的模块并导入其使用的内容。请注意，内联脚本无论如何都是一种不好的做法。然而，如下所示嵌入引导代码是合理的。

<script src="Scripts/require.js"></script>
<script>
  require(["app.js"]);
</script>

现在在app.ts中添加内联脚本中的逻辑以及必要的导入

// app.ts 
import CustomerModified from "./customer";

var customer = new CustomerModified();
try {
  customer.validate();
}
catch (error) {
  alert(`error raised: ${error}`);
}
finally {
  alert("finally");
}

当然，为了实现这一点，您需要导出CustomerModified以供其他您忽略的模块使用。

export default class CustomerModified extends Customer {
  validate() {
  // if you throw a bare string you won't get a stack trace.
    throw Error("thrown from CustomerModified");
  }
}

注意和JavaScript一样，开放式大括号的定位实际上很重要，如上所示应该是合适的 - 这不是C＃。除了构造函数之外，还期望你使用lowerCamelCase - 这不是C＃。

要求......现在导出未定义，我在这里缺少什么？

1 个答案: