How to use separate files for classes in typescript?

Refresh

December 2018

Views

2.2k time

2

I am figuring out how to build a typescript app where all classes are saved in separate .ts files. I am using VS Code. The compile task seems to be working correctly (.ts files get transpiled to .js files), but when I load my main.js file into my HTML page I get this javascript error:

Can't find variable: require

My typescript code:

// __________ 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;
    }
}

My tsconfig file:

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

What step am I missing here? Why does javascript need something called 'require' ? Or is there another way to work with classes in separate files?

2 answers

1

requireфункция является частью из NodeJS. Для того , чтобы сделать requireработу в браузерах, вам необходимо установить requirejs .

Если вы хотите использовать внутренние модули, добавьте outFileк вашему tsconfig.json:

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

и добавьте <script src="app.js"></script>в ваш index.htmlфайл.

0

EDIT: машинопись-справочник: Расщепление в файлах :

Для ссылки на файл друг с другом во время кодирования использования ///<reference path="someOtherScript.ts" />в самом начале каждого файла

Во- первых, мы можем использовать каскадный выход , используя --outфлаг компиляции всех входных файлов в один выходной файл JavaScript: tsc --out sample.js Test.ts

Помещенный "outFile": "app.js"в"compilerOptions": {


Вы можете иметь все .tsфайлы , скомпилированные в один .jsфайл. Это то, что я использую все время. Один из JS-файл , но чистая Машинопись-код.

В Visual Studio это <TypeScriptOutFile>myfile.js</TypeScriptOutFile>. Может быть похож на Визуальный кодекс?