TypeScript · WebGL · GSAP
Learn TypeScript in motion
An interactive course where every concept is paired with a live 3D scene, a syntax-highlighted code sample, and a checkpoint quiz. Built with Next.js, Three.js, custom GLSL shaders, and GSAP timelines.
Pick a lesson on the left to beginCourse
Interactive TypeScript
Lesson 01 · foundations
JavaScript & TypeScript
TypeScript is JavaScript with a type checker bolted on. Same code at runtime, fewer surprises.
JavaScript is the language that runs in every web browser and on Node.js servers. It is *dynamically typed*, which means a variable can hold a number now and a string a moment later — JavaScript will not complain. The mistake only shows up when the code actually runs, often deep in production when a user clicks the wrong button.
TypeScript sits on top of JavaScript. You write `.ts` files, add tiny annotations describing what your values should be, and a separate program — the TypeScript compiler — reads the entire project before the code runs. If a string ends up where a number was promised, the compiler tells you. You fix it before anyone ever sees a crash.
When TypeScript is happy, it strips the annotations and emits plain JavaScript. The browser still only ever runs JavaScript. Think of TypeScript as a careful editor that audits your code, not a new language. Everything you already know about JavaScript still applies.
The same mistake, two languages
1// JavaScript — anything goes 2let count = 5; 3count = 'oops'; // legal 4count.toFixed(2); // 💥 runtime crash
1// TypeScript — caught before you run it 2let count: number = 5; 3count = 'oops'; 4// ~~~~~ type error 5count.toFixed(2); // never reached
Try it in TypeScript
1// hello.ts — your first TypeScript file 2const greet = (name: string): string => { 3 return `Hello, ${name}!`; 4}; 5 6console.log(greet('Ada')); // ok 7// console.log(greet(42)); ← compiler refuses this
Key takeaways
- TypeScript is JavaScript plus a static type checker — it doesn't replace JS, it audits it.
- Type errors are caught at compile time, not at runtime in front of a user.
- TypeScript compiles down to plain JavaScript. Browsers never see the types.
Try it
Add a type annotation to `name` so that assigning a number would be a compile error.
Checkpoint