TypeScript Introduction

What is TypeScript?

TypeScript is a strongly typed superset of JavaScript that adds optional static typing to the language. It is developed and maintained by Microsoft and is widely used for building large-scale applications. TypeScript compiles to JavaScript, which means it works on any browser, any JavaScript engine, and any framework that supports JavaScript.

In simple terms, TypeScript is JavaScript with extra features like type safety, better tooling, and improved readability. It helps developers catch errors early and write more structured and maintainable code.

Why Use TypeScript?

TypeScript provides several benefits over JavaScript:

1. Static Typing – Helps catch errors at compile time instead of runtime.
2. Improved Code Quality – Makes the code more readable and maintainable.
3. Better Tooling & Auto-completion – Supports IDE features like IntelliSense, making development faster.
4. Object-Oriented Programming (OOP) Features – Includes interfaces, classes, and modules for better structuring.
5. Cross-Browser Compatibility – Since it compiles to JavaScript, it works everywhere JavaScript does.
6. Large Project Scalability – Perfect for building large applications with a clean structure.

How TypeScript Works?

TypeScript does not run directly in browsers. Instead, it needs to be compiled into JavaScript.

👉 Process of TypeScript Execution:

1. Write TypeScript code (.ts file).
2. Compile it using the TypeScript compiler (tsc).
3. The compiler converts the code into a standard JavaScript file (.js).
4. The JavaScript file runs in the browser or Node.js.

Example:

TypeScript Code (app.ts):

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

Compiled JavaScript (app.js):

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

This means TypeScript helps in writing better code but ultimately runs as JavaScript.

TypeScript vs JavaScript: Key Differences

Feature	JavaScript	TypeScript
Typing	Dynamically typed (errors at runtime)	Statically typed (errors at compile time)
Compilation	No compilation needed	Requires compilation to JavaScript
Tooling	Limited IntelliSense	Better IntelliSense and error detection
Object-Oriented Support	Partial support	Full support (Classes, Interfaces, Generics)
Code Readability & Maintainability	Can become complex in large projects	Easier to manage large projects

Key Features of TypeScript

1️⃣ Static Typing

TypeScript allows developers to define types for variables, reducing runtime errors.

Example:

let age: number = 25;  // Correct ✅
age = "twenty-five";   // Error ❌

2️⃣ Interfaces

Interfaces help define structured objects, making the code more maintainable.

Example:

interface Person {
  name: string;
  age: number;
}

let student: Person = { name: "John", age: 22 };
console.log(student.name); // Output: John

3️⃣ Classes & OOP Features

TypeScript supports object-oriented programming concepts like classes and inheritance.

Example:

class Car {
  brand: string;

  constructor(brand: string) {
    this.brand = brand;
  }

  drive() {
    console.log(`Driving a ${this.brand}`);
  }
}

let myCar = new Car("Tesla");
myCar.drive(); // Output: Driving a Tesla

4️⃣ Better Code Completion & Refactoring

TypeScript offers IntelliSense, making development faster and error-free.

Setting Up TypeScript

Installation:

To use TypeScript, you need to install it globally using npm (Node Package Manager).

npm install -g typescript

To check the installed version:

tsc -v

Compiling TypeScript:

Create a TypeScript file (.ts), then compile it using:

tsc filename.ts

It generates a JavaScript file (.js) that can run in any browser or environment.

When to Use TypeScript?

✅ When working on large-scale applications for better maintainability.
✅ When you need error detection before running the code.
✅ When working with a team to ensure consistent coding standards.
✅ When using modern JavaScript features (TypeScript supports the latest JS versions).