TypeScript · module 1 of 21

What is TypeScript?

TypeScript is a language developed by Microsoft in 2012 — it is JavaScript with a type system. You specify what types your variables, functions, and objects should hold, and TypeScript compiles ("transpiles") that down to plain JavaScript that runs anywhere JS runs.

Course map
what you writefunction greet( name: string) { return name }compilewhat the browser runsfunction greet( name) { return name }The annotation is gone by the time the code runs. That is why a type cannot police data arrivingfrom a network call — it checked your code, and the API can still send you anything.
What is TypeScript? — the idea in one picture

What this module covers

4 steps · TypeScript

  1. Step 1. What is TypeScript?

    TypeScript is a language developed by Microsoft in 2012 — it is JavaScript with a type system. You specify what types your variables, functions, and objects should hold, and TypeScript compiles ("transpiles") that down to plain JavaScript that runs anywhere JS runs. Why use TypeScript? - Catches errors at compile time, not runtime - Better autocomplete and editor support - Self-documenting — types explain expected data - Safer refactoring - Supports modern JavaScript features with backward compatibility A typed variable looks like this: let age: number = 25; let username: string = "Alice"; Assigning the wrong type (like a string to a number variable) is a compile-time error TypeScript catches immediately, instead of a bug you discover later at runtime.

    Type annotations (`: type`) tell TypeScript exactly what kind of value a variable should hold, so mismatched assignments get caught immediately instead of causing bugs later. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [TypeScript] Add a typed string variable called `username` below the age variable.

  2. Step 2. Quiz: What is TypeScript?

    Answer these questions about what TypeScript is and why it exists.

    TypeScript adds a type system on top of JavaScript and compiles to plain JavaScript. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [TypeScript] Answer the quiz below.

  3. Step 3. Your First Type Annotation

    Declare a variable called username of type string and assign it your name. Then declare a variable called year of type number and assign the current year.

    This is the foundational TypeScript pattern used everywhere: `let name: type = value`. Getting comfortable with it now makes every later lesson easier. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [TypeScript] Does the code declare both a typed string variable and a typed number variable?

  4. Step 4. Mini project: What is TypeScript?

    Declare a variable called username of type string and assign it your name. Then declare a variable called year of type number and assign the current year. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

    This is the foundational TypeScript pattern used everywhere: `let name: type = value`. Getting comfortable with it now makes every later lesson easier. This project stage asks you to apply the same idea without step-by-step scaffolding. In TypeScript, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [TypeScript] Does the code declare both a typed string variable and a typed number variable?

Loading code lab...