The JavaScript You Need

Beginner · 25 min read · ▶ live playground · ✦ checkpoint

TypeScript is JavaScript plus a type layer — which means the JavaScript underneath is load-bearing. This lesson is a fast, honest refresher of exactly the features this course leans on. If it all reads as review, skim and move on. If any of it is genuinely new, consider running through our JavaScript course first — it's the same hands-on format, and everything in it transfers here wholesale.

Values, variables & functions

JavaScript has a small set of primitive values — strings, numbers, booleans, null, undefined — and two ways to declare variables you'll actually use: const (no reassignment; your default) and let (reassignment allowed; use when needed). Functions come in two main syntaxes, and you'll write both daily:

typescript — playgroundtype-checked
⌘/Ctrl + Enter to run

Objects & arrays — the two workhorses

Objects group named values; arrays hold ordered lists. Most real data is some nesting of the two. Three array methods do the heavy lifting in modern code — map (transform each item), filter (keep some), and find (first match):

typescript — playgroundtype-checked
⌘/Ctrl + Enter to run

Destructuring, spread & rest

Three pieces of syntax you'll see in every modern codebase — and in this course's examples from Section 3 onward:

typescript — playgroundtype-checked
⌘/Ctrl + Enter to run

Template literals

Backtick strings interpolate values with ${…} and span multiple lines — from here on, the course prefers them over + concatenation:

const language = "TypeScript";
const version = 5.9;
console.log(`Welcome to ${language} ${version}!`);
console.log(`Multi-line
works too.`);

→ Welcome to TypeScript 5.9! — then the two-line string. Backticks, not quotes, are what enable the ${…} slots.

Modules & async — a glance, not a deep dive

Two features you'll recognize now and master later. Modules split code across files: export marks what a file offers, import pulls it in elsewhere. (Playgrounds on this site run as a single file, so module syntax lives in Section 9, where tsconfig and file layout make it real.)

// math.ts
export function double(n: number): number {
  return n * 2;
}
 
// app.ts
import { double } from "./math.ts";
console.log(double(21));

Async: JavaScript models "not yet" values as Promises, and async/await is the syntax that makes them readable. You only need the shape for now — Part IV types this world properly:

typescript — playgroundtype-checked
⌘/Ctrl + Enter to run

Notice the run stays live until the timer fires — async output arriving "late" is real JavaScript behavior, and this playground doesn't hide it.

Workshop time next: installing Node and the compiler properly, and meeting the editor TypeScript was built alongside.

Checkpoint

Answer all three to mark this lesson complete

+50 XP on completion