Learn React with TypeScript 3

Structuring code into modules

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