Learning TypeScript 5

Go beyond Javascript to build more maintainable and robust web applications for large-scale projects

Anna Richter

Preface

Programmers familiar with JavaScript who wish to learn more about TypeScript version 5.0 will find this book to be a resource of great value This book is ideal for developers who want to improve their front-end programming skills and integrate TypeScript with popular frameworks such as Angular and React. With clear explanations and hands-on examples, this book makes the transition from JavaScript to TypeScript easy and enjoyable.

The book covers fundamental concepts such as static typing, type checking, and type inference, which will help you write more reliable and maintainable code. You'll learn how to use TypeScript's features to improve your development process, reduce bugs, and increase code quality. You'll learn about TypeScript's advanced features, such as interfaces, modules, and type narrowing techniques, through hands-on examples. To help you write more efficient and clean code, this book also covers how to use async/await and Promises to deal with asynchronous operations.

"Learning TypeScript 5 offers solutions and troubleshooting techniques for the most common TypeScript challenges that developers face. You'll find out how to make your own error classes for different situations and how to use TypeScript's try/catch blocks to manage errors effectively. Integrating TypeScript with preexisting JavaScript applications, configuring the TypeScript compiler, and setting up TypeScript projects are all covered in the book. After finishing this book, you will have the knowledge and abilities to create scalable applications with TypeScript and work with frameworks such as Angular and React with ease. Whether you're starting a new project or upgrading an existing one, Learning TypeScript 5" provides useful insights and practical knowledge to help you improve your development skills and take your programming to the next level.

In this book you will learn how to:

Learn TypeScript's static typing to make your JavaScript code more reliable and less prone to mistakes.

Make the switch from JavaScript to TypeScript with ease thanks to the detailed instructions and numerous examples.

Use TypeScript with Angular and React to create scalable, reliable web apps.

Create flawless code with TypeScript's type narrowing and control flow analysis.

Maximize productivity in development and application speed by integrating TypeScript with Angular and React.

Write cleaner, and more readable scripts with Promises and async/await.

Use try/catch and other error handling methods to implement a robust system for managing errors.

Master TypeScript's union types, interfaces, and modules for code organization.

Maximize code quality with TypeScript's robust testing strategies and robust type-checking capabilities.

Prologue

Developers like me, who have spent years honing our JavaScript skills, know the joy of making apps that users adore. I've also experienced the frustration of tracking down obscure bugs caused by dynamic typing. That's why I decided to dive into TypeScript and see how it can improve both our development process and our finished products.

One day, while working on a complex JavaScript project, I found myself buried in a pile of code, trying to figure out a bug that was driving my team crazy. It was the type of bug that would disappear when you looked at it, only to reappearance when you thought it had vanished. After hours of debugging, I discovered it was due to a simple type mismatch. A small error with serious consequences. That was my a-ha moment. I realized I needed a tool to help me identify these issues early in the development process. I was excited and curious when I first started learning TypeScript. Initially, the concept of static typing seemed intimidating, but I quickly realized its value in producing more reliable and maintainable code. TypeScript serves as a helpful assistant, guiding you to write code that is more structured and predictable. It enables you to identify errors during development rather than waiting for them to appear unexpectedly in production. This means spending less time fixing bugs and more time creating features that users will enjoy.

I began using TypeScript on a side project, a small web app for tracking personal goals. It started as a simple tool to remind me to stay on top of my tasks, but as I worked on it, I realized TypeScript was helping me write cleaner, more organized code. The app became more complex, and TypeScript helped me manage that complexity by allowing me to define clear interfaces and data structures. The code became more readable and understandable, not only to me but also to those who looked at it. Working on this project taught me how to use TypeScript to organize a disorganized codebase into a polished work of art. I felt confident adding new features without worrying about breaking existing functionality. My app was more than just a personal success; it demonstrated TypeScript's power. As I shared the app with friends and colleagues, I realized how it could help others improve their projects, too. This motivated me to share what I'd learned and write this book.

In this Learning TypeScript 5 book, I want to make the transition from JavaScript to TypeScript as smooth as possible. This book is more than a technical guide; it's a conversation between you and me about how TypeScript can improve your coding skills and project outcomes. We'll start with the fundamentals: configuring your environment and understanding the syntax. Then we'll go over more advanced topics like type narrowing and asynchronous programming. Each chapter builds upon the previous one, ensuring that you have a thorough understanding of TypeScript's capabilities. I wrote this book to make TypeScript more accessible and enjoyable. Whether you're an experienced JavaScript developer or new to coding, you'll find useful examples and real-world applications that demonstrate TypeScript's benefits. This book will provide you with the tools and knowledge you need to write more efficient, error-free code.

Copyright © 2024 by GitforGits

All rights reserved. This book is protected under copyright laws and no part of it may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system, without the prior written permission of the publisher. Any unauthorized reproduction, distribution, or transmission of this work may result in civil and criminal penalties and will be dealt with in the respective jurisdiction at anywhere in India, in accordance with the applicable copyright laws.

Published by: GitforGits

Publisher: Sonal Dhandre

www.gitforgits.com

support@gitforgits.com

Printed in India

First Printing: April 2024

Cover Design by: Kitten Publishing

For permission to use material from this book, please contact GitforGits at support@gitforgits.com.

Content

Preface

GitforGits

Acknowledgement

Chapter 1: Introduction to TypeScript

Chapter Overview

Understanding TypeScript and Its Benefits

History and Evolution of TypeScript

Key Features and Capabilities of TypeScript

Why TypeScript over JavaScript?

Classic Use-case: Airbnb's Migration to TypeScript

Setting up TypeScript Environment

Installing TypeScript and Node.js on Windows

Configuring TypeScript Compiler

Installing and Setting up Visual Studio Code

Basic TypeScript Syntax

Variables and Constants

Data Types

Type Annotations

Comparing TypeScript to JavaScript Syntax

Type Annotations and Inference

Explicit Type Annotations

Type Inference by Compiler

Compiling TypeScript to JavaScript

What is Compilation?

The Compilation Process

‘tsc’ Command

Configuring tsconfig.json

Summary

Chapter 2: Working with Basic Types

Chapter Overview

Number, String, and Boolean Types

Declaring Number Variables

Using Strings

Constructing Boolean Logics and Conditions

Arrays and Tuples

Declaring and Initializing Arrays

Using Tuples

Array Methods and Operations

Enum Types

Defining Enums

Enum Members and Values

Any, Unknown, and Void Types

‘any’ Type

‘unknown’ Type

‘void’ Type

Sample Program

Null and Undefined

Managing Null and Undefined Values

Exploring Type Guards

Understanding Optional Chaining and Nullish Coalescing

Summary

Chapter 3: Functions in TypeScript

Chapter Overview

Function Types and Signatures

Regular Functions

Function Expressions

Arrow Functions

Function Signatures and Call Signatures

Optional and Default Parameters

Optional Parameters

Default Parameter Values

Multiple Default Parameters

Rest Parameters and Variadic Functions

Creating Variadic Functions

Combining Rest Parameters with Other Parameters

Function Overloads

What is an Overloaded Function?

Sample Program

Function Overloads with Multiple Parameters

Arrow, Callback and Higher-Order Functions

Arrow Functions

Callback Functions

Higher-Order Functions

Summary

Chapter 4: Complex Types and Union Types

Chapter Overview

Union and Intersection Types

Union Types

Intersection Types

Sample Program

Type Guards and Type Assertions

Type Guards

Type Assertions

Literal Types and Type Aliases

Literal Types

Type Aliases

Sample Program

Nullable Types and Optional Properties

Nullable Types

Optional Properties

Optional Chaining

Sample Program

Advanced Object Types

Index Signatures

Recursive Types

Sample Program

Summary

Chapter 5: Classes and Interfaces

Chapter Overview

Working with Classes

Creating Classes

Defining Class Constructors and Methods

Public, Private, and Protected Modifiers

Sample Program

Class Inheritance and Modifiers

Implementing Inheritance

Defining Abstract Classes

Applying Access Modifiers in Inheritance

Sample Program

Interfaces in Action

Defining an Interface

Implementing Interfaces in Classes

Optional Properties

Readonly Properties

Sample Program

Extending Interfaces

Extending Interfaces

Combining Interfaces with Intersection Types

Sample Program

Summary

Chapter 6: Modules and Namespaces

Chapter Overview

Introduction to Modules

Module Structure

Module Working in ES6

Working of Modules

Importing and Exporting Modules

Exporting Modules

Importing Modules

Aliasing Imports

Combining Default and Named Exports

Working with Namespaces

Defining Namespaces

Nested Namespaces

Sample Program

Summary

Chapter 7: TypeScript in Practice

Chapter Overview

Integrating TypeScript with Angular

Setting up Angular Project

Utilizing TypeScript in Angular Components

Utilizing TypeScript in Angular Services

Integrating TypeScript with Angular Features

Integrating TypeScript with React

Setting up React with TypeScript

Utilizing TypeScript in React Components

Utilizing TypeScript with React Hooks

Utilizing TypeScript with React Context

Migrating JavaScript Applications to TypeScript

Migration Process

Troubleshooting Common Migration Issues

Implementing Migration

Testing TypeScript Applications

Overview

Introduction to Jest

Writing Unit Test Scripts

Writing Integration Test Scripts

Summary

Chapter 8: Runtime Behavior and Type Checking

Chapter Overview

Understanding Runtime Type Checking

What is Type Checking?

Performing Type Checking at Runtime

Troubleshooting and Managing Type Errors

Type Narrowing Techniques

What is Type Narrowing?

Type Narrowing Techniques

Handling Asynchronous Code

Introduction to Promises

Async/Await Syntax

Troubleshooting Errors in Asynchronous Code

Exception Management

Introduction to Try/Catch Blocks

Creating Custom Error Classes

Summary

Index

Epilogue

GitforGits

Prerequisites

This book is ideal for developers who want to improve their front-end programming skills and integrate TypeScript with popular frameworks such as Angular and React. With clear explanations and hands-on examples, this book makes the transition from JavaScript to TypeScript easy and enjoyable.

Codes Usage

Are you in need of some helpful code examples to assist you in your programming and documentation? Look no further! Our book offers a wealth of supplemental material, including code examples and exercises.

Not only is this book here to aid you in getting your job done, but you have our permission to use the example code in your programs and documentation. However, please note that if you are reproducing a significant portion of the code, we do require you to contact us for permission.

But don't worry, using several chunks of code from this book in your program or answering a question by citing our book and quoting example code does not require permission. But if you do choose to give credit, an attribution typically includes the title, author, publisher, and ISBN. For example, Learning TypeScript 5 by Anna Richter.

If you are unsure whether your intended use of the code examples falls under fair use or the permissions outlined above, please do not hesitate to reach out to us at support@gitforgits.com. 

We are happy to assist and clarify any concerns.

Chapter 1: Introduction to TypeScript

Chapter Overview

The robust superset of JavaScript, TypeScript, is the subject of our first learning in this chapter. We will start by learning what TypeScript is and why it's become such an important tool for modern web development. This section will highlight the key benefits of using TypeScript, such as improved code quality, a better developer experience, and the ability to detect errors early in the development process.

Next, we will walk you through the process of setting up your TypeScript development environment on a Windows system. This entails installing the necessary tools, such as Node.js and Visual Studio Code, configuring the TypeScript compiler, and ensuring that everything is properly set up to begin writing TypeScript code. By the end of this section, you should have a fully functional TypeScript environment ready to code. We will then go over the fundamental syntax of TypeScript. This section covers the fundamental aspects of TypeScript, such as variables, data types, and basic constructs that distinguish it from JavaScript. You'll learn how to write simple TypeScript programs as well as the syntax enhancements available in TypeScript, which will make your code more robust and maintainable.

Finally, we look at type annotations and inference, which are two core TypeScript features that add static typing to your code. You will learn how to