TypeScript Confidence: The Safety Net You Didn't Know You Needed

I once spent four hours debugging a bug that turned out to be a typo.

usrName instead of userName.

Four hours. Because JavaScript happily accepted my typo, created a new variable called usrName, and never told me anything was wrong. The bug only showed up when a user clicked a specific button in a specific order.

TypeScript would have caught that in 0.3 seconds.

This article isn't about becoming a TypeScript expert. It's about learning just enough to stop wasting hours on preventable mistakes. Think of it as installing spell-check for your code—it catches the obvious errors so you can focus on the interesting problems.

No prior TypeScript experience required. If you've written any JavaScript (even just copying and pasting), you can learn this.

Explain it three ways

What TypeScript actually does

TypeScript is JavaScript with guardrails.

Regular JavaScript lets you do anything:

let name = "Alex";
name = 42;        // JavaScript: "Sure, whatever"
name = [1, 2, 3]; // JavaScript: "Still fine by me"

TypeScript asks questions:

let name: string = "Alex";
name = 42;        // TypeScript: "Wait, that's a number, not a string"
name = [1, 2, 3]; // TypeScript: "That's an array, not a string"

Those red squiggles appear instantly. You fix the mistake before running anything.

The five types you'll use daily

You don't need to learn every TypeScript feature. These five cover 90% of real-world code:

1. string, number, boolean

The basics:

let name: string = "Alex";
let age: number = 28;
let isOnline: boolean = true;

TypeScript often figures these out automatically:

let name = "Alex";  // TypeScript knows this is a string
let age = 28;       // TypeScript knows this is a number

2. Arrays

A list of things:

let names: string[] = ["Alex", "Sam", "Jordan"];
let scores: number[] = [98, 87, 92];

TypeScript prevents mixing types:

let names: string[] = ["Alex", 42]; // Error: 42 is not a string

3. Objects with interfaces

This is where TypeScript shines. Define what your data looks like:

interface User {
  name: string;
  email: string;
  age?: number;  // The ? means optional
}

const user: User = {
  name: "Alex",
  email: "alex@example.com"
  // age is optional, so we can skip it
};

Now TypeScript catches mistakes:

const user: User = {
  name: "Alex",
  emal: "alex@example.com"  // Typo! TypeScript: "Did you mean 'email'?"
};

4. Function types

Tell TypeScript what goes in and what comes out:

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

greet("Alex");   // ✅ Works
greet(42);       // ❌ Error: expected string, got number

For functions that don't return anything:

function logMessage(message: string): void {
  console.log(message);
}

5. Union types

When something could be one of several types:

let status: "loading" | "success" | "error" = "loading";

status = "success";  // ✅ Fine
status = "failed";   // ❌ Error: "failed" is not one of the options

This is incredibly useful for state management:

type ButtonState = "idle" | "loading" | "disabled";

function setButtonState(state: ButtonState) {
  // TypeScript knows state can only be one of three things
}

Reading TypeScript errors (they're trying to help)

TypeScript errors look scary but follow a pattern:

Error 1: Type mismatch

Type 'number' is not assignable to type 'string'

Translation: You're putting a number where a string should go.

Fix: Check if you need toString() or if your type definition is wrong.

Error 2: Missing property

Property 'email' does not exist on type 'User'

Translation: You're trying to access something that isn't defined.

Fix: Add the property to your interface, or check for typos.

Error 3: Possibly undefined

Object is possibly 'undefined'

Translation: This value might not exist, and you're using it like it always does.

Fix: Add a check: if (user) { user.name } or use optional chaining: user?.name

TypeScript + React

If you're using React, here's how to type your components:

Typing props

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Now TypeScript catches when you forget required props:

<Button />  // Error: missing required props 'label' and 'onClick'
<Button label="Click me" onClick={() => alert('Hi')} />  // ✅ Works

Typing state

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

Typing events

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  console.log("Clicked!");
}

Quick wins: Immediate improvements

1. Enable strict mode

In your tsconfig.json:

{
  "compilerOptions": {
    "strict": true
  }
}

This catches more errors. Yes, you'll see more red squiggles at first. That's good—those are bugs you would have shipped otherwise.

2. Hover for information

In VS Code, hover over any variable to see its type. This works even without explicit annotations—TypeScript infers types automatically.

3. Use the "as const" trick

const COLORS = {
  primary: "#3b82f6",
  secondary: "#8b5cf6"
} as const;

// Now TypeScript knows the exact values, not just "string"

Your practice challenge

Convert this JavaScript to TypeScript:

function createUser(name, email, age) {
  return {
    id: Math.random().toString(),
    name,
    email,
    age,
    createdAt: new Date()
  };
}

const users = [];
users.push(createUser("Alex", "alex@example.com", 28));

Add:

• An interface for the user object
• Types for the function parameters and return value
• A typed array for users

What's next?

TypeScript is a skill that compounds. The more you use it, the more natural it feels. Start by adding types to new code, then gradually type existing code when you touch it.

Interactive lab available

Want to practice these concepts hands-on? The companion lab lets you:

• Complete typing challenges with instant feedback
• See real TypeScript errors and learn to fix them
• Practice typing React components
• Track your progress through each concept

<a href="/learn-ai-lab/skill-boosters/typescript-confidence" className="text-purple-300 hover:text-purple-100 underline">→ Try the TypeScript Confidence Lab</a>