JavaScriptIntermediate8h

TypeScript basics.

Types, interfaces, generics — TS without the tears.

What is it?

TypeScript is JavaScript with an extra step at build time: the compiler checks the types you wrote against how the code uses them. If they don't match, you get an error before the user does. The output is plain JavaScript — TypeScript doesn't ship to the browser, the type checker just runs in your editor.

Why it matters

TypeScript hit ~80% adoption among new JS projects in 2026. Hiring postings list it before React. The reason isn't safety in the "prevent runtime errors" sense — it's the editor experience: rename, go to definition, autocomplete, refactor with confidence. JS without TS feels like JS with the lights off after a few months.

What to learn

  • Primitive types: string, number, boolean, null, undefined
  • Object shapes: interface vs type (and the small differences)
  • Arrays and tuples: string[] vs [string, number]
  • Unions and intersections: A | B, A & B
  • Generics for reusable code: function identity<T>(x: T): T
  • Narrowing: typeof, instanceof, type predicates
  • The any escape hatch (and when to reach for unknown instead)

Common pitfall

Reaching for any when types get hard. any turns off the checker for that value, and the unsafety propagates outward through every call. unknown keeps the type system honest — you have to narrow before using the value, which forces you to handle the cases that any would have hidden.

Resources

Primary (free):

Secondary (paid):

Practice

Take a small JS project (300+ lines) and convert it to TypeScript. Start with one file, make the rest happy with // @ts-check until you migrate. Note every place you reached for any — those are your real weak points. Done when the project type-checks with strict: true.

Outcomes

  • Add types to an existing JS function without breaking callers.
  • Choose interface or type for any given object shape with reason.
  • Use generics to write a function that types its return from its input.
  • Avoid any; reach for unknown and narrow when the type is genuinely dynamic.
Back to Frontend roadmap →