TypeScript Basics for Web Developers

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static type checking to help catch errors early.

Why TypeScript?

• Type Safety: Catch errors at compile time, not runtime
• Better IDE Support: Autocomplete, refactoring, and navigation
• Self-Documenting: Types serve as inline documentation
• Easier Refactoring: Confident changes with type checking

Basic Types

// Primitives
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;

// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

// Objects
interface User {
  name: string;
  age: number;
  email?: string; // Optional property
}

Functions

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

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

Interfaces and Types

Interfaces define the shape of objects:

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

Generics

Generics allow you to create reusable components:

function identity<T>(arg: T): T {
  return arg;
}

Getting Started

1. Install TypeScript: npm install -D typescript
2. Create a tsconfig.json file
3. Start writing .ts files instead of .js
4. Compile with tsc or use a build tool like Vite

TypeScript integrates seamlessly with modern frameworks like Astro, React, and Vue.