Course/Module 8/Topic 3 of 3Advanced

TypeScript with React - Practice

Put your typescript with react skills to the test with practical exercises and challenges.

50 min•By Priygop Team•Last updated: Feb 2026

Hands-On Practice

Practice makes perfect! In this section, you'll work through practical exercises that reinforce the concepts covered in this module.

Exercises

Exercise 1: Apply basic typescript with react concepts
Exercise 2: Solve intermediate-level challenges
Exercise 3: Build a mini-project using typescript with react
Exercise 4: Debug and fix common issues

Practice: TypeScript with React

Practice: TypeScript with ReactJavaScript⚠ 1 error

⚠ Syntax Issues (1)

Line 1: JS Error: Unexpected identifier 'Todo'

💡 Check syntax near the highlighted line.

JavaScript Editor

✕ 1 errorTab = 2 spaces

// React component with TypeScript
interface Todo {
  id: number;
  text: string;
  done: boolean;
}

const todos: Todo[] = [
  { id: 1, text: "Learn TypeScript", done: true },
  { id: 2, text: "Build a project", done: false },
  { id: 3, text: "Deploy to production", done: false }
];

const completed = todos.filter(t => t.done);
const pending = todos.filter(t => !t.done);

console.log("Completed:", completed.map(t => t.text));
console.log("Pending:", pending.map(t => t.text));

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

JavaScript|18 lines|482 chars|1 error, 0 warnings

UTF-8

Review Quiz

Next Module →

Chat on WhatsAppPriygop - Leading Professional Development Platform | Expert Courses & Interview Prep