Module 1 - Introduction to TypeScript

This module lays the foundation of TypeScript. Before writing any code, you must understand what TypeScript is, why it exists, and where it fits in the JavaScript ecosystem.

---

1. What is TypeScript?

TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript.
It is developed and maintained by Microsoft and adds optional static typing to JavaScript.

What TypeScript Really Does

TypeScript extends JavaScript by adding types, interfaces, and compile-time error checking while maintaining 100% compatibility with existing JavaScript code.

Key Characteristics of TypeScript

• Optional static typing
• Enhanced IDE support with IntelliSense
• Compile-time error detection
• Modern JavaScript features (ES6+)
• Seamless integration with JavaScript libraries
• Scalability for large applications

Why TypeScript?

• Type Safety: Catch errors at compile-time, not runtime
• Better Tooling: Enhanced autocomplete, navigation, and refactoring
• Self-Documenting Code: Types serve as inline documentation
• Easier Refactoring: Confidently rename and restructure code
• Team Collaboration: Clear contracts between modules

---

2. TypeScript vs JavaScript

Feature	JavaScript	TypeScript
Type System	Dynamic, loosely typed	Static, strongly typed
Compilation	Interpreted directly	Compiled to JavaScript
Error Detection	Runtime	Compile-time
IDE Support	Basic	Advanced (IntelliSense)
Learning Curve	Easier initially	Steeper but worthwhile
File Extension	.js	.ts

Key Insight

TypeScript is JavaScript with types. Every valid JavaScript file is a valid TypeScript file (just rename .js to .ts).

---

3. TypeScript Ecosystem

Where TypeScript is Used

• Frontend Frameworks: Angular (built with TS), React, Vue
• Backend: Node.js, Nest.js, Express with TS
• Mobile: React Native, Ionic
• Desktop: Electron
• Libraries: Many popular npm packages now ship with TypeScript definitions

Popular Projects Using TypeScript

• Visual Studio Code
• Angular
• Nest.js
• TypeORM
• Prisma
• RxJS

---

4. How TypeScript Works

graph LR
    A[Write TypeScript Code<br/>.ts files] --> B[TypeScript Compiler<br/>tsc]
    B --> C[JavaScript Output<br/>.js files]
    C --> D[Run in Browser/Node.js]

The Compilation Process

1. Write: Create TypeScript files (.ts)
2. Compile: Use tsc (TypeScript compiler) to transpile
3. Output: Generate JavaScript files (.js)
4. Execute: Run JavaScript in browser or Node.js

Transpilation

TypeScript doesn't execute directly. It transpiles (transforms) to JavaScript first.

---

5. Setting Up Your Environment

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager
• Code Editor (VS Code recommended)

Installation

# Install TypeScript globally
npm install -g typescript

# Check TypeScript version
tsc --version

# Expected output: Version 5.x.x

Create Your First TypeScript Project

# Create project folder
mkdir my-ts-project
cd my-ts-project

# Initialize npm project
npm init -y

# Install TypeScript as dev dependency
npm install --save-dev typescript

# Create tsconfig.json
npx tsc --init

---

6. Your First TypeScript Program

Create hello.ts

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

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

Compile and Run

# Compile TypeScript to JavaScript
tsc hello.ts

# This creates hello.js
# Run the JavaScript file
node hello.js

# Output: Hello, TypeScript!

What Just Happened?

• : string is a type annotation (not valid in JavaScript)
• tsc compiled it to valid JavaScript
• The generated hello.js has no type annotations

---

7. VS Code Setup (Recommended)

Install VS Code

Download from: https://code.visualstudio.com/

Recommended Extensions

• TypeScript Language: Built-in
• ESLint: Code quality
• Prettier: Code formatting
• Path Intellisense: Auto-complete file paths
• Error Lens: Inline error display

VS Code Features for TypeScript

• ✅ IntelliSense autocomplete
• ✅ Inline error detection
• ✅ Go to definition (F12)
• ✅ Rename symbol (F2)
• ✅ Quick fixes (Ctrl+.)

---

8. Understanding tsconfig.json

The tsconfig.json file configures the TypeScript compiler.

Basic Configuration

{
  "compilerOptions": {
    "target": "ES2020",           // JavaScript version to output
    "module": "commonjs",          // Module system
    "outDir": "./dist",            // Output directory
    "rootDir": "./src",            // Source directory
    "strict": true,                // Enable all strict type checks
    "esModuleInterop": true,       // Better CommonJS interop
    "skipLibCheck": true,          // Skip type checking of .d.ts files
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],         // Files to compile
  "exclude": ["node_modules"]      // Files to ignore
}

Key Compiler Options

Option	Description
target	ECMAScript version for output JS
module	Module system (commonjs, ES6, etc.)
strict	Enable strict type checking
outDir	Output folder for compiled JS
rootDir	Root folder of source files

---

9. TypeScript Playground

Online Resources

• TypeScript Playground: https://www.typescriptlang.org/play
  • Try TypeScript in browser
  • See compiled JavaScript side-by-side
  • Share code snippets

Pro Tip

Use the playground to quickly test TypeScript features without setup!

---

10. Key Takeaways

✅ TypeScript = JavaScript + Types
✅ Compile-time safety catches errors early
✅ Better developer experience with IntelliSense
✅ Scales well for large applications
✅ 100% JavaScript compatible

---

Practice Exercises

Exercise 1: Install TypeScript

1. Install Node.js
2. Install TypeScript globally
3. Verify installation with tsc --version

Exercise 2: First Program

1. Create calculator.ts
2. Write a function that adds two numbers with type annotations
3. Compile and run it

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

console.log(add(5, 10)); // Output: 15

Exercise 3: Explore the Playground

1. Visit https://www.typescriptlang.org/play
2. Write a function with incorrect types
3. Observe the error messages

---

Next Steps

In Module 2, we'll dive into Basic Types and learn about TypeScript's type system including primitives, arrays, tuples, and enums.

Assignment

Set up your TypeScript development environment and create your first program that takes a name and age, then prints a greeting message with type annotations.