Question

我是Typescript的新手，但精通JS。我的问题是如何使用模块编写TS，并在导出到JS时删除模块？

使用普通的JS，我可以将功能拆分为多个文件，如下所示：

//func.js
function add(a, b) {
    return a+b
}

//other.js
(function(){
    console.log(add(1, 2))
})

假定运行func.js时已加载，这应该可以工作。

尽管有了TS，事情变得很有趣：

//func.ts
export function add(a: number, b: number): number {
    return a+b
}

//other.ts
import { add } from "./func";

(function(){
    console.log(add(1, 2))
})

当向下编译为单个JS文件时，它会产生以下内容：

//func.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function add(a, b) {
    return a + b;
}
exports.add = add;

//other.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var func_1 = require("./func");
(function () {
    console.log(func_1.add(1, 2));
});

如果浏览器（例如我的浏览器）了解如何执行此操作，那就太好了。也许我做错了吗？最后，我想要的是让TS文件看起来与用普通JS编写时的样子相似（也就是说，不要使用模块，而是假设函数在它们出现时就已经存在了）被执行）。

我的tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNEXT",
    "lib": ["ES2015", "dom"],
    "module": "commonjs",
    "outDir": "js/",
    "rootDir": "ts/",

    "strictNullChecks": false,
    "baseUrl": "./",
    "esModuleInterop": true,

    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./ts/*"
  ]
}

文件树：

./js
./js/func.js
./js/other.js
./ts
./ts/func.ts
./ts/other.ts
./tsconfig.json

编辑：我在浏览器环境而不是Node中使用JS。我想要TS的好处，除了模块。需要使用模块（导入，导出）将TS文件链接在一起，但是我无法在最终的JS中使用模块（许多浏览器不支持它）。我想要的是让最终的JS拥有编译后的代码，减去模块功能。

Answer 1

如果有模块，则需要一个加载程序来链接模块。您可以在SystemJS（"system"），RequireJS（"requirejs"）和其他之间进行选择。然后，必须先加载它们的库，然后才能加载脚本。

您还可以使用"umd"，这是一个file format，应该可以在任何地方使用，甚至在没有库的浏览器中也可以使用（回退到全局变量，因此必须按顺序加载）。

作为一种选择，您可以使用outFile将所有代码捆绑到一个文件中，然后就不需要加载程序了。

Answer 2

我弄清楚了我需要做些什么才能得到我的工作。

基本上，不需要时我使用的是导入和导出语法。使用"module": "none"完成了我想要的工作，但是我不得不从代码中删除导入和导出。然后，一切按预期进行编译！

打字稿：编译时不包括导出

2 个答案: