TypeScript Introduction

TypeScript is a programming language built on top of JavaScript. Microsoft created and maintains it. TypeScript adds a feature called static typing to JavaScript, which means every variable must have a defined data type. This simple addition makes large applications easier to build, debug, and maintain.

What Is TypeScript?

Think of JavaScript as a notebook where anyone can write anything in any order. TypeScript adds ruled lines to that notebook — it guides developers to write code in a structured, predictable way. TypeScript code gets converted (called compiled) into plain JavaScript before running in a browser or server.

Developer writes TypeScript code (.ts file)
            |
            v
  TypeScript Compiler (tsc)
            |
            v
  Plain JavaScript code (.js file)
            |
            v
  Browser or Node.js runs the JavaScript

This compilation step catches errors before the code runs, saving hours of debugging time.

JavaScript vs TypeScript

The key difference between JavaScript and TypeScript is type checking. In JavaScript, a variable can hold any kind of value at any time. TypeScript locks down what type of value a variable can hold.

Why Use TypeScript?

1. Catch Errors Early

TypeScript spots mistakes while writing code, not after deploying it to users. A typo in a function name or passing the wrong data type gets flagged instantly inside the code editor.

// JavaScript — no error shown until app breaks
let price = "100";
let total = price * 5;  // "100" × 5 — unexpected result!

// TypeScript — error shown immediately
let price: number = "100";  // Error: Type 'string' is not assignable to type 'number'

2. Better Code Editor Support

When TypeScript knows the type of every variable, code editors like VS Code can provide accurate auto-complete suggestions, show method names, and highlight errors in real time. This speeds up development significantly.

3. Easier Teamwork

In a team of 10 developers working on the same project, TypeScript acts as shared documentation. Any developer reading a function instantly knows what data it expects and what data it returns — no guessing needed.

4. Scales Well

Large codebases with thousands of lines become manageable because TypeScript enforces structure. Refactoring (changing existing code) becomes safe because the compiler reports every place that needs updating.

Real-World Use of TypeScript

Many major companies and open-source projects use TypeScript as their primary language:

How TypeScript Looks

TypeScript code looks almost identical to JavaScript with one major addition — type annotations. A type annotation tells TypeScript what kind of data a variable holds.

// Declaring a variable with a type annotation
let studentName: string = "Rahul";
let age: number = 25;
let isPassed: boolean = true;

// Function with typed parameters and return type
function addMarks(marks1: number, marks2: number): number {
    return marks1 + marks2;
}

let totalMarks = addMarks(85, 90);
// totalMarks = 175

The colon (:) followed by the type name is the TypeScript syntax for declaring types. This small addition carries enormous power when writing complex applications.

TypeScript Is a Superset of JavaScript

Every valid JavaScript file is also a valid TypeScript file. This means existing JavaScript projects can gradually adopt TypeScript — one file at a time — without rewriting everything from scratch.

        +----------------------------------+
        |          TypeScript              |
        |   (all JS + types + features)    |
        |  +----------------------------+  |
        |  |       JavaScript           |  |
        |  |  (works inside TypeScript) |  |
        |  +----------------------------+  |
        +----------------------------------+

Key Terms to Remember