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

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 函数是一个 part of NodeJS. In order to make require work in browsers, you need to install 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" />

First, we can use concatenated output using the --out flag to compile all of the input files into a single JavaScript output file: tsc --out sample.js Test.ts

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

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

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

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

How to use separate files for classes in typescript?

commonjs

typescript

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

How to use separate files for classes in typescript?

commonjs

typescript

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