Typescript. How to export two classes (in separate files) in one module?

Question

I have two classes declared in two separate files.

a.ts

export class AClass {

  public constructor () {
    console.log('AClass');
  }

}

b.ts

export class BClass {

  public constructor () {
    console.log('BClass');
  }

}

I want to merge them in one module. How I can realise it?

///<reference path='a.ts' />
///<reference path='b.ts' />

module Common {

  export class A extends AClass {}
  export class B extends BClass {}

}

says:

Cannot find name 'AClass'.

and

Cannot find name 'BClass'.

I can import classes

import AClass = require('a');
import BClass = require('b');

module Common {

}

But how I can correctly export them?

Cannot find any information in documentation. Please, tell me the best way to realise declarations in one module? Thank you in advance

Ther is a difference between internal and external modules : https://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1 — basarat, Mar 21 '15 at 23:20

score 24 · Answer 1 · answered Apr 04 '17 at 05:07

24

I do it like this:

m/a.ts

export class A {
}

m/b.ts

export class B {
}

m/index.ts

export { A } from './a.ts';
export { B } from './b.ts';

And then I do: consumer.ts

import { A, B } from './m';

answered Apr 04 '17 at 05:07

Josh Wulf

score 6 · Accepted Answer · answered Mar 20 '15 at 14:41

6

If you declare class like you showed you include it in the 'global' namespace. To declare class inside a module just wrap it in module declaration:

module Common{
    export class ClassA{}
}

you can redeclare module in multiple files only one javascript object will be created for the module.

answered Mar 20 '15 at 14:41

Rafal

But if module contains many classes - source file will be no readable. I want to separate classes in several files – indapublic Mar 20 '15 at 14:45
As I've written yes you can. Typescript is smart this way its not a problem. Just wrap each file in module declaration and you'll get what you want. – Rafal Mar 20 '15 at 14:50
Maybe I not understand correctly. So, I can make two source files with same module but separate class? And if I need only one file, I need to compile files into one .js? – indapublic Mar 22 '15 at 23:48
2

Typescript compiler will generate one js file for each ts file, but there are ways to bundle your js files into single file. – Rafal Mar 23 '15 at 06:20
this answer is not good because it does not address the OP's problem about multiple files and does not provide an example of how to do so – Felipe Jun 05 '21 at 16:53

score 5 · Answer 3 · answered Mar 20 '15 at 14:49

5

You have export in front of your class declarations:

export class AClass {

This turns that source file into an external module. This means that you will need to use import/require from another module:

import a = require("a");

module Common {
    export class A extends a.AClass {}
}

Note that AClass appears to be a member of a because that's what I imported its containing module as.

Alternatively you could rename a module after a single class that it contains, e.g.

AClass.ts

class AClass {
  public constructor () {
    console.log('AClass');
  }    
}

export = AClass;

By "assigning" to export we make that class be the entire single output of module. Hence in another module:

import AClass = require("AClass");

var a = new AClass(); // no prefix needed

This can be tidier if your module only exports a single class (or function).

answered Mar 20 '15 at 14:49

Daniel Earwicker

Hm. Maybe it is offtopic, but If I using require, I receive error "Mismatched anonymous define() module: function (require, exports) { }". Cannot find a reason – indapublic Mar 22 '15 at 13:31
Where do you get that error? In TS compilation? It looks like an AMD wrapper. – Daniel Earwicker Mar 22 '15 at 13:48
in browser console, compilation was successfull – indapublic Mar 22 '15 at 13:50
1

Yes, that appears to be due to misuse of AMD/requireJS, see http://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module – Daniel Earwicker Mar 22 '15 at 13:58
Yeah, I am read this topic before question. But cannot understood what I should to change (maybe my English is not enough). I have html file only with two script tags (require.js and compiled common.js) – indapublic Mar 22 '15 at 14:08
This generates the error "Cannot compile modules unless the '--module' flag is provided.". Where can I provide this 'flag' ? – Kokodoko Nov 23 '15 at 13:40

3 Answers3