TypeScript Tutorial (original) (raw)

Last Updated : 26 Apr, 2025

TypeScript is a superset of JavaScript that adds extra features like static typing, interfaces, enums, and more. Essentially, TypeScript is JavaScript with additional syntax for defining types, making it a powerful tool for building scalable and maintainable applications.

• Static typing allows you to define variable types and helps catch errors before running the code.
• TypeScript is compiled into JavaScript, ensuring it works in all JavaScript environments.
• It’s widely used for web development on both the client and server sides.
• Developed by Microsoft, TypeScript is trusted by companies like Google, Slack, Airbnb, and Asana.

**Latest Update [2025]: TypeScript is now up to **10x faster thanks to a new native compiler written in Go. It directly improves compilation and editor speed, making development smoother than ever. Learn more about the 10x performance boost →

TypeScript Hello World Program

To start with TypeScript you need to install it in your project. Follow below steps to install it on your system.

1. Install TypeScript in your System
2. Setup TypeScript Project

After installing TypeScript, let's write your TS first program. Here's a simple code example:

TS `

let message: string = "Hello, World!"; console.log(message);

`

**Tip: Simply copy and paste the code into your editor, and it will print " **Hello World " in your terminal.

Why Learn TypeScript?

TypeScript is becoming the preferred language for modern web development due to its advantages over JavaScript:

• **Improved Code Quality: TypeScript adds type checking to JavaScript, which helps catch mistakes early and makes the code safer to use.
• **Better Scalability: TypeScript is used to manage and grow large projects. It makes it easier to maintain complex codebases over time.
• **Works Well with JavaScript: TypeScript is a superset of JavaScript, which means you can use both in the same project. You don’t need to rewrite your existing JavaScript code to start using TypeScript.
• **Better Developer Tools: TypeScript works well with code editors and tools. It offers features like autocompletion, debugging, and type checking, which help developers write code faster and with fewer errors.
• **Works With Popular Frameworks: TypeScript is commonly used with frameworks like React, Angular, and Vue, which improves type safety and the overall developer experience..
• **Catch Bugs Early: TypeScript helps find bugs at compile time (before the code runs). This saves time by catching errors early.
• **More Job Opportunities: As TypeScript becomes more popular, it opens more job opportunities, especially in companies working with large-scale web applications.

**Note: We are currently using **TypeScript 5.0, which brings faster performance and new features. Check what’s new in TypeScript 5.0 →

Getting Started with TypeScript: A Beginner’s Guide

This TypeScript tutorial provides you with a step-by-step learning journey for mastering TypeScript. You will start with TypeScript fundamentals, and then move on to advanced topics like generics, decorators, and performance optimization.

By the end of this tutorial, you will have a solid foundation in TypeScript and be ready to build scalable and maintainable web applications.

1. TypeScript Basics

By learning the basics of TypeScript, you can start writing type-safe JavaScript code and improve the quality of your web applications.

• TS Introduction
• **Practice: TypeScript Basics Quiz
• TS Variables
• TS DataTypes
• **Practice: Variables & Data Types Quiz
• TS Type Annotations
• TS Type Inference
• **Practice: Type Annotation & Inference Quiz
• TS Enums
• TS Literal Types
• TS Union and Intersection Types
• **Practice: Union & Intersection Types Quiz
• TS Type Aliases
• **Practice: : Type Aliases Quiz

2. TypeScript Functions

Functions are the building blocks of any application. Learn how to define and use functions effectively in TypeScript.

• TS Function Types
• TS Call Signatures
• TS Optional and Default Parameters
• TS Rest Parameters
• TS Arrow Functions with TypeScript
• TS Function Overloading
• **Practice: TypeScript Function Quiz

3. TypeScipt Beginner Projects

Now that you have a basic understanding of TypeScript, start with some beginner-level projects to solidify your concepts and apply them in real-world applications.

• Simple Counter App Using TypeScript
• Show And Hide Password Using TypeScript
• Drag and Drop List Using Typescript
• Calculator App Using Typescript

4. TypeScript Object Types and Interfaces

TypeScript provides powerful tools for defining and working with object types and interfaces.

• TS Object Types Overview
• TS Interfaces
• TS Type Aliases vs Interfaces
• **Practice: Object Types & Interfaces Quiz

5. TypeScript Classes and Object-Oriented Programming

TypeScript brings object-oriented programming features to JavaScript. Learn how to use classes, inheritance, and access modifiers.

• TS Classes and Properties
• TS Access Modifiers
• TS Readonly Properties
• TS Getters and Setters
• TS Abstract Classes and Methods
• TS Implementing Interfaces in Classes
• **Practice: TypeScript OOP Quiz

6. TypeScript Generics

Generics allow you to write reusable and type-safe code. Learn how to use generics in functions, classes, and more.

• Introduction to Generics in TypeScript
• TS Generic Functions
• TS Generic Classes
• TS Generic Constraints
• TS Built-in Generic Types
• **Practice: TypeScript Generics Quiz

Now that you have a solid understanding of TypeScript, it's time to work on some intermediate-level projects to further enhance your skills and implement them in real-world applications:

• Random Password Generator Using Typescript
• Unicode Character Value Finder App Using Typescript
• Typing Speed Detector App Using Typescript
• Pixel Art Maker Using Typescript

8. TypeScript Advanced Types

Explore advanced TypeScript features that help you write more expressive and type-safe code.

• TS Type Assertions and Type Guards
• TS Conditional Types
• TS Mapped Types
• TS Template Literal Types
• TS Recursive Types
• TS Utility Types
• **Practice: Advanced Types Quiz

9. TypeScript Modules and Namespaces

Organize your TypeScript code using modules and namespaces for better maintainability and scalability.

• TypeScript Modules
• Default and Named Exports in TypeScript
• Legacy Namespaces in TypeScript
• **Practice: Testing in TypeScript Quiz

10. TypeScript Testing

Learn how to write unit tests and ensure type safety in your test suites.

• Writing Unit Tests with TypeScript
• Testing Frameworks in TypeScript
• Type-safe Mocking in TypeScript
• **Practice: Testing in TypeScript Quiz

11. TypeScript Configuration and Performance

Optimize your TypeScript projects for better performance and maintainability.

• Optimizing tsconfig.json for large projects
• Performance tuning for TypeScript compilation
• **Practice: TypeScript Configuration & Performance Quiz

12. Interesting Facts About TypeScript

Here are some interesting facts and features that highlight the importance of TypeScript in modern web development and how it enhances JavaScript:

• Interesting Facts About TypeScript Basics
• Interesting Facts About Functions in TypeScript
• Interesting Facts About Object Types and Interfaces in TypeScript
• Interesting Facts About Classes and Object-Oriented Programming in TypeScript
• Interesting Facts About Generics in TypeScript
• Interesting Facts About Modules and Namespaces in TypeScript

13. TypeScript Advanced Projects

Now that you’ve covered most of the key TypeScript concepts, it’s time to work on some advanced projects to further strengthen your skills and gain hands-on experience:

• Quiz App In Typescript
• Task Management In Typescript
• Contact Management System In Typescript

Here you can check complete list of TypeScript Project Ideas with Source Code.

TypeScript Tutorial - Prerequisites

This TypeScript tutorial is designed for beginners! No prior knowledge of TypeScript is required, but a basic understanding of JavaScript will help you get started. After completing this tutorial, you’ll have a solid foundation in TypeScript and be ready to build scalable and maintainable web applications.

Best Approach to Learn TypeScript

Here’s a step-by-step approach to learning and mastering TypeScript effectively:

1. **Start with the Basics: Learn what TypeScript is—a superset of JavaScript that adds static types—nd why it helps build scalable applications.
2. **Set Up Your Development Environment: Install Node.js and TypeScript. Set up an editor like Visual Studio Code to support TypeScript, enabling features like autocompletion and error checking.
3. **Learn Fundamental Syntax: Understand TypeScript syntax, such as type annotations, interfaces, and classes. This foundation is key to writing type-safe code.
4. **Practice Core Concepts: Explore advanced topics like union types, generics, and type inference. These features give flexibility to your code.
5. **Work on Real Projects: Apply what you’ve learned by building projects like a task manager, weather app, or blog. Hands-on experience helps reinforce your knowledge.
6. **Stay Updated and Engage with the Community: Follow the official documentation, join forums, and contribute to open-source projects to stay informed and learn best Practices.
7. **Showcase Your Work: Build a portfolio with your TypeScript projects. Share it on platforms like GitHub and LinkedIn to showcase your skills and connect with potential collaborators and employers.

TypeScript Cheat Sheet

The **TypeScript Cheat Sheet is a quick reference guide to all the essential TypeScript concepts, features, and syntax. It's perfect for looking up quick code snippets or getting a refresher on important TypeScript elements. Keep it handy to easily find what you need as you code!

TypeScript Interview Questions

After completing all the sections of this tutorial, before heading to your interview, you can go through this section, which provides commonly asked TypeScript interview questions to test your knowledge and boost your confidence!

• TypeScript Interview Questions

**TypeScript Libraries and Frameworks

TypeScript is widely used with many popular JavaScript-based frameworks and libraries, providing better development experiences through static typing and tooling support.

1. **Frontend Libraries/Frameworks: React, Angular, Vue
2. **Backend Frameworks: NestJS, Express.js, Koa
3. **State Management Libraries: Redux Toolkit (Redux ecosystem), Zustand

**TypeScript vs JavaScript

Let's compare TypeScript with JavaScript across various features:

For a more detailed comparison, check out the article Difference between TypeScript and JavaScript.