Mental Model and Setup

🧑‍🏫 Sabse pehle — simple mein samjho#

TypeScript (TS) kuch naya ajeeb language nahi hai. Yeh sirf JavaScript + Types hai. Iska mental model bilkul simple hai: TS code kabhi browser mein nahi chalta. Browser sirf JavaScript samajhta hai. TS sirf ek "development tool" hai jo code likhte waqt tumhari galtiyan batata hai (jaise spell checker). Compilation ke time pe saare types "erase" ho jate hain (gayab ho jate hain), aur baaki bachta hai pure JavaScript.

Socho TS ek strict teacher hai. Code submit (compile) karne se pehle woh check karega. Agar sab theek hai, toh woh tumhe normal JS file de dega jo production mein chalegi.

JavaScript vs TypeScript#

JavaScript (Dynamic Typing)#

In JavaScript, variable types are determined at runtime. If you reassign a number to a string, an error will only appear when the code actually runs.

let myVar = "Hello";
myVar = 42; // No error, JS allows this
myVar.toUpperCase(); // Runtime error! You cannot uppercase a number

TypeScript (Static Typing)#

In TypeScript, errors are caught while you write the code (Compile-time).

let myVar: string = "Hello";
myVar = 42; // ❌ ERROR: Type 'number' is not assignable to type 'string'

Compilation (The Magic)#

As mentioned, TypeScript does not run in the browser or Node.js directly. You run the tsc (TypeScript Compiler) command, which converts .ts files into standard .js files. This process is called Transpilation.

Input (file.ts):

const add = (a: number, b: number): number => {
    return a + b;
};

Output (file.js):

const add = (a, b) => {
    return a + b;
};

As you can see, the types are completely erased. This is why TypeScript code is not slower than JavaScript — because in production, only the plain JavaScript executes.

Setting up TypeScript#

In a standard project:

1. npm install -D typescript
2. npx tsc --init (Creates a tsconfig.json containing the compiler rules)
3. To compile your .ts files: run npx tsc

In React (using Vite, where TS is configured out of the box):

npm create vite@latest my-react-ts-app -- --template react-ts

Here, Vite internally uses tools like esbuild or SWC, which provide extremely fast transpilation.