TypeScript

Introduction

TypeScript (TS) is a strongly typed, object-oriented programming language that extends JavaScript by adding static types. Developed by Microsoft, TypeScript is designed for scalability, maintainability, and developer productivity. It compiles down to JavaScript and is widely used in frontend and backend development.

Why Use TypeScript?

• Static Typing – Catches errors at compile time.

• Better Code Maintainability – Enforces coding standards and documentation.

• Object-Oriented Features – Supports interfaces, classes, and modules.

• Works with JavaScript – TypeScript is a superset of JavaScript.

• Great for Large-Scale Projects – Used by companies like Microsoft, Google, and Airbnb.

• IDE Support – Enhanced autocompletion, refactoring, and type checking in VS Code.

Installing TypeScript

1️⃣ Install TypeScript

Install Globally Using npm

npm install -g typescript

2️⃣ Writing Your First TypeScript Program

Create a new file hello.ts and add:

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

console.log(greet("TypeScript 🚀"));

Compile & Run the Code

tsc hello.ts  # Compiles to hello.js
node hello.js # Runs the JavaScript output

Output: "Hello, TypeScript 🚀"

TypeScript Basics

1️⃣ Variables & Data Types

let firstName: string = "Alice";
let age: number = 25;
let isDeveloper: boolean = true;

const skills: string[] = ["TypeScript", "React", "Node.js"];

console.log(firstName, age, isDeveloper, skills);

2️⃣ Functions in TypeScript

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3)); // Output: 8

Optional & Default Parameters:

function greet(name: string, lang: string = "English"): string {
    return `Hello, ${name}! Language: ${lang}`;
}

console.log(greet("Alice"));
console.log(greet("Bob", "French"));

3️⃣ Interfaces in TypeScript

Define an Interface

interface User {
    name: string;
    age: number;
    isAdmin?: boolean;  // Optional Property
}

const user: User = { name: "Alice", age: 25 };
console.log(user);

4️⃣ Classes & Object-Oriented Programming (OOP)

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hello, my name is ${this.name}.`;
    }
}

const person1 = new Person("Alice", 30);
console.log(person1.greet());

TypeScript for Web Development

1️⃣ Setting Up a TypeScript Project

Initialize a TypeScript Project

tsc --init

This creates a tsconfig.json file to configure TypeScript.

2️⃣ Using TypeScript with React (Frontend)

Create a React App with TypeScript

npx create-react-app my-app --template typescript

Using TypeScript in React

interface ButtonProps {
    label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
    return <button>{label}</button>;
};

export default Button;

3️⃣ Using TypeScript with Node.js (Backend)

Install Required Packages

npm install express cors body-parser
npm install --save-dev @types/node @types/express

Create a TypeScript Express Server

import express, { Request, Response } from "express";

const app = express();
const PORT = 3000;

app.get("/", (req: Request, res: Response) => {
    res.send("Hello from TypeScript Express Server!");
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Run

tsc && node dist/index.js