Skip to main content

​
Quickstart Guide

Get up and running with TypeScript Exercises in just a few minutes. This guide will walk you through accessing the platform, understanding the interface, and completing your first exercise.

​
Accessing the Platform

TypeScript Exercises runs entirely in your browser - no installation required!
1

Open the platform

Navigate to https://typescript-exercises.github.io/ in a modern web browser (Chrome, Firefox, or Safari recommended).
2

Wait for initialization

The platform will load the Monaco Editor and TypeScript compiler. This may take a few seconds on first load.
3

Start with Exercise 1

You’ll automatically land on Exercise 1, which introduces basic TypeScript typing concepts.
No account creation or sign-in required. Your progress is automatically saved in your browser’s local storage.

​
Understanding the Interface

The platform interface is divided into several key areas: 
+--------------------------------------------------------------+
| TypeScript exercises                           [Theme Toggle] |
+--------------------------------------------------------------+
| Exercises 1·2·3·4...   << Navigate through exercises >>     |
+---------------+----------------------------------------------+
| Files         | file.ts   << Filename and status >>         |
+---------------+----------------------------------------------+
| file.ts       | 1  import {x} from 'y';                     |
| dir           | 2                                           |
|   sub.ts      | 3                                           |
|               |                                             |
| << File tree  |   << Code editor (Monaco) >>                |
|    sidebar >> |                                             |
|               +----------------------------------------------+
|               |                                             |
|               |   << Errors or completion status >>         |
|               |                                             |
+---------------+----------------------------------------------+

​
Key Interface Elements

Header

Contains the navigation bar with exercise numbers and theme toggle

File Sidebar

Shows the file structure for the current exercise. Click files to switch between them.

Code Editor

Monaco Editor where you write your TypeScript code with full IDE features

Error Panel

Displays TypeScript errors that need fixing, or “Completed” when all tests pass

​
Completing Your First Exercise

Let’s walk through Exercise 1 step by step.
1

Read the exercise description

Exercise 1 starts with detailed instructions in the comments. Here’s what you’ll see:From src/exercises/1/index.ts:63-75:
/*
Intro:

    We are starting a small community of users. For performance
    reasons, we have decided to store all users right in the code.
    This way we can provide our developers with more
    user-interaction opportunities. With user-related data, at least.
    All the GDPR-related issues will be solved some other day.
    This would be the basis for our future experiments during
    these exercises.

Exercise:

    Given the data, define the interface "User" and use it accordingly.
*/
2

Examine the starter code

You’ll see code with TypeScript errors:From src/exercises/1/index.ts:79-96:
export type User = unknown;

export const users: unknown[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

export function logPerson(user: unknown) {
    console.log(` - ${user.name}, ${user.age}`);
}
3

Check the error panel

The bottom panel will show TypeScript errors. These tell you what needs to be fixed.
4

Fix the types

Replace unknown types with proper TypeScript definitions:
  • Define a User interface with name, age, and occupation properties
  • Update the users array type from unknown[] to User[]
  • Update the logPerson parameter from unknown to User
5

Watch errors disappear

As you type, the platform validates your code in real-time. When all errors are fixed, you’ll see “Completed” in the bottom panel.
6

Move to next exercise

Click the “Next exercise” button to proceed to Exercise 2.
The platform uses strict TypeScript compiler options. All exercises expect you to write type-safe code without using any.

​
Understanding the Test System

Each exercise includes a test.ts file (marked as read-only) that validates your solution. From src/exercises/1/test.ts:1-6: 
import {IsTypeEqual, typeAssert} from 'type-assertions';
import {User, logPerson, users} from './index';

typeAssert<IsTypeEqual<User, {name: string, age: number, occupation: string}>>();
typeAssert<IsTypeEqual<typeof users, {name: string, age: number, occupation: string}[]>>();
typeAssert<IsTypeEqual<typeof logPerson, (user: {name: string, age: number, occupation: string}) => void>>();
These type assertions ensure your types match the expected solution exactly.
You can view test files by clicking on them in the file sidebar, but you cannot modify them. They define the requirements your solution must meet.

​
Using the Exercise Navigation Bar

Click on exercise numbers at the top of the page to jump to any exercise:
  • Numbered circles - Click to navigate to that exercise
  • Highlighted exercises - Indicates which exercises you’ve completed
  • Current exercise - Shown with distinct styling

​
Using Next/Previous Buttons

  • “Next exercise” button - Appears when you complete an exercise
  • Manual navigation - You can skip ahead or go back at any time
Your progress is saved automatically. You can close the browser and return later to continue where you left off.

​
Working with Multiple Files

Some exercises have multiple editable files:
These exercises include:
  • index.ts (read-only) - Main code that uses external libraries
  • declarations/**/*.d.ts - Type declaration files you need to write
  • node_modules/* (read-only) - Simulated JavaScript libraries
  • test.ts (read-only) - Type assertions to validate your solution
Navigate between files using the file tree sidebar on the left.

​
Getting Unstuck

If you’re having trouble with an exercise:

View Solution

Click “show a possible solution” to see a reference implementation

Skip Exercise

Click “skip” to move to the next exercise without completing the current one

Compare Solutions

After completing an exercise, click “Compare my solution” to see differences

Check Documentation

Each exercise includes links to relevant TypeScript documentation
From src/exercises/1/index.ts:102-103: 
// In case you are stuck:
// https://www.typescriptlang.org/docs/handbook/2/objects.html

​
Development Mode (Optional)

If you want to run the platform locally:
1

Clone the repository

git clone https://github.com/typescript-exercises/typescript-exercises.git
cd typescript-exercises
2

Install dependencies

yarn install
3

Start development server

From package.json:63:
yarn start
The platform will open at http://localhost:3000

​
Next Steps

How It Works

Learn about the platform architecture, Monaco Editor integration, and how the test system validates your solutions

​
Tips for Success

Use TypeScript documentation - Each exercise links to relevant TypeScript docs. Don’t hesitate to reference them!
Think about types, not runtime - Focus on what TypeScript knows at compile time, not what happens when the code runs.
Avoid any - The exercises teach proper type usage. If you find yourself reaching for any, there’s likely a better solution.
Take breaks - Difficulty increases quickly. If you’re stuck, take a break and come back with fresh eyes.

Build docs developers (and LLMs) love

Get started for freeTalk to us