45

It seems that the information on how to actually structure code when writing Typescript is next to non-existent.

I want to make a server in node. It has external dependencies like socket.io. The server will be too big to put it all in one file (as I imagine is the case most of the time) so I figured I'd split it up. I want to have each class in a separate file and I want to be able to use them in the whole project without needing to do something crazy like

import vector = require("vector.ts");
var vec = new vector.Vector();

How do I do that? So far it seems that I'm fighting on two fronts. When I get tsc to actually compile, node complains on runtime, but when I modify the code so that node would work, it doesn't compile.

I'd appreciate if someone could take the time to go through this step by step.

Improve this question

4 Answers 4

Reset to default
51

Actually you can (by now):

file: class1.ts:

export class Class1 {
  name: string;

  constructor(name: string){
      this.name = name;
  }
}

file: class2.ts:

export class Class2 {
    name: string;
}

consolidating module file: classes.ts:

export { Class1 } from "./class1";
export { Class2 } from "./class2";

consuming file:

import { Class1, Class2 } from "./classes";

let c1 = new Class1("Herbert");
let c2 = new Class2();

In this manner you can have one class (or interface) per file. In one consolidating module file (classes.ts) you then reference all entities that make up your "module".

Now you only have to reference (import) on single module file to access all of your classes. You still have a neat compartmentalization between files.

Hope this helps anyone still looking.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

how is import { Class1 } from "./class1"; different than import Class1 = require(".class1");
@Daryl, the latter will import the file as a module, picking up all exported items within it (potentially multiple classes/interfaces, etc.).
This solution is very cool. My guess is which is the advantage of using module MyModule {} for each file of Class1 and Class2and then do a import {MyModule} to have the consolidation of modules split as explained here typescript.codeplex.com/…
@loretoparisi In TypeScript 1.5, the nomenclature has changed. “Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {) typescriptlang.org/docs/handbook/modules.html
@loretoparisi Now module MyModule represents a namespace
11

Multi-file external modules are not supported yet in TypeScript.

For module structuring recommendations, this page has a good rundown of the options. In particular, if you have exactly one class per file, you can use export = so that the second line of code in your example would simply be var vec = new vector();, which would be reasonably straightforward.

Improve this answer

6 Comments

But that would still mean I need to have an import for every class I use in each file I use it in, right? That seems hardly practical. Is this really how it's done?
I'm not sure what's surprising/impractical about this. In non-TypeScript node.js development, every file starts with a bunch of 'require' calls for the objects that file uses.
Well, coming from C# for example where I only need to have using directives for separate namespaces this seems like a lot. I guess it's just a matter of getting used to.
Thanks for the answer, but I would like to voice my extreme displeasure at this state of affairs. Multi-file external modules really are necessary for starting to use Typescript alongside any large, existing projects.
@RyanCavanaugh is this still the best (or only) way to solve this problem?
|
1

I was also trying to split a large module into smaller files, but the solution in this thread didn't isolate the import from each file, so I came up with another solution where I'm forced to import from the same file!

File A (filea.ts):

function funcA() { /* do something */ }
function funcB() { /* do something */ }

export default { funcA, funcB };

File B (fileb.ts):

function funcC() { /* do something */ }
function funcD() { /* do something */ }

export default { funcC, funcD };

Main Module (mainmodule.ts):

import filea from './filea';
import fileb from './fileb';

const mainmodule = { ...filea, ...fileb };

export = mainmodule;

This will result in this import:

import { funcA, funcD } from './mainmodule'
Improve this answer

Comments

0

For anyone who stumbles across this thread (like me) who are trying to create one barrel file for external module declarations, loretoparisi's answer is the way to go. Here is my use case with example modules. I wanted to have a barrel declaration file (index.d.ts) for all my 3rd party declarations I was writing, but didn't want to put it 6 + module declarations in the same file. So this is what I did.

I have a folder structure like this: 

src/ 
  index.ts

Example index.ts:

import WildEmitter from 'wildemitter';
import SomethingCool from 'somethingcool';

// ... rest of file

I converted my folder structure like this to write declaration files for my imported 3rd party modules: 

src/ 
  index.ts
  /types
    index.d.ts
    /modules
      wildemitter.d.ts
      somethingcool.d.ts

In my src/types/index.d.ts file, I have: 

/// <reference path="modules/wildemitter.d.ts" />
/// <reference path="modules/somethingcool.d.ts" />

Then I can keep my module declarations in separate files.

In src/types/modules/wildemitter.d.ts I have:

declare module 'wildemitter' {
  // declarations
}

Hopefully this helps someone!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.