How to Install TypeScript and Build Your First App

Introduction

In this article, we’ll guide you through how to install TypeScript and build your first application step by step. We’ll start with the installation process, move on to project configuration, and finally cover compilation and execution. This guide is ideal for beginners who want to install TypeScript and get started quickly with creating TypeScript projects. By the end of the guide, you’ll have a fully functional environment and a simple app running on your system, ready for further exploration and development.

For convenience, we use Visual Studio Code as the development environment, but you can use any text editor or IDE you prefer.

At the time of writing this article, the versions used are:

• Node.js: v20.18.0
• TypeScript: 10.8.2

1. Installing TypeScript

TypeScript requires Node.js to work. If you don’t have Node.js installed, download it from nodejs.org.

For more details, refer to the official TypeScript documentation: TypeScript Docs

Global Installation

Open a terminal and run:

npm install -g typescript

Verify the installation with:

npm ts --version

2. Creating a TypeScript Project

Initialize the Project

Create a directory for the project:

mkdir my-typescript-app

Move into the directory:

cd my-typescript-app

Initialize the project with:

npm init -y

Add TypeScript to the project:

npm install typescript --save-dev

Open the project with Visual Studio Code:

code .

Create the tsconfig.json Configuration File

The tsconfig.json file allows you to configure the behavior of the TypeScript compiler. To generate it automatically with default settings, run:

tsc --init

After generating it, you can modify it to suit your needs. A basic configuration example:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

For more details on all available options, see the official documentation: tsconfig.json Reference

• target: Specifies the ECMAScript version for compilation.
• module: Defines the module system used.
• strict: Enables stricter checks for safer code.
• outDir: The folder where compiled files will be saved.
• rootDir: The folder containing the TypeScript source files.

3. Writing Your First TypeScript Code

Create a src/ directory and a file src/index.ts, then add the following code:

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

4. Compiling and Running the Code

The tsc (TypeScript Compiler) command is used to compile TypeScript (.ts) files into JavaScript (.js). Compile the TypeScript file with:

tsc

If you have configured tsconfig.json, the compiler will automatically generate JavaScript files in the dist/ directory. Run the code with Node.js:

node dist/index.js

If you want to compile a single file without tsconfig.json, you can run:

tsc src/index.ts --outDir dist

For more details on compilation commands, visit the official documentation: TypeScript CLI

5. Setting Up TypeScript Watch Mode

To automatically recompile when you modify files, use:

tsc --watch

This command will keep the compiler running, recompiling the code whenever a TypeScript file is modified.

Now you’re ready to develop with TypeScript! 🚀