Introduction to TypeScript: Why Add Types to JavaScript?

TypeScript for beginners can feel like extra complexity at first. Why add types to JavaScript, which works fine without them? The answer becomes obvious once you’ve chased a Cannot read properties of undefined bug for an hour. TypeScript catches that before you ever run the code.

What TypeScript Actually Is

TypeScript is JavaScript with optional type annotations. You write .ts files instead of .js, and a compiler converts them to plain JavaScript. The types disappear at runtime — they’re only for development-time safety.

// JavaScript — no safety
function greet(name) {
  return `Hello, ${name.toUpperCase()}`;
}
greet(42); // Runtime error: name.toUpperCase is not a function

// TypeScript — error caught before running
function greet(name: string): string {
  return `Hello, ${name.toUpperCase()}`;
}
greet(42); // TypeScript error: Argument of type 'number' is not assignable to parameter of type 'string'

Basic Types

let username: string = "kaikobud";
let age: number = 28;
let isActive: boolean = true;
let tags: string[] = ["python", "typescript"];
let anything: unknown = "could be anything";  // safer than 'any'

Interfaces — Describing Object Shapes

interface User {
  id: number;
  name: string;
  email: string;
  role?: string;  // optional property
}

function displayUser(user: User): void {
  console.log(`${user.name} (${user.email})`);
}

const user: User = { id: 1, name: "Kaikobud", email: "kai@kaiko.dev" };
displayUser(user); // TypeScript verifies the shape

Union Types and Type Guards

type Status = "active" | "inactive" | "pending";

function getStatusColor(status: Status): string {
  if (status === "active") return "green";
  if (status === "inactive") return "red";
  return "yellow";
}

// Union of different types
function formatId(id: string | number): string {
  return String(id);
}

Conclusion

TypeScript for beginners pays dividends quickly. Start by adding types to function parameters and return values in an existing JavaScript project — that alone catches a surprising number of bugs. Then add interfaces for your data objects. You don’t need to type everything; even partial TypeScript is better than none.

Read next: Six ES6 Features Every JavaScript Developer Should Know

External resource: TypeScript Handbook — The Basics