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:
- Set up the project structure
- Write the TypeScript code
- Configure the TypeScript compiler options
- 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 thesrc
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.