What Is TypeScript?
JavaScript with a spell-checker that knows what type every variable is
TypeScript is JavaScript with a type system. Your browser still runs JavaScript — TypeScript is a tool that checks your code before it runs. Think of it as a spell-checker that also understands logic: it knows that `user.name` returns a string, not a number, and it will warn you if you try to use it like a number.
The spreadsheet analogy
Types are like column headers in a spreadsheet
In a spreadsheet, a column labelled "Age" is expected to contain numbers. If someone types "twenty-two" in text, the formulas that calculate averages will break. TypeScript is like a spreadsheet that enforces column types — it catches the mistake before you try to run the calculation.
Why developers use TypeScript
- Catch bugs before they ship — Type errors appear in your editor as you type, not in production at 2am
- Better editor autocomplete — The editor knows what properties an object has, so it can suggest them
- Safer refactoring — Rename a function and TypeScript tells you every file that needs updating
- Self-documenting code — Type annotations tell the next developer (or future you) exactly what a function expects
TypeScript in practice
You write `.ts` or `.tsx` files instead of `.js` or `.jsx`. The TypeScript compiler (`tsc`) checks them and outputs plain JavaScript that browsers understand. In modern toolchains — Next.js, Vite, Create React App — the compilation is handled automatically. You just write TypeScript and the build tool does the rest.
The same code in JS vs TS
// JavaScript — no type information
function greet(name) {
return "Hello " + name.toUpperCase()
}
// TypeScript — name is declared as a string
function greet(name: string): string {
return "Hello " + name.toUpperCase()
}
// TypeScript catches this at compile time:
greet(42) // Error: Argument of type 'number' is not assignable to parameter of type 'string'Every JavaScript file is already valid TypeScript
You can migrate gradually
Rename app.js to app.ts and TypeScript will accept it. You start getting type safety as you add annotations — you do not need to rewrite everything on day one.
Try this
Create a file called greet.ts. Write a function `greet(name: string): string` that returns "Hello, [name]!". Then write a second call to `greet` passing a number instead of a string. Run `npx tsc greet.ts` and observe the error TypeScript reports. Then fix it and confirm the compilation succeeds.