Using modules

We will use modules in all applications in this book. Modules (also called external modules and ES2015 modules) are a concept of separating code in multiple files. Every file is a module. Within these modules, you can use variables, functions, and classes (members) exported by other modules and you can make some members visible for other modules. To use other modules, you must import them, and to make members visible, you need to export them. The following example will show some basic usage:

// x.ts 
import { one, add, Lorem } from './y'; 
console.log(add(one, 2)); 
 
var lorem = new Lorem(); 
console.log(lorem.name); 
 
// y.ts 
export var one = 1; 
export function add(a: number, b: number) { 
  return a + b; 
} 
export class Lorem { 
  name = "ipsum"; 
} 

You can export declarations by prefixing them with the export keyword or by prefixing them with export default. A default export should be imported differently though we will not use such an export as it can be confusing. There are various ways to import a file. We have seen the variant that is used most times, import { a, b, c } from './d'. The dot and slash mean that the d.ts file is located in the same directory. You can use ./x/y and ../z to reference a file in a subdirectory or a parent directory. A reference that does not start with a dot can be used to import a library, such as Angular. Another import variant is import * as e from './d'. This will import all exports from d.ts. These are available as e.a, e.b, e is an object that contains all exports.

To keep code readable and maintainable, it is advisable to use multiple small files instead of one big file.