TypeScript 5 Design Patterns and Best Practices E-Book

Theofanis Despoudis

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 526

Veröffentlichungsjahr: 2025

Beschreibung

Design patterns are the foundation of many world-class software applications, from commercial solutions to open-source projects. This guide equips you with the skills to architect robust, scalable, and maintainable TypeScript 5 applications. Whether you're looking to master modern TypeScript or apply proven software architecture patterns effectively, this book is your go-to resource.
Written by Theofanis Despoudis, a recognized TypeScript expert, this second edition is fully updated with TypeScript 5’s latest features, including improved type inference, union enums, and decorators. These updates will help you write cleaner, more maintainable code that adapts to future changes. You’ll dive into classic Gang of Four design patterns through both traditional and modern real-world implementations, gaining hands-on experience with practical applications. You’ll also gain a clear understanding of the power of functional and reactive programming patterns specifically designed for idiomatic TypeScript development.
By the end of this book, you’ll be able to identify and apply the right design pattern for any scenario and craft well-structured, maintainable, and testable code.

Leseprobe

TypeScript 5 Design Patterns and Best Practices

Build clean and scalable apps with proven patterns and expert insights

Theofanis Despoudis

TypeScript 5 Design Patterns and Best Practices

Copyright © 2025 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

The author acknowledges the use of cutting-edge AI, such as ChatGPT, with the sole aim of enhancing the language and clarity within the book, thereby ensuring a smooth reading experience for readers. It’s important to note that the content itself has been crafted by the author and edited by a professional publishing team.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Kaustubh Manglurkar

Publishing Product Manager: Bhavya Rao

Book Project Manager: Arul Viveaun S

Senior Editor: Shreya Sarkar

Technical Editor: K Bimala Singha

Copy Editor: Safis Editing

Indexer: Hemangini Bari

Production Designer: Jyoti Kadam

DevRel Marketing Coordinator: Nivedita Pandey

First published: September 2021

Second edition: February 2025

Production reference: 1160125

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-83588-322-8

www.packtpub.com

To my wonderful daughters, Sofia and Eleni. This book is for you, with the hope that you always pursue your dreams and never stop learning.

– Theofanis Despoudis

Contributors

About the author

Theofanis Despoudis lives in Ireland, where he works as a senior staff software engineer for WP Engine. He is the co-author of The React Workshop and Advanced Go Programming in 7 Days, and maintains many open source projects on GitHub.

Theofanis works extensively with Faust.js, a Next.js framework written in TypeScript, and is actively developing a next-generation Headless WordPress toolkit leveraging TSDocs. He is also passionate about experimenting with AI technologies and exploring their applications in modern development workflows.

I am deeply grateful to those who have supported and encouraged me along this journey, especially my editor Shreya Sarkar; book project manager, Arul Viveaun S; publishing product manager, Bhavya Rao; and the technical reviewers, Dr. Sanjay Krishna Anbalagan and Sunil Raj Thota, whose insights and dedication have been invaluable to the completion of this book.

About the reviewers

Dr. Sanjay Krishna Anbalagan earned his Master’s degree and Ph.D. in Computer Science, specializing in data visualization, from the University of Massachusetts Lowell. He has worked at Cengage Learning and is currently employed at Amazon Web Services (AWS). With a strong focus on data visualization, Dr. Anbalagan contributes his expertise to advance the field through innovative solutions and research.

Sunil Raj Thota is a seasoned software engineer with extensive experience in web development and AI applications. Currently working in the Amazon QuickSight team, Sunil has previously contributed to significant projects at Yahoo Inc., enhancing user engagement and satisfaction through innovative features at Yahoo and AOL Mail. He has also worked at Northeastern University as a research assistant and at MOURI Tech as a senior software engineer, optimizing multiple websites and leading successful project deployments. Sunil co-founded ISF Technologies, where he championed user-centric design and agile methodologies. He has also contributed to the books AI Strategies for Web Development and The Art of Micro Frontends. His academic background includes a master’s in analytics from Northeastern University and a bachelor’s in electronics and communications engineering from Andhra University.

Table of Contents

Preface

Part 1: Introduction to TypeScript 5

1

Getting Started with TypeScript 5

Technical requirements

Introducing TypeScript 5

TypeScript fundamentals

Exploring useful TypeScript 5 features

Understanding TypeScript and JavaScript’s relationship

How does JavaScript compare to TypeScript?

Transitioning from JavaScript to TypeScript

Design patterns in JavaScript

Setting up your development environment

Essential libraries and tools

Understanding the tsconfig.json file

Running the unit tests

Using VSCode with TypeScript

Using VSCode for this book’s code

Type inspection in action

Inspecting types

Refactoring with VSCode

Introducing Unified Modelling Language (UML)

What is UML?

Learning UML class diagrams

Summary

Q&A

Further reading

2

TypeScript Core Principles

Technical requirements

Working with advanced types

Utility types

Using advanced types and assertions

Developing in the browser

Understanding the DOM

Using TypeScript with Vite

Using React

Developing in the server

Understanding the server environment

Runtime choices — Node.js versus Deno versus Bun.js

Long-living processes

Frameworks with TypeScript support

Error handling

Introducing design patterns in TypeScript

Why do design patterns exist?

Are design patterns relevant now?

Design patterns in TypeScript

Summary

Q&A

Further reading

Part 2: TypeScript Core Design Patterns

3

Creational Design Patterns

Technical requirements

Creational design patterns

The Singleton pattern

Key characteristics

When to use the Singleton pattern

UML class diagram

Classic implementation

Modern implementations

Using decorators for Singleton implementation

Parametric Singleton

Testing

Criticisms

Real-world examples

The Prototype pattern

When to use the Prototype pattern

UML class diagram

Classic implementation

Alternative implementation

Testing

Criticisms

Real-world examples

The Builder pattern

When to use the Builder pattern

UML class diagram

Classic implementation

Modern implementations

Testing

Criticisms

Real-world examples

The Factory Method pattern

When to use the Factory Method pattern

UML class diagram

Classic implementation

Alternative implementation

Testing

Criticisms

Real-world examples

The Abstract Factory pattern

When to use the Abstract Factory pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world examples

Summary

Q&A

Further reading

4

Structural Design Patterns

Technical requirements

Understanding structural design patterns

Key characteristics and use cases

The Adapter pattern

Understanding the Adapter pattern

When to use the Adapter pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Decorator pattern

Key characteristics

When to use the Decorator pattern

UML class diagram

Classic implementation

Modern variants of the Decorator pattern

Testing

Criticisms

Real-world use cases

The Façade pattern

When to use the Façade pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Composite pattern

When to use the Composite pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Proxy pattern

When to use the Proxy pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Bridge pattern

When to use the Bridge pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Flyweight pattern

When to use the Flyweight pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

Summary

Q&A

5

Behavioral Design Patterns for Object Communication

Technical requirements

Understanding behavioral design patterns

The Strategy pattern

When to use the Strategy pattern

UML diagram

Classic implementation

Testing

Criticisms

Real-life use cases

The Chain of Responsibility pattern

When to use the Chain of Responsibility pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-life use case

The Command pattern

When to use the Command pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-life use case

The Mediator pattern

When to use the Mediator pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-life use cases

The Observer pattern

When to use the Observer pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-life use cases

Summary

Q&A

6

Behavioral Design Patterns for Managing State and Behavior

Technical requirements

The Iterator pattern

When to use the Iterator pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use case

The Memento pattern

When to use the Memento pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use case

The State pattern

When to use the State pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use-case

The Template Method pattern

When to use the Template Method pattern

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

The Visitor pattern

When to use the Visitor pattern?

UML class diagram

Classic implementation

Testing

Criticisms

Real-world use cases

Summary

Q&A

Part 3: Advanced TypeScript Concepts and Best Practices

7

Functional Programming with TypeScript

Technical requirements

Learning key concepts in functional programming

Declarative versus imperative programming

Imperative programming

Declarative programming

Pure functions

Closures

Handling side effects – IO actions

Recursion

Functions as first-class citizens

Function composition

Referential transparency

Immutability

Understanding functional lenses

When to use functional lenses

Implementation of lenses

Use cases of lenses

Exploring practical functional structures

Functors

Applicatives

Semigroups

Monoids

Traversables

Understanding monads

When to use monads

Understanding Monad laws

Summary

8

Reactive and Asynchronous Programming

Technical requirements

Learning reactive programming concepts

Benefits of reactive programming

When to use reactive programming?

Asynchronous propagation of changes

The Pull pattern

The Push pattern

The Pull-Push pattern

Understanding Promises and Futures

Promises

Futures

Open source implementation of Futures

Exploring Observables

Composable operators

Cold versus hot Observables

Schedulers in RxJS

Backpressure handling in RxJS

Example using WebSocket and RxJS

Testing strategies for observable pipelines

Summary

Q&A

Further reading

9

Developing Modern and Robust TypeScript Applications

Technical requirements

Combining design patterns effectively

Combining Singleton with other patterns

Iterator with other patterns

Leveraging TypeScript’s utility types

Composing utility types

Creating custom utility types

Leveraging mapped types with utility types

Implementing DDD

The building blocks of DDD

Current disadvantages of DDD

Embracing SOLID principles

Single Responsibility Principle

Open-Closed Principle

Liskov Substitution Principle

Interface Segregation Principle

Dependency Inversion Principle

Is using SOLID the best practice?

Applying the MVC architecture

Model

View

Controller

Summary

Q&A

Further reading

10

Anti-Patterns and Workarounds

Technical requirements

Class overuse

The jungle problem

Example of class overuse

Using interfaces for models

Overly permissive types

Common pitfalls

Using idiomatic code from other languages

From the Java language

From the Go language

Type inference gotchas

Anti-pattern – relying too heavily on implicit typing

Not using const assertions for literal types

Generics gotchas

Confusing naming of multiple generic types

Overly permissive default generic types

Ignoring newer features of TypeScript

Summary

Q&A

Further reading

11

Exploring Design Patterns in Open Source Architectures

Technical requirements

Introduction to Apollo Client and tRPC

Apollo Client

tRPC – a TypeScript-first RPC framework

Techniques for reviewing design patterns in open source projects

Design patterns in Apollo Client

Project structure

Observed design patterns

Design patterns in tRPC

Project structure

Observed design patterns

Summary

Q&A

Index

Other Books You May Enjoy

Part 1:Introduction to TypeScript 5

In this section, we introduce TypeScript 5, the latest version of this powerful language that extends JavaScript by adding static types. We’ll explore key concepts such as TypeScript’s relationship with JavaScript, the latest features introduced in version 5, and the benefits of type-driven development. You’ll also learn about development tools such as VSCode and diagramming tools such as UML, both of which are useful for modern TypeScript development. By the end of this section, you’ll be equipped with the essential skills needed to confidently develop TypeScript applications.

This part has the following chapters:

Chapter 1, Getting Started with TypeScript 5Chapter 2, TypeScript Core Principles