Skip to content
TagsTypeScript

What is TypeScript?

TypeScript is a programming language built on top of JavaScript. It adds one key feature: types. In plain JavaScript, you can assign any kind of value to a variable without declaring what it is. TypeScript changes that by letting you specify exactly what kind of data a variable should hold, like a number, a string, or a list of items.

This might sound like extra work, but it pays off quickly. When your code knows what to expect, your editor can warn you about mistakes before you even run your code. Bugs that would normally only show up in a live app get caught at the source.

TypeScript compiles down to regular JavaScript, so it runs in any browser or environment that already supports JavaScript, making it a popular choice for developers who are already using JavaScript to build things.

Why learn TypeScript?

If you already know JavaScript or have some experience building websites with frameworks like React or Vue, learning TypeScript can be a great next step. It encourages you to think carefully about the data your code works with, which leads to cleaner, more predictable programs. It also makes working on larger projects much easier, since you spend less time hunting down bugs and more time actually building things.

TypeScript has also become one of the most in-demand skills in web development. A huge number of companies, from small startups to large tech firms, now use it as their default language for both frontend and backend projects.

Practice TypeScript on Frontend Mentor

Learning about TypeScript by reading or watching videos is useful, but the best way to learn TypeScript is to actually use it. That's exactly what Frontend Mentor is designed for.

Our challenges give you a realistic design and a set of requirements, and your job is to bring it to life using whatever tools you're learning, including TypeScript. You'll get to practice writing typed code, structuring components and pages, and using TypeScript throughout entire apps in a way that no tutorial can fully replicate.

Recommended TypeScript challenges

Hand-picked challenges to help you practice TypeScript at every skill level.

  • Free

    Interactive rating component

    • HTML
    • CSS
    • JS
    newbie

    This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

  • Free

    Typing speed test

    • HTML
    • CSS
    • JS
    junior

    Build a typing speed test that calculates words per minute (WPM) and accuracy. A fun project to practice DOM manipulation and working with timers.

  • Free

    Interactive comments section

    • HTML
    • CSS
    • JS
    intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

  • Premium

    Frontend Quiz app

    • HTML
    • CSS
    • JS
    intermediate

    This app will test your skills (as well as your knowledge!) as you build out a fully functional quiz. We provide a local JSON file to help you practice working with JSON!

  • Premium

    Note-taking web app

    • HTML
    • CSS
    • JS
    advanced

    This project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!

  • Free

    Rock, Paper, Scissors game

    • HTML
    • CSS
    • JS
    advanced

    This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

  • Premium

    Link-sharing app

    • HTML
    • CSS
    • JS
    guru

    In this project, you'll build a fully-functional link-sharing app for developers! You'll practice working with image uploads, repeater fields, drag-and-drop, and more!

  • Premium

    Invoice app

    • HTML
    • CSS
    • JS
    guru

    This invoicing app project will test you on many levels. You'll be working with JSON data, managing state, plus a lot more. You can even build it out as a full-stack app!

View more challenges

Solutions made with TypeScript

View more solutions

Take your TypeScript skills further

Want a more structured approach? This learning path guides you through curated TypeScript challenges—from first principles to real-world projects.

advanced

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you reinforce knowledge and gain hands-on experience with your chosen framework.

Join 1,154,235 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in