By default, TypeScript generated JavaScript code that executes in what is called the global scope. This means code from one file is automatically available in another file. This in turn means that the functions we implement can overwrite functions in other files if the names are the same, which can cause our applications to break.

Let's look at an example in Visual Studio Code:

1. Let's create a file called product.ts and enter the following interface for a product:

interface Product {
  name: string;
  unitPrice: number;
}

2. Let's create another file, called orderDetail.ts, with the following content:

class OrderDetail {
  product: Product;
  quantity: number;
  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

The compiler doesn't give us any complaints. In particular, the reference to the Product interface in the OrderDetail class is able to be resolved, even though it's in a different file. This is because both Product and OrderDetail are in the global scope.

Operating in the global scope is problematic because item names can conflict across different files, and as our code base grows, this is harder to avoid. Modules resolve this issue and help us write well organized and reusable code.

Modules feature in JavaScript as part of ES6, which is great. However, lots of code exists in other popular module formats that came before this standardization. TypeScript allows us to write our code using ES6 modules, which can then transpile into another module format if specified.

Here is a brief description of the different module formats that TypeScript can transpile to:

• Asynchronous Module Definition (AMD): This is commonly used in code targeted for the browser and uses a define function to define modules.
• CommonJS: This format is used in Node.js programs. It uses module.exports to define modules and require to define dependencies.
• Universal Module Definition (UMD): This can be used in both browser apps and Node.js programs.
• ES6: This is the native JavaScript module format and uses the export keyword to define modules and import to define dependencies.

In the following sections (and, in fact, this whole book), we'll write our code using ES6 modules.

Exporting code from a module allows it to be used by other modules. In order to export from a module, we use the export keyword. We can specify that an item is exported using export directly before its definition. Exports can be applied to interfaces, type aliases, classes, functions, constants, and so on.

Let's start to adjust our example code from the previous section to operate in modules rather than the global scope:

1. Firstly, let's export the Product interface:

export interface Product {
  name: string;
  unitPrice: number;
}

2. After we make this change, the compiler will complain about the reference to the Product interface in the OrderDetail class:

This is because Product is no longer in the global scope but OrderDetail still is. We'll resolve this in the next section, but let's look at alternative ways we can export the Product interface first.

3. We can use an export statement beneath the item declarations. We use the export keyword followed by a comma-delimited list of item names to export in curly braces:

interface Product {
  name: string;
  unitPrice: number;
}

export { Product }

4. With this approach, we can also rename exported items using the as keyword:

interface Product {
  name: string;
  unitPrice: number;
}

export { Product as Stock }

Importing allows us to import items from an exported module. We do this using an import statement that includes the item names to import in curly braces and the file path to get the items from (excluding the ts extension). We can only import items that are exported in the other module file.

1. Let's resolve the issue with our OrderDetail class by importing the Product interface:

import { Product } from "./product";

class OrderDetail {
  product: Product;
  quantity: number;
  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

2. We can rename imported items using the as keyword in an import statement. We then reference the item in our code using the new name:

import { Product as Stock } from "./product";

class OrderDetail {
  product: Stock;
  quantity: number;
  getTotal(discount: number): number {
    const priceWithoutDiscount = this.product.unitPrice * this.quantity;
    const discountAmount = priceWithoutDiscount * discount;
    return priceWithoutDiscount - discountAmount;
  }
}

We can specify a single item that can be exported by default using the default keyword:

export default interface {
  name: string;
  unitPrice: number;
}

Notice that we don't need to name the interface. We can then import a default exported item using an import statement without the curly braces with a name of our choice:

import Product from "./product";