Learn TypeScript.
JavaScript that scales.
TypeScript is JavaScript with types. It catches bugs before your code runs, powers autocomplete across your whole project, and makes large codebases maintainable. It's the language behind VS Code, Deno, Angular, and the standard for modern React. This track teaches all of it — from type annotations to generics to TS with React — with real code. Every lesson assumes you already know JavaScript.
Prerequisite: JavaScript. TypeScript is JavaScript with types on top. If you don't understand functions, arrays, objects, arrow functions, closures, and promises, learning TypeScript becomes memorization. Spend 2-3 months on the JavaScript track first. Every TypeScript tutorial assumes this foundation.
What you'll learn: type annotations, interfaces, type aliases, unions, narrowing, generics, utility types, modules, tooling (tsconfig, tsc), and TypeScript with React. Every example has working code you can inspect.
Why TypeScript
JavaScript is flexible — a variable can hold anything, and you only find out it's the wrong type when your code crashes in production. TypeScript adds a type layer on top. You declare what types exist, the compiler checks every assignment against them, and errors surface in your editor before you ever run the code. It's not a new language — it's JavaScript with a seatbelt.
The payoff compounds as codebases grow. A 10-line script doesn't need types. A 10,000-line app with 50 developers does — and that's why every major framework (Angular, NestJS, Deno) and most modern React teams use TypeScript by default. TypeScript's autocomplete alone is worth it: rename a function, and your editor instantly shows every call site. Miss an argument, and you see a red underline before saving.
Microsoft created TypeScript in 2012. It's now the standard for serious JavaScript projects. And unlike learning a second language, you don't start from zero — you already know 90% of it if you know JavaScript.
🗺️ The 6-week path
Follow these in order. Each phase builds on the one before it.
Setup & your first types
Install TypeScript, compile your first .ts file, understand what tsc does. Type annotations on variables, parameters, and return values. The difference between TypeScript (compiled) and JavaScript (runtime) — and why types cost zero at runtime.
Interfaces & type aliases
Interfaces and type aliases describe object shapes. Optional properties, readonly fields, index signatures. When to use interface vs type — and the one difference that actually matters (declaration merging).
Functions & generics
Type function signatures, optional and default parameters, overloads. Then generics — the superpower of TypeScript. Write a function once, work with any type, keep full type safety. This is the phase that makes TypeScript click.
Unions & narrowing
Union types like string | number. Narrowing with typeof, instanceof, in, and discriminated unions — the pattern that makes state machines and API responses safe. This is how real apps model "it can be one of these."
Classes & OOP in TS
Classes with access modifiers (public, private, protected). Implements vs extends. Abstract classes. The parameter property shorthand. How TS classes compare to JS classes — and when to reach for them vs interfaces.
Utility types & advanced
Partial, Required, Pick, Omit, Record, Readonly — TypeScript's built-in type transformers. Then enums, tuples, keyof, typeof, and the conditional types that power libraries. This is what makes third-party types work.
Modules & tooling
tsconfig.json explained — the 10 options you actually need. ES modules vs CommonJS. Path aliases. Declaration files (.d.ts) and how to type an untyped library. Vite + TS setup. The tooling layer that makes TS practical.
TypeScript with React
Type props, state, events, and refs in React with TS. Typing useState, useEffect, useContext. Generic components. The patterns that make React + TS feel seamless — and the errors beginners hit most often. Ties directly into the React track.
🎯 The 5 concepts that matter most
If you only truly understand five things about TypeScript, make it these.
1. Types are erased at runtime
TypeScript compiles to JavaScript by stripping all types. Types cost zero bytes and zero milliseconds at runtime. They exist only in your editor and during the compile step — they catch bugs before the code ships.
2. Inference beats annotation
TypeScript infers most types for you. You rarely need to annotate variables — let let x = 5 infer number. Annotate function parameters, return values, and exported APIs. Over-annotating is a beginner habit; the compiler is good at this.
3. Unions + narrowing = safety
A union says "one of these." Narrowing refines it based on runtime checks. Together they model real states: 'loading' | 'success' | 'error', or string | null. This pair is why TypeScript handles dynamic data gracefully.
4. Generics preserve type info
A generic (any — and lose all safety.
5. Structural typing, not nominal
TypeScript checks shapes, not names. If two interfaces have the same properties, they're compatible. This is duck typing with compile-time checking — and it means you can pass a { name: 'x' } object anywhere { name: string } is expected.
🎬 See it in action
The same counter, in TypeScript. Notice what the types add.
import { useState } from 'react';
// Props are typed — callers can't pass the wrong shape
type CounterProps = {
initial?: number;
step?: number;
};
function Counter({ initial = 0, step = 1 }: CounterProps) {
// useState infers: number and Dispatch>
const [count, setCount] = useState(initial);
return (
{count}
);
}
export default Counter;
// ✅ Correct — TS enforces the prop types
Three things TypeScript adds here. (1) CounterProps declares the shape of props — callers get autocomplete and compile errors on typos. (2) useState(initial) infers number — calling setCount('x') would fail. (3) onClick is typed by React's own types — your callback receives a correctly typed event. None of this exists in plain JavaScript, and all of it disappears at build time.
⚠️ Common mistakes (from real beginners)
Each of these will cost you hours if you don't know it.
The #1 reason beginners struggle. TS is a layer on JS — if you don't understand JS first, TS errors feel like noise. Complete the JavaScript track first.
any disables type checking entirely — you've turned TS off. When you're stuck, use unknown and narrow it. Reserve any for actual interop with untyped libraries.
const x: number = 5 is noise. The compiler infers number. Annotate parameters, return types, and exported APIs — let the rest be inferred.
Both describe shapes, but only interface supports declaration merging. Use interface for public object shapes you might extend; use type for unions, intersections, and aliases.
if (typeof x === 'string') works because it's real runtime code. if (x is string) is a type guard — it disappears at runtime. Never write type-only logic that needs to run.
value! tells TS "trust me, it's not null." If it IS null, you crash at runtime. Narrow with checks instead of asserting.
When TS complains, it's usually right. Read the error — it points to the exact line and explains the mismatch. Beginners add as any; intermediates fix the actual type.
Default tsconfig.json is permissive. Turn on strict: true from day one — it catches null/undefined bugs, implicit any, and more. Retrofitting strict later is painful.
🔨 Projects by difficulty
Build these in order. Each one uses only concepts from the phases before it.
Typed calculator
Functions with typed parameters and return values. Union type for operators. Uses annotations + narrowing. The hello world of TS.
Contact book
Interface for a Contact, array of contacts, typed add/find functions. Uses interfaces + arrays. First real data modeling.
API response types
Type a fake API response, narrow it into success/error. Uses discriminated unions + narrowing. The pattern every real app needs.
Typed fetch wrapper
A generic function that fetches and returns a typed response. Uses generics + promises + error unions. First library-quality code.
State machine
Model a UI state machine with discriminated unions. Loading → success → error. Type-safe transitions. This is how real apps avoid impossible states.
React + TS app
A full to-do or weather app with typed props, state, events, and API responses. Uses every concept from the track. Portfolio-ready.
❓ Frequently asked questions
Do I need to know JavaScript before TypeScript?
Yes — absolutely. TypeScript is JavaScript with types bolted on. Every line of TypeScript is valid JavaScript once the types are stripped. If you don't understand functions, arrays, objects, arrow functions, closures, and promises, learning TypeScript becomes memorization. Spend 2-3 months on JavaScript first.
What is TypeScript?
TypeScript is a superset of JavaScript developed by Microsoft. It adds optional static types to JavaScript. You write TypeScript, the compiler strips the types and outputs plain JavaScript that runs in any browser or Node.js. The types are checked at build time — they catch bugs before your code runs.
What is the difference between TypeScript and JavaScript?
JavaScript is dynamically typed — variables can hold anything, type errors appear at runtime. TypeScript is statically typed — you declare what types variables, parameters, and return values have, and the compiler catches type errors before the code runs. TypeScript is a superset: every valid JavaScript file is also valid TypeScript.
What is a type annotation?
A type annotation is a label you attach to a variable, parameter, or return value to tell TypeScript what type it should hold. Example: let name: string = 'Alice'; the : string is the annotation. TypeScript then enforces that name is always a string — assigning a number is a compile error.
What is the difference between interface and type?
Both describe object shapes. interface is designed for object shapes and can be extended with 'extends' and merged (declaration merging). type is more flexible — it can describe unions, intersections, tuples, primitives, and conditional types. Use interface for object shapes you might extend, type for everything else.
What are generics in TypeScript?
Generics let you write functions and components that work with any type while preserving type information. function identity
What is type narrowing?
Narrowing is how TypeScript refines a broad type into a specific one based on runtime checks. If you have a value of type string | number, doing typeof value === 'string' inside an if narrows the type to string inside the block. TypeScript understands typeof, instanceof, in, Array.isArray, discriminated unions, and custom type guards.
Do I need a build tool to use TypeScript?
Technically you can use the TypeScript Playground or compile with tsc in the terminal. For real projects, use Vite or Next.js with the TypeScript template. Vite handles TS compilation, hot reload, and type checking. Just install typescript locally and let Vite do the rest.