TypeScript Tutorial

TypeScript Projects

Ten complete TypeScript programs: a calculator, a student list, a library catalog, and a shopping cart.

What a project is on StudyGrid

A TypeScript lesson shows one idea: an array, a class, a Map. A project puts several of them in one compiling program. Each page here walks from a small slice to a complete TypeScript program you can run. The chapter list follows the C++ projects so you can compare a typed class in TypeScript with the same idea in C++.

Click Try it in TypeScript under an example. That opens /typescript/try. tsc runs in the browser. Programs use hardcoded demo data so they run without extra stdin. After you understand the logic, wire in readLine() if you want typed input.

10 build-along projects. Each page walks through the design, then a working program you can open inTry TypeScript at /typescript/try. Change a value, run it again, then try the practice tasks at the bottom.

The 10 projects

How to work a project

  1. Read the goal and the TypeScript skills listed on the page.
  2. Compile the first small example at /typescript/try.
  3. Build up to the complete program.
  4. Change one value and compile again.
  5. Finish the practice tasks before the next project.

FAQ: TypeScript Projects

Common questions about this page.

What is the StudyGrid TypeScript tutorial?

The StudyGrid TypeScript tutorial follows the same chapter rhythm as C++: syntax, types, input, loops, functions, classes, generics, maps, and lambdas. Each chapter has copy-and-run examples.

Should I run typescript projects examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn typescript projects in this TypeScript TypeScript lesson (TypeScript Projects).

Is the TypeScript editor the same as Try Python or Try C++?

No. Try TypeScript type-checks with tsc at /typescript/try and shows stdout plus compiler messages. Try Python stays at /try. Try C++ stays at /cpp/try. TypeScript lessons never open those editors.

Do I need to install a compiler to learn TypeScript?

No. Open a chapter, click Try it in TypeScript, and compile in the browser. You can also download a .ts file and compile locally with tsc.

Where should I start the TypeScript tutorial?

Start at TypeScript Intro, then Get Started and Syntax. After the first program, continue to output, variables, and if-else. After classes, open TypeScript Examples, then generics, Map, and arrow functions. Use Next at the bottom of each chapter.

Is the TypeScript tutorial free?

Yes. The TypeScript workshop on StudyGrid (studygrid.in) is free: dashboard, chapters, and the compile-and-run editor.