TypeScript Essentials

Lesson 1 of 23

What TypeScript is

You've learned JavaScript. TypeScript is JavaScript with types added — a layer on top that catches a whole category of bugs before your code ever runs. Every valid JavaScript program is already valid TypeScript; TypeScript just lets you describe what kind of data each variable, parameter, and function holds, and then checks that you use it correctly. It's become the standard for serious JavaScript projects, and it's a highly valuable skill.

The problem TypeScript solves

In plain JavaScript, a whole class of bugs only shows up when the code runs — often in front of a user:

function getName(user) {
  return user.nmae;     // typo: 'nmae' not 'name'
}

JavaScript happily runs this and returns undefined — no error, just a silent bug you discover later. There's nothing telling you user should have a name, or that nmae is a typo.

TypeScript catches exactly this. If you tell it user has a name property, then user.nmae is flagged as an error as you type it, before you ever run the code:

function getName(user: { name: string }) {
  return user.nmae;
  //          ^^^^ Error: Property 'nmae' does not exist.
  //               Did you mean 'name'?
}

The type annotation { name: string } tells TypeScript what user looks like, and now the typo is caught immediately, with a helpful message. That's the core value: bugs found at your desk, not in production.

Types describe your data

A type describes what kind of value something is — a string, a number, an object with certain properties. You add types with a colon:

let name: string = "Ada";       // name must be a string
let age: number = 28;           // age must be a number
let isActive: boolean = true;   // isActive must be true/false

age = "thirty";   // Error: Type 'string' is not assignable to type 'number'

Once age is typed as number, assigning a string to it is an error — caught before running. TypeScript is checking your intentions against your code.

Why TypeScript is worth learning

  • Catches bugs early — type errors, typos, wrong arguments, all found before running.
  • Better editor help — because the editor knows your types, it gives you accurate autocomplete, inline documentation, and instant error highlighting. This alone transforms the coding experience.
  • Self-documenting code — types tell the next reader (including future-you) exactly what data a function expects and returns.
  • It's the industry standard — most serious JavaScript projects and teams use TypeScript. Knowing it is increasingly expected.

It's still JavaScript

Crucially, TypeScript is JavaScript underneath. Your TypeScript code gets compiled to plain JavaScript to run (browsers and Node run JavaScript, not TypeScript). The types exist only while you write and check — they're erased in the final JavaScript. So everything you know from JavaScript still applies; TypeScript just adds the safety layer on top.

The mistake beginners make

Thinking TypeScript is a whole new language to relearn — it isn't; it's JavaScript plus type annotations. Or resisting the types as "extra work" — when in fact the small effort of adding types pays back many times over in bugs caught and better tooling. Start by adding simple types; you'll quickly feel the safety and the improved editor help.

Your turn

// This has a bug TypeScript would catch. What's wrong, given the types?
let count: number = 5;
count = "ten";   // predict the error

let user: { name: string } = { name: "Ada" };
console.log(user.naem);   // predict the error

Your turn

  1. Understand the core idea: TypeScript is JavaScript plus types, catching bugs before the code runs.
  2. Look at the examples and predict what error the type-checker would report for each bug.
  3. Remember: TypeScript compiles to plain JavaScript; the types are a compile-time safety layer.

Key points

  • TypeScript is JavaScript with types added — it catches a class of bugs BEFORE the code runs.
  • You describe your data with type annotations (name: string), and TypeScript checks you use it correctly.
  • It gives better editor autocomplete and errors, and self-documents what functions expect.
  • It compiles to plain JavaScript (types are erased) — everything you know from JS still applies.

Q&A · 0

Enrol to ask questions and join the discussion.

No questions yet — be the first to ask.