如何在打字稿中为类使用单独的文件？

Question

我正在研究如何构建一个打字稿应用程序，其中所有类都保存在单独的 .ts 文件中。我正在使用 VS 代码。编译任务似乎工作正常（.ts 文件被转译为 .js 文件），但是当我将 main.js 文件加载到我的 HTML 页面中时，我收到了这个 javascript 错误：

Can't find variable: require

我的打字稿代码：

// __________ car.ts __________ 
class Car {
    color: string;

    constructor(color: string) {
        this.color = color;
        console.log("created a new " + color + " car");
    }
}
export = Car;

// __________ main.ts __________ 
import Car = require('car');

class Startup {
    public static main(): number {
        console.log('Hello World');
        var c = new Car("red");
        return 0;
    }
}

我的 tsconfig 文件：

{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap":  true
    },
     "files": [
        "car.ts",
        "main.ts"
    ]
}

我在这里缺少什么步骤？为什么 javascript 需要一个叫做 'require' 的东西？还是有其他方法可以处理单独文件中的类？

Answer 1

require 函数是 NodeJS 的 part。为了使require在浏览器中工作，您需要安装requirejs。

如果您想使用内部模块，请将outFile 添加到您的tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap":  true,
        "outFile": "app.js"
    },
     "files": [
        "car.ts",
        "main.ts"
    ]
}

并在您的index.html 文件中添加<script src="app.js"></script>。

Answer 2

编辑：TypeScript-Handbook: Splitting Across Files：

要在编码时相互引用文件，请在每个文件的最顶部使用///<reference path="someOtherScript.ts" />

首先，我们可以使用--out 标志使用串联输出，将所有输入文件编译为单个 JavaScript 输出文件： tsc --out sample.js Test.ts

将"outFile": "app.js" 放入"compilerOptions": {

---

您可以将所有.ts 文件编译到一个.js 文件中。这就是我一直在使用的。一个 JS 文件但干净的 TypeScript 代码。

在 Visual Studio 中，它是 <TypeScriptOutFile>myfile.js</TypeScriptOutFile>。在 Visual Code 中可能类似？