The code bundle for this chapter is available on https://github.com/PacktPublishing/TypeScript-5-Design-Patterns-and-Best-Practices/tree/main/chapters/chapter01_Getting_Started_With_Typescript_5.

In the Setting up your development environment section, we will discuss how to install and use the code examples in this book. First, let’s refresh our knowledge of TypeScript, especially its latest version.

TypeScript continues the language’s long-standing history of type safety, bringing a plethora of improvements to the developer experience. While not a revolutionary release in terms of core functionality, TypeScript 5 focuses on refinement and optimization.

In this section, we’ll look at a quick breakdown of some key TypeScript features introduced in versions 4 and 5. For TypeScript 4, we’ve explored some of those features in the previous edition of the book:

• Template literal types: Enhanced type safety for template literals, allowing for more precise control over string manipulation
• Enhanced mapped types: More powerful manipulation of object types using mapped types
• Const type parameters: Improved type safety for generic functions by allowing constant values for type parameters
• override keyword: Explicitly mark methods that override a base class method, improving code clarity and catching potential errors
• Improved...

As promised earlier, we will now explore some of the most prominent features introduced in TypeScript 5.

Note

In this section, we mention the concept of compiler errors. If you are coming from a background in languages such as C++ or Java, it’s important to understand a particular distinction. A compiler is a tool that translates source code written in a programming language into another form, typically machine code or bytecode. The TypeScript compiler, on the other hand, focuses on type checking and converting TypeScript to JavaScript, rather than generating machine code. Experienced developers may skip this section if they are already familiar with these concepts.

• Decorator support: Decorators are a powerful syntactic feature that allows you to add metadata to classes, properties, methods, and other parts of your code. TypeScript 5 introduces better support for decorators, enabling you to explore this functionality for potential...

Having established a solid understanding of TypeScript’s core concepts, you’re likely keen to learn how to migrate existing JavaScript code. This is particularly valuable for those with strong JavaScript experience looking to transition projects to TypeScript. To effectively navigate this process, we need to grasp the fundamental differences between these languages.

In the next section, we’ll perform a comparison of JavaScript and TypeScript, highlighting key distinctions that will guide your migration efforts.

How does JavaScript compare to TypeScript?

While both JavaScript and TypeScript share a similar syntax, key differences impact how you write and execute code. Here’s a breakdown of some fundamental distinctions:

• Typing versus no typing: JavaScript is a dynamically typed language. This means the type of a variable is determined at runtime. TypeScript, on the other hand,...

The accompanying source code for this book is structured like a standard TypeScript project. All necessary libraries and configurations are included for you to run the examples directly from the command line or within Visual Studio Code. This section will equip you with the knowledge to do the following:

• Identify the libraries used and their purposes within the examples
• Understand the tsconfig parameters that govern the TypeScript compiler’s behavior
• Execute and debug unit tests using Vitest

Let’s get started!

Essential libraries and tools

The code utilizes various external libraries to showcase design patterns in practical contexts. Our aim is to help you review several of the design patterns within a specific use case. Here’s a breakdown of their roles:

• React: This popular UI library promotes patterns such as composition, component factories, and higher-order components. We’ll...

Having explored the book’s included libraries and how to run the examples, let’s turn our attention to mastering your development environment. A good Integrated Development Environment (IDE) such as VSCode can significantly enhance your productivity when debugging, refactoring, and working with TypeScript code.

We used VSCode for developing this book’s code base. You’ll learn to leverage VSCode’s inspection tools to visualize the inferred types of variables, gaining valuable insights into your code’s behavior. Finally, we’ll cover essential refactoring techniques to improve code readability and reusability.

By effectively utilizing VSCode, you’ll gain a smoother development experience and a deeper understanding of TypeScript concepts as you work through the examples and explore the material further.

Using VSCode for this book’s code

VSCode is a lightweight integrated editor that...

Now that you know how to run and debug programs using VSCode, you probably want to know how to inspect types and apply suggestions to improve consistency. VSCode helps you inspect types and improve code consistency as you write TypeScript. The built-in TypeScript language server provides suggestions and type information.

Inspecting types

Inspecting types allows you to verify the data types associated with variables, function parameters, and return values. This ensures your code adheres to type definitions and prevents potential runtime errors caused by mismatched data types. Here is how to inspect types using VSCode:

1. Open the removeDuplicateChars.ts file in the editor. This contains a function that accepts an input string and removes any duplicate characters. Feel free to run it and inspect how it works.
2. If you place the mouse cursor on top of the variables in the function body, you can inspect their types. Here is an example of this using...

Effective software design and architecture requires a need to communicate complex ideas with clarity and precision. In the domain of design patterns – reusable solutions to common programming challenges – this clarity becomes crucial. UML is a visual language specifically crafted to depict software systems and their intricate relationships.

Developed in the late 1980s, UML has become a common communication tool for architects and developers to map out the blueprints of their creations. This chapter focuses on the essentials of UML, especially class diagrams as fundamental tools for describing design patterns. Class diagrams offer a visual representation of the classes and objects, as well as their interactions within a design pattern. As we learn more about them, we’ll explore how UML empowers developers to not only leverage design patterns effectively but also document and share them in a readily comprehensible format...

That concludes our first introductory chapter. This chapter served as your starting point into the world of TypeScript. We began by unveiling the core types and language features that define TypeScript, along with its connection to JavaScript. We then walked through the process of converting a simple JavaScript program to its TypeScript counterpart.

Next, we explored the essential libraries you’ll encounter throughout this book, highlighting their role in building scalable applications. We explored the tsconfig file and its various options, allowing you to customize your TypeScript development experience.

Moving on, we equipped you with the skills to effectively run, debug, and refine your code using the powerful VSCode editor. We explored its built-in capabilities for refactoring, allowing you to further improve the structure and maintainability of your code base.

Finally, we introduced UML and class diagrams, which serve as a traditional method for visualizing...

Feel free to review the following questions and their corresponding answers to address any concerns or gain additional insights:

1. Beyond runtime errors, are there any other advantages to TypeScript’s type safety?

   Answer: Yes, static type checking in TypeScript offers several benefits:

   • Improved code clarity: Explicit types enhance code readability and maintainability for you and other developers
   • Early error detection: Type errors are caught during development, preventing unexpected runtime bugs
   • Better IDE support: Type information allows IDEs to offer features such as code completion and refactoring that are more accurate and helpful.
2. Can TypeScript be used with existing JavaScript code bases?

   Answer: Yes! TypeScript integrates seamlessly with JavaScript. You can gradually migrate existing JavaScript code to TypeScript piece by piece, ensuring a smooth transition.

3. When might refactoring with TypeScript be more challenging?

   Answer: While TypeScript generally simplifies...

• For a good introduction to TypeScript, read Learning TypeScript, Remo H. Jansen, Packt Publishing. It’s available at https://www.packtpub.com/product/learning-typescript-2x-second-edition/9781788391474.
• You can configure TypeScript with ESLint by following the Getting Started guide available at https://typescript-eslint.io/getting-started.
• Refactoring is explained in detail in Refactoring: Improving the Design of Existing Code, 2nd Edition, Martin Fowler. It’s available at https://martinfowler.com/books/refactoring.html.
• UML, as explained by its creators, is detailed in The Unified Modeling Language User Guide, Booch and James Rumbaugh. It’s available at https://www.researchgate.net/publication/234785986_Unified_Modeling_Language_User_Guide_The_2nd_Edition_Addison-Wesley_Object_Technology_Series.
• For comprehensive information about npm (Node Package Manager), visit the official npm documentation at https://docs.npmjs.com/.
...