I have two classes in different files:

export class ActionsCollection{
    constructor(greeting :string){
        this.greet(greeting);
    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
}

And

import {ActionsCollection} from "./actionsCollection";

class Greeter extends ActionsCollection{
    constructor(public greeting: string) {
        super(greeting);
    }
}

alert(new Greeter("Hello, world!"));

Greeter is generated in such a file in which there is require line ("./ actionsCollection"). But I want to make sure that all the files (*.ts) generates in only one file main.js, it does not need require. Can I do that? And if so, how?

PS: At the same time, for the assembly, you can use standard WebStorm tools and Gulp. And nothing more, besides modules for Gulp.

I have two classes in different files:

export class ActionsCollection{
    constructor(greeting :string){
        this.greet(greeting);
    }

    public greet(greeting :string) {
        return "<h1>"+greeting+"</h1>";
    }
}

And

import {ActionsCollection} from "./actionsCollection";

class Greeter extends ActionsCollection{
    constructor(public greeting: string) {
        super(greeting);
    }
}

alert(new Greeter("Hello, world!"));

Greeter is generated in such a file in which there is require line ("./ actionsCollection"). But I want to make sure that all the files (*.ts) generates in only one file main.js, it does not need require. Can I do that? And if so, how?

PS: At the same time, for the assembly, you can use standard WebStorm tools and Gulp. And nothing more, besides modules for Gulp.

• javascript
• typescript

Share Improve this question Follow edited Oct 3, 2020 at 19:57 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Apr 19, 2016 at 6:59 sanusanu 5701111 silver badges3131 bronze badges 2

• If you use "files" in tsconfig and you write all files in the correct order it will pile everything in a single file (of course having the "out" directive in your tsconfig.json). The problem with this approach is that you cannot forget any file in the list. Using ES6 imports should be enough if you indicate your entry point though – iberbeu Commented Apr 19, 2016 at 9:03
• You can use the gulp webpack module I suppose – bryan60 Commented Oct 3, 2020 at 20:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Replace

import {ActionsCollection} from "./actionsCollection";

with

/// <reference path="./actionsCollection.ts" />.

See Triple Slashes for more info on using the triple slash imports.

But I want to make sure that all the files (*.ts) generates in only one file main.js, it does not need require. Can I do that? And if so, how

You can use it quite easily with Webpack: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

This has the additional advantage that you can use all the wonderful libraries on npm seamlessly.

The tsconfig.json file may help you.

It has an "out" g.