Why TypeScript is a Necessary Pain (and How to Start)

Annotations can be tedious — but they save lives and careers. Catch errors early and write better code.

Frontend2026-08-157 min readTypeScript · JavaScript

In this guide

  1. The basics
  2. Interfaces and optionals
  3. The two most useful built-ins
  4. narrowing — the payoff
  5. Adopt it gradually

TypeScript is JavaScript with types that vanish at build time. The type system is there to catch mistakes before your users do, and it's the single highest-leverage tool we add to any front-end codebase.

The basics

typescript
// annotate the obvious things
function total(items: { price: number }[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// union types — one of a few
type Status = "pending" | "paid" | "failed";
const s: Status = "paid";   // "nope" would be an error

Interfaces and optionals

typescript
interface User {
  id: string;
  name: string;
  email?: string;        // optional
}

function greet(u: User): string {
  return `Hi ${u.name}`;
}

// structural typing: as long as the shape matches, it's a User
greet({ id: "1", name: "Ada" });

The two most useful built-ins

typescript
// Record — a map with fixed value type
const users: Record<string, User> = {};
users["a1"] = { id: "a1", name: "Ada" };

// Pick / Omit — slice an interface
type PublicUser = Omit<User, "email">;

narrowing — the payoff

This is where TypeScript earns its keep: it narrows union types inside conditionals, so invalid code simply doesn't compile.

typescript
function area(shape: { kind: "circle"; r: number } | { kind: "rect"; w: number; h: number }) {
  if (shape.kind === "circle") {
    return Math.PI * shape.r ** 2;   // shape is circle here
  }
  return shape.w * shape.h;          // shape is rect here
}
Enable strict: true from day one. Most of the value lives in strict mode; turning it on later is a week of pain.

Adopt it gradually

  • Rename files to .ts one at a time.
  • Let inference do the work — you don't need to annotate everything.
  • Use any as a temporary crutch, then remove it.
  • Turn on noImplicitAny early.

A week of friction buys a decade of confident refactoring. That's a trade we take every time.

Keep reading

More from the lab

Python

Web Scraping with Python: requests + BeautifulSoup

Fetch pages, parse HTML and extract clean data with requests and BeautifulSoup — politely.

Python · requests · BeautifulSoup · 8 min Web & Backend

Build a REST API with FastAPI and SQLite

From zero to a documented, validated CRUD API in one file — the fastest Python back end there is.

FastAPI · SQLite · REST · 9 min DevOps

Docker for Beginners: Containers Explained

What a container actually is, how a Dockerfile works, and how to ship an app that runs everywhere.

Docker · Containers · 8 min
Your move

Want us to build this for you?

We turn tutorials like these into production systems every day. Tell us what you need.

Start a project →