10

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

1

3 Answers 3

25

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';
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.

5
  • But if module contains many classes - source file will be no readable. I want to separate classes in several files
    – indapublic
    Commented Mar 20, 2015 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
    Commented Mar 20, 2015 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
    Commented Mar 22, 2015 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
    Commented Mar 23, 2015 at 6: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
    Commented Jun 5, 2021 at 16:53
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).

6
  • 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
    Commented Mar 22, 2015 at 13:31
  • Where do you get that error? In TS compilation? It looks like an AMD wrapper. Commented Mar 22, 2015 at 13:48
  • in browser console, compilation was successfull
    – indapublic
    Commented Mar 22, 2015 at 13:50
  • 1
    Yes, that appears to be due to misuse of AMD/requireJS, see stackoverflow.com/questions/15371918/… Commented Mar 22, 2015 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
    Commented Mar 22, 2015 at 14:08

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.