Compiling TypeScript Project

Back to: TypeScript Tutorial

TypeScript is a programming language that allows developers to write JavaScript code using static types. It can be used to develop large-scale applications and libraries that run in different environments. To compile a TypeScript project, you need to use the TypeScript compiler (tsc), which can be installed using npm.

Compiling a TypeScript project involves the following steps:

1. Set up the project structure
2. Write the TypeScript code
3. Configure the TypeScript compiler options
4. Compile the TypeScript code to JavaScript

Let’s go through these steps in detail with a code example.

Step 1: Set up the Project Structure

First, you need to set up the project structure by creating a directory for the project and initializing it with npm. You can do this using the following commands:

mkdir myproject
cd myproject
npm init -y

This creates a directory called myproject and initializes it with npm, using the default options (-y).

Step 2: Write the TypeScript Code

Next, you need to write the TypeScript code for your project. Let’s say we want to create a simple app that prints a message to the console. Here’s the TypeScript code for the app:

// file: app.ts
const message: string = "Hello, TypeScript!";
console.log(message);

In this code, we define a constant called message of type string, which contains the message we want to print. We then use the console.log function to print the message to the console.

Step 3: Configure the TypeScript Compiler Options

To configure the TypeScript compiler options, you need to create a tsconfig.json file in the root directory of your project. This file specifies the compiler options and other settings for your project. Here’s an example tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts"
  ]
}

In this file, we specify the following compiler options:

• target: specifies the version of JavaScript the compiler should output. In this case, we set it to "ES5".
• module: specifies the module format the compiler should use. In this case, we set it to "commonjs".
• outDir: specifies the directory where the compiled JavaScript files should be output. In this case, we set it to "dist".
• include: specifies the files or directories to include in the compilation process. In this case, we include all .ts files under the src directory.

Step 4: Compile the TypeScript Code to JavaScript

To compile the TypeScript code to JavaScript, you need to run the tsc command in the root directory of your project. This command compiles all TypeScript files in the src directory and outputs the result to the dist directory, according to the options specified in the tsconfig.json file.

tsc

After running this command, you should see a new directory called dist, which contains the compiled JavaScript files. In our example, it should contain a file called app.js, which contains the following code:

"use strict";
var message = "Hello, TypeScript!";
console.log(message);

This code is equivalent to the TypeScript code we wrote earlier, but with all type annotations removed.

To run the app, you can use the node command to execute the app.js file:

node dist/app.js
``

If everything was set up correctly, you should see the message “Hello, TypeScript!” printed to the console.

Congratulations, you have successfully compiled a TypeScript project! You can now continue to develop your project, and each time you make changes to the TypeScript code, you can run the tsc command again to recompile the code.

In summary, compiling a TypeScript project involves setting up the project structure, writing the TypeScript code, configuring the TypeScript compiler options, and compiling the code to JavaScript using the tsc command. By following these steps, you can easily develop TypeScript projects and take advantage of its powerful features.