如何在不遇到“未定义要求”错误的情况下引用 TypeScript 文件

Question

我先说我没有 TypeScript 或 JavaScript 的高级知识。

我做了什么

我正在制作一个准系统 TypeScript“算法玩具盒”，它实现了算法基础（Brassard 和 Bratley）中的算法。我所做的是打开一个本地 HTML 文件，然后转译的 TypeScript 修改 DOM 以显示输出（就像 TypeScript 网页上的 Greeter example 一样）。

一切都很顺利，直到我决定为每个班级使用单独的文件。我使用了one of the many 方法来引用 TypeScript 文件，但我不确定它是否最适合。我还使用 Atom TypeScript 插件创建了一个默认的 tsconfig.json 文件，认为编译器现在会假设目录中的所有 .ts 都是相同的模块或其他东西，但我想情况并非如此。

main.ts:

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

let arr5_13 = [1,6,9,2,7,5,2,7,4,10]
let mon1 = new Monticulo(arr5_13)
// ...

document.body.innerHTML = mon1.console_debug

问题

当我在浏览器上打开 HTML 文件时，控制台显示 Uncaught ReferenceError: require is not defined。

果然，转译后的代码有一个 require() 调用：

main.js:

var monticulo_ts_1 = require("./stuff/monticulo.ts");
var arr5_13 = [1, 6, 9, 2, 7, 5, 2, 7, 4, 10];
// ...

document.body.innerHTML = mon1.console_debug;

我尝试过的

我最初在 Firefox 47.0 上运行它，然后我尝试在 Chromium 51.0 中运行（如果它与浏览器相关），但我得到了同样的错误。为了完整起见，我使用的是 Ubuntu 16.04。

I've read 那个 require() 是一个没有在客户端实现的函数，但是 Node 已经实现了它，并且在浏览器中使用 npm 模块需要它，但是为什么 TypeScript 需要调用任何 npm 模块呢？ 为什么 ma​​in.js 不只是引用转译的 .js 而不是 .ts 本身？ 我很确定我错过了一个或多个信息。

Answer 1

您可以通过替换来消除对 require 的需求

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

与

/// <reference path="./stuff/monticulo.ts" />
/// <reference path="./programacion-dinamica.ts" />

有关使用三斜杠导入的更多信息，请参阅 Triple Slashes。

您还需要删除所有 export class 并仅替换为 public class。

Answer 2

您可能正在编译为 commonJS 模块格式（检查您的 tsconfig.json）

这意味着它会为您生成 require 函数调用，并且您有责任提供 commonjs 加载器。您可能还希望将所有文件捆绑为一个。碰巧 webpack 两者兼而有之，并且经常与 typescript 一起使用 :)