javascript - 告诉 TypeScript 文件将包含在脚本标签中？

Question

我正在为一些前端 JavaScript 使用 TypeScript，我正在从 index.html 加载两个脚本，如下所示:

<script src="replacements.js"></script>
<script src="socket.js"></script>

replacements.ts(编译成 replacements.js)定义了一个函数 insertReplacement，如下所示:

export = 0;
import IReplacement from "../src/IReplacement";

// insertReplacement is defined in the global scope 
function insertReplacement(rep : IReplacement) : void {
    // ...
}

需要 export = 0 来抑制 Object.defineProperty(exports, "__esModule", { value: true }); tsc 添加的行，因为这当在浏览器中运行

行会导致错误。

socket.ts 使用这个函数，因为 socket.js 在 replacements.js 之后加载，应该在全局范围内可用(就好像这些文件是一样的)。 socket.ts 看起来像这样:

export = 0;
import IReplacement from "../src/IReplacement";

var docs: IReplacement[];
// populate `docs` here
docs.forEach((doc) => insertReplacement(doc))
// tsc:               ^ cannot find name 'insertReplacement'

IReplacement 是客户端文件(replacements.ts 和 socket.ts)以及其他文件使用的类型在服务器端。它看起来像这样:

export default interface IReplacement {
    // ...
}

export {IReplacement};

不幸的是，当我尝试 tsc 时，我在 socket.ts 中收到错误“找不到名称 insertReplacement”。 有没有办法告诉编译器这个函数在运行时可用？

---

(如果它有用，这里是 tsconfig.json 的编译器选项):

"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": false,
    "moduleResolution": "node",
    "outDir": "dist",
    "allowJs": true
 }

(这个tsconfig.json也编译了一些后端Node代码和前端代码)

Answer 1

insertReplacement 不在全局范围内。您正在设置模块，它不会在全局范围内。

您的 replacement.ts 脚本将输出以下内容:

define(["require", "exports"], function (require, exports) {
    "use strict";
    // insertReplacement is defined in the global scope 
    function insertReplacement(rep) {
        // ...
    }
    return 0;
});

( source )

现在明白为什么了吗？它应该像这样简单:

replacements.ts

// insertReplacement is defined in the global scope 
function insertReplacement(rep : IReplacement) : void {
    // ...
}

socket.ts

var docs: IReplacement[];
// populate `docs` here
docs.forEach((doc) => insertReplacement(doc))
// tsc:               ^ cannot find name 'insertReplacement'

现在它都是全局范围的。以这种方式完成时，socket.ts 脚本不需要导入其他文件来获取类型。

提示:我强烈建议使用 namespace block 将您的代码从全局范围中取出，以尽可能少地污染它(或学习如何正确使用模块 [you'd have to start通过删除 export = 0; 并改为导出函数])。