How to use multiple TypeScript files

Posted on: 2017-02-07

TypeScript allows you to use EcmaScript import syntax to bring code from another file, or multiple files. This is very useful if you do not want to have all your code into a single file, or if you want to reuse code in different files.

For example, let's have 2 files. app.ts and fileToInclude.ts which will contain a class that we want to use in App.ts.

//app.ts content: 
import { ClassA } from "fileToInclude"

const a = new ClassA(); a.method1();

//fileToInclude.ts content: 
export class ClassA { 
  public method1(): void { 
    console.log("ClassA>method1"); 
  } 
} 

As you can see, the way to import a class is to specify the class name and from which file to import it. On the other side, the class that you want to import must be marked as export to be imported. The export and import are not TypeScript specific, but something EcmaScript version 6 allows you to use instead of using a custom AMD loader library like Require.js.

So while this is supported since EcmaScript 6, some browser doesn't support this feature. However, with TypeScript, you can style use EcmaScript, except for module loading. So, if you compile using EcmaScript and go to Chrome you will end up with an unexpected error if you do not.

Uncaught SyntaxError: Unexpected token import

By changing the target of the tsconfig.json to use a module loader the generated code will be using the module loader syntax instead of the EcmaScript syntax. A popular one is Require.js. to do so, the tsconfig.json file needs to have a module entry.

{ 
  "compilerOptions": { 
    "sourceMap": true, 
    "target": "es6", 
    "module": "amd", 
    "outDir": "./Scripts/App" 
    }, 
    "include": [ "src/**/*" ] } 

Without specifyin the module, the code generated was:

import { ClassA } from "./fileToInclude"; 
const a = new ClassA(); 
a.method1(); 

With the module to AMD, this will output a JavaScript that will wrap the module with require. For example:

define(["require", "exports", "./fileToInclude"], function (require, exports, fileToInclude_1) { 
  "use strict"; 
  var a = new fileToInclude_1.ClassA(); 
  a.method1(); 
}); 

Finally, you cannot call directly the .js file in the .cshtml. Instead, we need to use the script tag with a src to requirejs and call a specific method to indicate which module to load (which file).

<script src="~/Scripts/require.js"></script> 
<script> requirejs.config({ baseUrl: '/Scripts/App/' }); 
requirejs(['app']); </script> 

In our case, we want to execute app.js, so we write "app" without the extension ".js". However, before doing so, we need to setup require requirejs to know that the root of all JavaScript file are located into the Script folder.