1.25.a — What is TypeScript?

In one sentence: TypeScript is a typed superset of JavaScript created by Microsoft that adds static type checking and compiles down to plain JavaScript that runs in any browser or runtime.

Navigation: ← 1.25 Overview · 1.25.b — Thinking in TypeScript →

---

1. TypeScript in 30 seconds

TypeScript (TS) is a programming language built on top of JavaScript (JS). It adds optional static types — annotations that describe the shape and kind of your data — so that a compiler can catch mistakes before you run the code.

// JavaScript — no errors until runtime
function greet(name) {
  return "Hello, " + name.toUpperCase();
}
greet(42); // Runtime crash: name.toUpperCase is not a function

// TypeScript — error caught at compile time
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}
greet(42); // Compile error: Argument of type 'number' is not assignable to parameter of type 'string'

The key insight: every JavaScript file is already valid TypeScript. TypeScript only adds syntax; it never takes JavaScript syntax away.

---

2. Who created TypeScript and why

Anders Hejlsberg — the same engineer who designed C# and Turbo Pascal — led the creation of TypeScript at Microsoft. It was first released publicly in October 2012.

The problem it solves:

Pain point in large JS projects	How TypeScript helps
Bugs discovered only at runtime	Compile-time type checking catches errors before deployment
Poor IDE support (limited autocomplete)	Types power IntelliSense — rich autocomplete, hover docs, refactoring
Hard to understand code months later	Type annotations serve as living documentation
Risky refactoring (renaming, moving)	Compiler flags every place a change breaks something
No contract between modules	Interfaces and types define explicit contracts

---

3. TypeScript vs JavaScript — the relationship

Think of TypeScript as JavaScript with guardrails:

┌──────────────────────────────────┐
│           TypeScript             │
│  ┌──────────────────────────┐   │
│  │       JavaScript         │   │
│  │  (runs in browsers,      │   │
│  │   Node.js, Deno, Bun)    │   │
│  └──────────────────────────┘   │
│  + type annotations             │
│  + interfaces / type aliases    │
│  + generics                     │
│  + enums                        │
│  + access modifiers (public,    │
│    private, protected)          │
└──────────────────────────────────┘

Aspect	JavaScript	TypeScript
Type system	Dynamic (checked at runtime)	Static (checked at compile time)
File extension	.js, .mjs, .cjs	.ts, .tsx, .mts, .cts
Runs in browser?	Yes, natively	No — must compile to JS first
Superset relationship	Base language	Superset (all JS is valid TS)
Learning curve	Lower entry	Slightly higher (types to learn)
Tooling	Good	Excellent (type-aware autocomplete)
Error detection	Runtime	Compile time + runtime

---

4. The compilation step

TypeScript cannot run directly in browsers or Node.js (as of the standard runtime). It must go through a compilation (or "transpilation") step:

  your-code.ts
       │
       ▼
   tsc (TypeScript Compiler)
       │
       ▼
  your-code.js   ← plain JavaScript, runs anywhere

# Compile a single file
npx tsc greeting.ts          # produces greeting.js

# Compile entire project (uses tsconfig.json)
npx tsc                      # produces .js files in outDir

What the compiler does:

1. Parses your .ts files
2. Type-checks — reports errors if types do not match
3. Emits plain .js files with all type annotations stripped out

The output JavaScript has zero TypeScript syntax — it is ordinary JS.

// INPUT: greeting.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// OUTPUT: greeting.js (after tsc)
function greet(name) {
  return `Hello, ${name}!`;
}

Notice: the : string annotations are simply removed. Types exist only at compile time — they have no runtime cost.

---

5. TypeScript does NOT run in browsers

This is one of the most common misconceptions for beginners:

TypeScript is a development-time tool. Browsers execute JavaScript. The TypeScript compiler translates your .ts into .js before it ever reaches the browser.

Modern build tools (Vite, webpack, esbuild, Next.js) handle this compilation step automatically — you write .ts / .tsx files, and the build pipeline outputs .js for the browser.

---

6. Brief history and adoption

Year	Milestone
2012	TypeScript 0.8 released by Microsoft
2014	TypeScript 1.0; early adopters start using it
2016	Angular 2 is written entirely in TypeScript — massive adoption signal
2018	React community begins widespread TS adoption (create-react-app --template typescript)
2019	TypeScript 3.x; Deno (Node alternative) ships with native TS support
2020	TypeScript overtakes CoffeeScript, Flow; dominant typed JS option
2023	TypeScript 5.x; nearly every major framework supports TS out of the box
2024	Node.js gains experimental --experimental-strip-types flag for native TS execution

Adoption by major frameworks and tools:

• Angular — written in TypeScript, requires TS
• React — first-class TS support (.tsx files)
• Vue 3 — rewritten in TypeScript
• Next.js — built-in TS support, zero config
• Svelte — TypeScript support via <script lang="ts">
• Node.js — TS via ts-node, tsx, or compile step
• Deno — runs .ts files natively
• Bun — runs .ts files natively

---

7. When to use TypeScript

Use TypeScript when:

• Team projects — types enforce contracts between developers
• Large codebases — types prevent regressions when refactoring
• Library authoring — consumers get autocomplete and type safety
• Long-lived projects — types serve as documentation that stays in sync
• API-heavy apps — type API response shapes to catch data issues early
• Enterprise software — stricter guarantees, better onboarding for new developers

When plain JS might be fine:

• Small scripts — a 20-line utility script does not need types
• Rapid prototyping — when speed of iteration matters more than correctness
• Learning fundamentals — master JS basics before adding type complexity
• One-off automation — shell scripts, build scripts, quick hacks
• Legacy codebases — where migration cost outweighs benefit (though gradual adoption is possible)

---

8. Real-world adoption stats

• State of JS surveys (2022-2024): TypeScript consistently ranks as the most used and most loved "JavaScript flavor"
• GitHub: TypeScript is among the top 5 languages by pull request volume
• npm: The @types organization (DefinitelyTyped) hosts 8,000+ type definition packages for JS libraries
• Stack Overflow Developer Survey: TypeScript regularly appears in the top 5 most wanted and most loved languages
• Job market: Most front-end and full-stack job postings list TypeScript as a required or preferred skill

---

9. A minimal example end-to-end

// 1. Create a file: hello.ts
interface User {
  name: string;
  age: number;
}

function introduce(user: User): string {
  return `I'm ${user.name}, ${user.age} years old.`;
}

const alice: User = { name: "Alice", age: 30 };
console.log(introduce(alice)); // "I'm Alice, 30 years old."

// This would be a compile error:
// const broken: User = { name: "Bob" }; // Property 'age' is missing

# 2. Compile
npx tsc hello.ts

# 3. Run the output
node hello.js
# Output: I'm Alice, 30 years old.

---

Key takeaways

1. TypeScript is a typed superset of JavaScript — every JS file is valid TS.
2. It was created by Microsoft (Anders Hejlsberg) to catch bugs before runtime.
3. TypeScript compiles to plain JavaScript — browsers never see TS syntax.
4. Types exist at compile time only — zero runtime overhead.
5. All major frameworks (Angular, React, Vue, Next.js) support TypeScript out of the box.
6. Use TypeScript for team projects, large codebases, and library authoring; plain JS is fine for small scripts and prototyping.

---

Explain-It Challenge

Explain without notes:

1. What does "superset of JavaScript" mean in practice?
2. If TypeScript adds types, why do browsers not need a TypeScript engine?
3. Name three benefits TypeScript provides over plain JavaScript.

---

Navigation: ← 1.25 Overview · 1.25.b — Thinking in TypeScript →