Typescript Pt. 7 - Modules with TypeScript

Modules in TypeScript

• Modules are a way to organize code in a file.
• It helps to keep the code clean, organized, and easy to maintain.
• The general idea is to split the code into multiple files. A basic example is to split the code into a main.ts file and a utils.ts file as shown below.

// main.ts
import { add } from "./utils";

console.log(add(1, 2));

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

• The main.ts file imports the add function from the utils.ts file.
• The add function is exported from the utils.ts file using the export keyword.
• The add function is imported in the main.ts file using the import keyword.
• The add function is used in the main.ts file.
• The utils.ts file contains two functions, add and subtract.

Using the export Keyword

• The export keyword is used to export a function, variable, or class from a module.
• The export keyword can be used with the function keyword to export a function.
• It tells that we are working with Modules.

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}

export function randomIt<T>(arg: T[]): T {
  const idx = Math.floor(Math.random() * arg.length);
  return arg[idx];
}

// main.ts
import { add, randomIt } from "./utils.js";

console.log(add(1, 2));
console.log(randomIt([1, 2, 3, 4, 5]));

Setting the module Option

• The module option in the tsconfig.json file is used to specify the module code generation.
• The module option can be set to commonjs, amd, system, umd, es2015, es2020, or esnext.
• The module option is set to commonjs by default.
• In order to use the import and export keywords, the module option must be set to es2015 or higher in the tsconfig.json file.

{
  "compilerOptions": {
    "module": "es2015"
  }
}

• In the index.html file, we need to add the type="module" attribute to the script tag.

<script type="module" src="main.js"></script>

Importing and Exporting Types

• The export keyword can be used with the type keyword to export a type.
• The import keyword can be used with the type keyword to import a type.

// utils.ts
export type User = {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
};

// main.ts
import { User } from "./utils.js";


const user: User = {
  id: 1,
  name: "Leanne Graham",
  username: "Bret",
  email: "user@gmail.com",
  address: {
    street: "Kulas Light",
    suite: "Apt. 556",
    city: "Gwenborough",
    zipcode: "92998-3874",
    geo: {
      lat: "-37.3159",
      lng: "81.1496",
    };
    };
    phone: "1-770-736-8031 x56442",

};