How to combine multiple TypeScript files and convert them into single JavaScript file?

In TypeScript, the process of combining multiple files and converting them into a single JavaScript file typically involves using the TypeScript compiler options. The main steps are as follows:

1. Prepare the TypeScript Environment

First, ensure that Node.js and npm (Node Package Manager) are installed. Then, install TypeScript using npm:

bash
npm install -g typescript

2. Create TypeScript Files

Assume three TypeScript files: file1.ts, file2.ts, and file3.ts. These files may contain various functions, classes, or other modules.

3. Configure tsconfig.json

Create a tsconfig.json file in the root directory of the project. This file is the configuration file for the TypeScript project, specifying how TypeScript code should be compiled. To combine multiple files into a single JavaScript file, add the following to the configuration:

json
{
  "compilerOptions": {
    "outFile": "./output.js",
    "module": "system",
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true
  },
  "files": [
    "file1.ts",
    "file2.ts",
    "file3.ts"
  ]
}

• "outFile" specifies the path of the output file.
• "module" is set to "system" because a module loader is required to combine the files. Other options like "amd" may be used if suitable for your project environment.
• "target" specifies the ECMAScript target version, here "es5".
• "files" lists the files to be compiled.

4. Compile TypeScript Code

Run the following command in the command line to compile the project:

bash
tsc

This will compile all specified TypeScript files into a single JavaScript file output.js based on the settings in tsconfig.json.

Example:

Suppose file1.ts contains a class Person:

typescript
export class Person {
  constructor(public name: string) { }
}

file2.ts imports Person and creates an instance:

typescript
import { Person } from './file1';

let person = new Person("John");
console.log(person.name);

After compiling with the above steps, all these will be combined into output.js and can be run directly in a browser or Node.js environment.

This is the basic process for combining multiple files in TypeScript and converting them into a single JavaScript file.