The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Compiling TypeScript

Next ►
►

In this section, we will cover how to compile TypeScript code into JavaScript. Compiling is a crucial step because browsers and Node.js run JavaScript, not TypeScript. By the end of this section, you will understand how to use the TypeScript compiler (tsc) to convert your TypeScript code into JavaScript.

Key Concepts

  1. TypeScript Compiler (tsc): The command-line tool used to compile TypeScript files.
  2. Configuration File (tsconfig.json): A file that specifies the root files and the compiler options required to compile the project.
  3. Compilation Options: Various settings that control the compilation process.

Using the TypeScript Compiler (tsc)

Installing TypeScript

First, ensure you have TypeScript installed. You can install it globally using npm:

npm install -g typescript

Basic Compilation

To compile a TypeScript file, use the tsc command followed by the filename:

tsc filename.ts

For example, if you have a file example.ts:

// example.ts
let message: string = "Hello, TypeScript!";
console.log(message);

Running tsc example.ts will generate a example.js file with the following content:

// example.js
var message = "Hello, TypeScript!";
console.log(message);

Configuration File (tsconfig.json)

For larger projects, it's more efficient to use a tsconfig.json file to manage your TypeScript configuration. This file allows you to specify the root files and compiler options.

Creating tsconfig.json

You can create a tsconfig.json file by running:

tsc --init

This command generates a tsconfig.json file with default settings. Here is an example of a simple tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}
  • target: Specifies the JavaScript version to compile to (e.g., es5, es6).
  • module: Specifies the module system (e.g., commonjs, es6).
  • strict: Enables all strict type-checking options.
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • include: Specifies the files to include in the compilation.

Compiling with tsconfig.json

Once you have a tsconfig.json file, you can compile your project by simply running:

tsc

This command will read the configuration from tsconfig.json and compile all the specified files.

Practical Example

Let's create a small project to see how this works in practice.

  1. Create Project Structure:
my-project/
├── src/
│   └── index.ts
└── tsconfig.json
  1. Write TypeScript Code (src/index.ts):
// src/index.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const user = "World";
console.log(greet(user));
  1. Create tsconfig.json:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}
  1. Compile the Project:
tsc

After running tsc, you will find the compiled JavaScript file in the dist directory:

my-project/
├── dist/
│   └── index.js
├── src/
│   └── index.ts
└── tsconfig.json

The dist/index.js file will contain:

// dist/index.js
function greet(name) {
    return "Hello, " + name + "!";
}
var user = "World";
console.log(greet(user));

Common Mistakes and Tips

  • Missing tsconfig.json: Ensure you have a tsconfig.json file for larger projects to manage configurations efficiently.
  • Incorrect Paths: Double-check the paths in the include and outDir options to ensure they are correct.
  • Compiler Errors: Pay attention to compiler errors and warnings. They help you catch potential issues early.

Summary

In this section, you learned how to compile TypeScript code using the TypeScript compiler (tsc). You also learned how to create and use a tsconfig.json file to manage your project's compilation settings. Understanding these concepts is essential for working efficiently with TypeScript in any project.

Next, we will dive into more complex types and how to work with them in TypeScript.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved