Blog
4 min read

What Is TypeScript? JavaScript With Labels, Explained for Beginners

TypeScript is JavaScript plus types: labels that say what kind of value each thing holds, checked before your code runs. What it looks like, why AI tools default to it, what .ts and .tsx files are, and how to read the red squiggles.

Open almost any project an AI tool generated in the last two years and the files end in .ts or .tsx, not .js. That's TypeScript: JavaScript with one addition — types, little labels that say what kind of value something is supposed to be. A program called the TypeScript compiler reads those labels and tells you when the code doesn't match them, before anyone runs it.

(New to JavaScript itself? Start with HTML, CSS, and JavaScript explained.)

What it looks like

Plain JavaScript:

function addShipping(price, shipping) {
  return price + shipping
}

addShipping("19.99", 5) // "19.995" — text glued together, not added

The same thing in TypeScript:

function addShipping(price: number, shipping: number): number {
  return price + shipping
}

addShipping("19.99", 5)
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.

The : number parts are the types. Your editor underlines the mistake in red the moment you type it. In plain JavaScript you'd find out when a customer saw a total of $19.995 on the checkout page.

Types you'll see everywhere

Type Means Example
string Text "hello"
number Any number 42, 3.14
boolean True or false true
string[] A list of strings ["a", "b"]
User | null A User, or nothing the result of a lookup
"draft" | "published" Exactly one of these values a post's status

And you can describe the shape of an object:

type User = {
  id: string
  email: string
  name?: string      // the ? means "might be missing"
}

Now anywhere a User is used, TypeScript knows it has an email, and it will complain if code tries to read user.emial.

It all turns back into JavaScript

Browsers and Node.js run JavaScript, not TypeScript. So before your app runs, a build tool (Vite, Next.js, or the tsc compiler) strips the types out and produces plain JavaScript. The types exist only to catch mistakes while you're writing — they cost nothing at runtime and don't protect you at runtime either. Data arriving from a form or an API can still be anything, which is why you also validate input.

.ts vs .tsx

  • .ts — TypeScript.
  • .tsx — TypeScript that also contains JSX, the HTML-looking syntax React uses. React components live in .tsx files.

Why AI tools love it

AI coding tools default to TypeScript for a practical reason: types give them instant feedback. When an agent renames a field, the compiler lists every place that broke; the agent fixes them; the compiler confirms. Without types, those mistakes hide until runtime. We wrote a whole post on this: why TypeScript makes AI-generated code safer.

Reading a TypeScript error

TypeScript errors look scary but follow a pattern: "Type X is not assignable to type Y." Read it as "you gave me an X where I expected a Y."

Property 'name' does not exist on type '{ id: string; email: string; }'.

means "you're reading .name from something that, as far as I know, doesn't have a name." Either the data really lacks it, or the type definition is missing it. Fix whichever is wrong. (More on this in how to read an error message.)

The escape hatches (and why to avoid them)

  • any — turns type-checking off for that value. Handy in a pinch, but every any is a hole where bugs slip through. AI tools reach for it when they're stuck; ask them to replace it with a real type.
  • // @ts-ignore — silences the error on the next line. Almost always hides a real problem.
  • as SomeType — tells TypeScript "trust me." If you're wrong, it won't notice.

If a project is full of these, its types are decoration rather than protection.

Should you learn TypeScript or JavaScript first?

They're the same language; TypeScript just adds labels. If you're reading AI-generated code, you're already reading TypeScript. Learn to read the types — they're often the clearest documentation of what a function expects — and you've learned most of what matters.

The summary

  • TypeScript is JavaScript plus type labels, checked before the code runs.
  • The types are removed at build time; they catch mistakes, they don't change behaviour.
  • .tsx files are TypeScript with React's JSX in them.
  • Errors read as "you gave me X where I expected Y."
  • Treat any and @ts-ignore as warning signs, not fixes.

EasySpawn gives you a persistent server where Claude Code can run your TypeScript build and type-checker on every change — and keep going after you close your laptop. See how it works or join the waitlist.

Related: Why TypeScript Makes AI-Generated Code Safer · What Is a Framework? · What Is React? · Linters and Formatters Explained

Keep reading