What is TypeScript?

TypeScript is a superset of JavaScript that adds static type checking to JavaScript. It was developed by Microsoft and is now an open-source project.

Key Concepts

  1. Type Safety: TypeScript catches errors at compile-time, not runtime
  2. JavaScript Compatibility: All valid JavaScript is valid TypeScript
  3. Compilation: TypeScript compiles to JavaScript (any version you target)

Why Use TypeScript?

Benefits

  1. Early Error Detection: Find bugs before your code runs
  2. Better IDE Support: Autocomplete, refactoring, and navigation
  3. Self-Documenting Code: Types serve as inline documentation
  4. Improved Refactoring: Safe to rename and restructure code
  5. Team Collaboration: Types make code easier to understand

Example: JavaScript vs TypeScript

JavaScript (Runtime Error):

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

add(5, "10"); // Returns "510" (string concatenation) - Bug!

TypeScript (Compile-Time Error):

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

add(5, "10"); // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

TypeScript Compiler (tsc)

TypeScript code must be compiled to JavaScript before it can run in browsers or Node.js.

Installation

npm install -g typescript
# or
npm install --save-dev typescript

Compiling

# Compile a single file
tsc app.ts

# Compile with watch mode
tsc app.ts --watch

# Compile entire project
tsc

TypeScript Configuration (tsconfig.json)

The tsconfig.json file configures how TypeScript compiles your code.

Basic Configuration

{
  "compilerOptions": {
    "target": "ES2020",        // JavaScript version to compile to
    "module": "commonjs",      // Module system
    "outDir": "./dist",        // Output directory
    "rootDir": "./src",        // Source directory
    "strict": true             // Enable strict type checking
  }
}

Important Compiler Options

  • target: JavaScript version (ES5, ES2015, ES2020, etc.)
  • module: Module system (commonjs, ES2015, etc.)
  • strict: Enable all strict type checking options
  • noImplicitAny: Error on variables with implicit any type
  • strictNullChecks: null and undefined are not assignable to other types

Type System Overview

TypeScript's type system is: - Structural: Types are based on shape, not name - Gradual: You can adopt TypeScript incrementally - Optional: Types are optional (but recommended!)

Your First TypeScript Program

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

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

Compile and run:

tsc greeting.ts
node greeting.js

TypeScript vs JavaScript

Feature JavaScript TypeScript
Type Checking Runtime Compile-time
Type Annotations No Yes
Interfaces No Yes
Generics No Yes
Compilation No Yes (to JS)

Common Misconceptions

  1. "TypeScript is a different language"
    → No, it's JavaScript with types. All JS is valid TS.

  2. "TypeScript makes code slower"
    → No, types are removed during compilation. Runtime performance is the same.

  3. "I need to type everything"
    → No, TypeScript can infer many types automatically.

  4. "TypeScript prevents all bugs"
    → No, it catches type-related errors, but logic errors still need testing.

Next Steps

Now that you understand what TypeScript is, let's learn about Basic Types.