TypeScript Get Started

🚀 Getting Started with TypeScript

Setting up TypeScript is simple and quick. Install Node.js, then use npm to install TypeScript globally. You can write TypeScript code in any text editor and compile it to JavaScript using the TypeScript compiler.


# Install TypeScript globally
npm install -g typescript

# Check version
tsc --version

Installation Methods

🌐

Global Install

Install TypeScript system-wide

npm install -g typescript

📦

Project Install

Install in specific project

npm install --save-dev typescript

🎮

Online Playground

Try TypeScript in browser

typescriptlang.org/play

💻

VS Code

Built-in TypeScript support

No installation needed!

🔹 Prerequisites

Before installing TypeScript, make sure you have:

Node.js: Download from nodejs.org (includes npm)
Text Editor: VS Code, Sublime Text, or any code editor
Basic JavaScript: Understanding of JavaScript fundamentals
Command Line: Basic terminal/command prompt knowledge

🔹 Step-by-Step Installation

🔸 Step 1: Install Node.js

Download and install Node.js from nodejs.org

Verify installation:

node --version
npm --version

🔸 Step 2: Install TypeScript

# Install TypeScript globally
npm install -g typescript

# Verify installation
tsc --version
# Output: Version 5.x.x

🔸 Step 3: Create Your First TypeScript File

// Create a file named hello.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

const message = greet("TypeScript");
console.log(message);

🔸 Step 4: Compile TypeScript to JavaScript

# Compile the TypeScript file
tsc hello.ts

# This creates hello.js
# Run the JavaScript file
node hello.js
# Output: Hello, TypeScript!

🔹 Creating a TypeScript Project

Set up a complete TypeScript project:

# Create project directory
mkdir my-typescript-project
cd my-typescript-project

# Initialize npm project
npm init -y

# Install TypeScript locally
npm install --save-dev typescript

# Initialize TypeScript configuration
npx tsc --init

# This creates tsconfig.json

🔹 Project Structure

Organize your TypeScript project:

my-typescript-project/
│
├── src/
│   ├── index.ts
│   └── utils.ts
│
├── dist/           (compiled JavaScript)
│
├── node_modules/
├── package.json
└── tsconfig.json

🔸 Example: src/index.ts

// src/index.ts
import { add, multiply } from './utils';

const result1 = add(5, 3);
const result2 = multiply(4, 2);

console.log(`Addition: ${result1}`);
console.log(`Multiplication: ${result2}`);

🔸 Example: src/utils.ts

// src/utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

export function multiply(a: number, b: number): number {
    return a * b;
}

🔹 Compiling Your Project

Different ways to compile TypeScript:

🔸 Compile Single File

tsc filename.ts

🔸 Compile Entire Project

# Compile all files based on tsconfig.json
tsc

🔸 Watch Mode (Auto-compile on save)

tsc --watch
# or
tsc -w

🔸 Add Scripts to package.json

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "start": "node dist/index.js"
  }
}

🔹 Using TypeScript with VS Code

VS Code has excellent TypeScript support built-in:

Features:

IntelliSense: Auto-completion and suggestions
Error Detection: Real-time error highlighting
Refactoring: Rename symbols, extract functions
Debugging: Built-in debugger for TypeScript
Extensions: ESLint, Prettier for TypeScript

🔹 Quick Start Example

Complete example to get started:

// app.ts
interface User {
    id: number;
    name: string;
    email: string;
}

class UserManager {
    private users: User[] = [];

    addUser(user: User): void {
        this.users.push(user);
        console.log(`Added user: ${user.name}`);
    }

    getUser(id: number): User | undefined {
        return this.users.find(user => user.id === id);
    }

    listUsers(): void {
        console.log("All Users:");
        this.users.forEach(user => {
            console.log(`- ${user.name} (${user.email})`);
        });
    }
}

// Usage
const manager = new UserManager();
manager.addUser({ id: 1, name: "Alice", email: "[email protected]" });
manager.addUser({ id: 2, name: "Bob", email: "[email protected]" });
manager.listUsers();

# Compile and run
tsc app.ts
node app.js

# Output:
# Added user: Alice
# Added user: Bob
# All Users:
# - Alice ([email protected])
# - Bob ([email protected])