Essential TypeScript 5. 3 Ed

Essential TypeScript 5, Third Edition....1

dedication....6

brief contents....7

contents....9

preface....21

about this book....22

Who should read this book....22

How this book is organized: a roadmap....22

About the code....23

liveBook discussion forum....23

about the author....24

about the cover illustration....25

1 Understanding TypeScript....26

1.1 Should you use TypeScript?....26

1.1.1 Understanding the TypeScript developer productivity features....27

1.1.2 Understanding the JavaScript version features....28

1.2 What do you need to know?....28

1.3 How do you set up your development environment?....29

1.4 What Is the structure of this book?....29

1.5 Are there lots of examples? ....29

1.6 Where can you get the example code?....31

1.7 What if you have problems following the examples?....31

1.7.1 What if you find an error in the book?....31

1.8 How do you contact the author?....32

1.9 What if you really enjoyed this book?....32

1.10 What if this book has made you angry?....33

Summary....33

Part 1....34

2 Your first TypeScript application....35

2.1 Getting ready for this book....36

2.1.1 Step 1: Install Node.js....36

2.1.2 Step 2: Install Git....36

2.1.3 Step 3: Install TypeScript....36

2.1.4 Step 4: Install a programmer’s editor....37

2.2 Creating the project ....38

2.2.1 Initializing the project ....38

2.2.2 Creating the compiler configuration file....38

2.2.3 Adding a TypeScript code file....39

2.2.4 Compiling and executing the code....39

2.2.5 Defining the data model ....40

2.2.6 Adding features to the collection class ....45

2.3 Using a third-party package....51

2.3.1 Preparing for the third-party package ....52

2.3.2 Installing and using the third-party package ....53

2.3.3 Adding type declarations for the JavaScript package....55

2.4 Adding commands....57

2.4.1 Filtering items ....57

2.4.2 Adding tasks....59

2.4.3 Marking tasks complete....60

2.5 Persistently storing data ....63

Summary....66

3 JavaScript primer, part 1....67

3.1 Preparing for this chapter....67

3.2 Getting confused by JavaScript....69

3.3 Understanding JavaScript types ....70

3.3.1 Working with primitive data types ....70

3.3.2 Understanding type coercion....72

3.3.3 Working with functions....76

3.4 Working with arrays....81

3.4.1 Using the spread operator on arrays....82

3.4.2 Destructuring arrays....83

3.5 Working with objects ....85

3.5.1 Adding, changing, and deleting object properties ....85

3.5.2 Using the spread and rest operators on objects....87

3.5.3 Defining getters and setters....89

3.5.4 Defining methods ....91

3.6 Understanding the this keyword....92

3.6.1 Understanding the this keyword in stand-alone functions....93

3.6.2 Understanding this in methods....94

3.6.3 Changing the behavior of the this keyword....95

3.6.4 Understanding this in arrow functions ....96

3.6.5 Returning to the original problem ....97

Summary....98

4 JavaScript primer, part 2....100

4.1 Preparing for this chapter....100

4.2 Understanding JavaScript object inheritance....101

4.2.1 Inspecting and modifying an object’s prototype ....102

4.2.2 Creating custom prototypes ....104

4.2.3 Using constructor functions....105

4.2.4 Chaining constructor functions ....106

4.2.5 Checking prototype types....108

4.2.6 Defining static properties and methods....109

4.2.7 Using JavaScript classes....110

4.3 Using iterators and generators....114

4.3.1 Using a generator ....115

4.3.2 Defining iterable objects....116

4.4 Using JavaScript collections ....119

4.4.1 Storing data by key using an object....119

4.4.2 Storing data by key using a map....120

4.4.3 Using symbols for map keys....121

4.4.4 Storing data by index....122

4.5 Using modules....123

4.5.1 Declaring the module type ....124

4.5.2 Creating a JavaScript module ....124

4.5.3 Using a JavaScript module ....125

4.5.4 Exporting named features from a module....126

4.5.5 Defining multiple named features in a module ....127

Summary....129

5 Using the TypeScript compiler....130

5.1 Preparing for this chapter....130

5.2 Understanding the project structure ....132

5.3 Using the Node Package Manager....133

5.4 Understanding the compiler configuration file ....136

5.5 Compiling TypeScript code ....138

5.5.1 Understanding compiler errors....139

5.5.2 Using watch mode and executing the compiled code ....140

5.6 Using the version targeting feature ....142

5.7 Setting the library files for compilation ....145

5.8 Selecting a module format....147

5.8.1 Specifying a module format ....150

5.9 Useful compiler configuration settings....152

Summary....154

6 Testing and debugging TypeScript....156

6.1 Preparing for this chapter....156

6.2 Debugging TypeScript code....157

6.2.1 Preparing for debugging....157

6.2.2 Using Visual Studio Code for debugging....158

6.2.3 Using the integrated Node.js debugger....160

6.2.4 Using the remote Node.js debugging feature ....160

6.3 Using the TypeScript linter....162

6.3.1 Disabling linting rules....164

6.4 Unit testing TypeScript ....166

6.4.1 Configuring the test framework....167

6.4.2 Creating unit tests....167

6.4.3 Starting the test framework ....169

Summary....170

Part 2....172

7 Understanding static types....173

7.1 Preparing for this chapter....174

7.2 Understanding static types....176

7.2.1 Creating a static type with a type annotation....178

7.2.2 Using implicitly defined static types....179

7.2.3 Using the any type ....182

7.3 Using type unions....185

7.4 Using Type Assertions ....187

7.4.1 Asserting to an unexpected type....188

7.5 Using a type guard....189

7.5.1 Understanding the never type....190

7.6 Using the unknown type....191

7.7 Using nullable types....192

7.7.1 Restricting nullable assignments....194

7.7.2 Removing null from a union with an assertion....195

7.7.3 Removing null from a union with a type guard....196

7.7.4 Using the definite assignment assertion....197

Summary....199

8 Using functions....200

8.1 Preparing for this chapter....201

8.2 Defining functions....202

8.2.1 Redefining functions ....203

8.2.2 Understanding function parameters ....204

8.2.3 Understanding function results....210

8.2.4 Overloading function types....213

8.2.5 Understanding assert functions ....215

Summary....216

9 Using arrays, tuples, and enums....218

9.1 Preparing for this chapter....219

9.2 Working with arrays....220

9.2.1 Using inferred typing for arrays ....222

9.2.2 Avoiding problems with inferred array types....223

9.2.3 Avoiding problems with empty arrays....223

9.3 Working with tuples....225

9.3.1 Processing tuples ....226

9.3.2 Using tuple types ....227

9.3.3 Using tuples with optional elements....228

9.3.4 Defining tuples with rest elements ....229

9.4 Using enums ....230

9.4.1 Understanding how enums work....231

9.4.2 Using string enums....234

9.4.3 Understanding the limitations of enums ....234

9.5 Using literal value types....237

9.5.1 Using literal value types in functions....238

9.5.2 Mixing value types in a literal value type....239

9.5.3 Using overrides with literal value types ....240

9.5.4 Using template literal string types....241

9.6 Using type aliases....242

Summary....243

10 Working with objects....244

10.1 Preparing for this chapter....245

10.2 Working with objects ....246

10.2.1 Using object shape type annotations ....247

10.2.2 Understanding how shape types fit....248

10.2.3 Using type aliases for shape types ....251

10.2.4 Using shape type unions ....252

10.2.5 Understanding union property types....253

10.2.6 Using type guards for objects....254

10.3 Using type intersections....259

10.3.1 Using intersections for data correlation ....260

10.3.2 Understanding intersection merging....262

Summary....269

11 Working with classes and interfaces....270

11.1 Preparing for this chapter....271

11.2 Using constructor functions....273

11.3 Using classes....275

11.3.1 Using the access control keywords ....277

11.3.2 Using JavaScript private fields ....279

11.3.3 Defining read-only properties ....280

11.3.4 Simplifying class constructors ....281

11.3.5 Defining Accessors ....282

11.3.6 Using auto-accessors ....287

11.3.7 Using class inheritance....288

11.3.8 Using an abstract class....291

11.4 Using interfaces....295

11.4.1 Implementing multiple interfaces....297

11.4.2 Extending interfaces....298

11.4.3 Defining optional interface properties and methods....299

11.4.4 Defining an abstract interface implementation ....301

11.4.5 Type guarding an interface ....302

11.5 Dynamically creating properties....303

11.5.1 Enabling index value checking ....305

Summary....307

12 Using generic types....309

12.1 Preparing for this chapter....310

12.2 Understanding the problem solved by generic types....312

12.2.1 Adding support for another type ....313

12.3 Creating generic classes....314

12.3.1 Understanding generic type arguments....316

12.3.2 Using different type arguments ....317

12.3.3 Constraining generic type values....318

12.3.4 Defining multiple type parameters....321

12.3.5 Allowing the compiler to infer type arguments....323

12.3.6 Extending generic classes....324

12.3.7 Type guarding generic types....329

12.3.8 Defining a static method on a generic class ....330

12.4 Defining generic interfaces....333

12.4.1 Extending generic interfaces ....333

12.4.2 Implementing a generic interface....334

Summary....337

13 Advanced generic types....338

13.1 Preparing for this chapter....339

13.2 Using generic collections ....340

13.3 Using generic iterators....342

13.3.1 Combining an iterable and an iterator....344

13.3.2 Creating an iterable class....345

13.4 Using index types....346

13.4.1 Using the index type query ....346

13.4.2 Explicitly providing generic type parameters for index types....347

13.4.3 Using the indexed access operator....348

13.4.4 Using an index type for the collection class....350

13.5 Using type mapping....352

13.5.1 Changing mapping names and types....353

13.5.2 Using a generic type parameter with a mapped type ....354

13.5.3 Changing property optionality and mutability ....355

13.5.4 Using the basic built-in mappings....356

13.5.5 Combining transformations in a single mapping....358

13.5.6 Creating types with a type mapping....358

13.6 Using conditional types....359

13.6.1 Nesting conditional types ....360

13.6.2 Using conditional types in generic classes....361

13.6.3 Using conditional types with type unions....363

13.6.4 Using conditional types in type mappings....364

13.6.5 Identifying properties of a specific type ....365

13.6.6 Inferring additional types in conditions ....366

Summary....370

14 Using decorators....371

14.1 Preparing for this chapter....372

14.2 Understanding decorators ....374

14.2.1 Using decorator context data ....377

14.2.2 Using specific types in a decorator ....380

14.3 Using the other decorator types....382

14.3.1 Creating a class decorator ....382

14.3.2 Creating a field decorator ....385

14.3.3 Creating an accessor decorator ....387

14.3.4 Creating an auto-accessor decorator ....390

14.4 Passing an additional argument to a decorator ....393

14.5 Applying multiple decorators....397

14.6 Using an initializer....399

14.7 Accumulating state data....401

Summary....403

15 Working with JavaScript....404

15.1 Preparing for this chapter....405

15.1.1 Adding TypeScript code to the example project ....407

15.2 Working with JavaScript ....409

15.2.1 Including JavaScript in the compilation process....410

15.2.2 Type-checking JavaScript code....411

15.3 Describing types used in JavaScript code....412

15.3.1 Using comments to describe types ....413

15.3.2 Using type declaration files....415

15.3.3 Describing third-party JavaScript code....417

15.3.4 Using Definitely Typed declaration files ....420

15.3.5 Using packages that include type declarations ....422

15.4 Generating declaration files ....424

Summary....427

Part 3....428

16 Creating a stand-alone web app, part 1....429

16.1 Preparing for this chapter....430

16.2 Creating the toolchain ....431

16.3 Adding a bundler....432

16.4 Adding a development web server ....434

16.5 Creating the data model ....437

16.5.1 Creating the data source....439

16.6 Rendering HTML content using the DOM API....441

16.6.1 Adding support for Bootstrap CSS styles....442

16.7 Using JSX to create HTML content ....445

16.7.1 Understanding the JSX workflow....446

16.7.2 Configuring the compiler and the loader....448

16.7.3 Creating the factory function ....449

16.7.4 Using the JSX class....450

16.7.5 Importing the factory function in the JSX class ....451

16.8 Adding features to the application ....452

16.8.1 Displaying a filtered list of products....452

16.8.2 Displaying content and handling updates....455

Summary....458

17 Creating a stand-alone web app, part 2....459

17.1 Preparing for this chapter....460

17.2 Adding a web service....462

17.2.1 Incorporating the data source into the application ....464

17.3 Completing the application ....465

17.3.1 Adding a header class....465

17.3.2 Adding an order details class ....466

17.3.3 Adding a confirmation class ....467

17.3.4 Completing the application....468

17.4 Deploying the application ....471

17.4.1 Adding the production HTTP server package....471

17.4.2 Creating the persistent data file....472

17.4.3 Creating the server ....472

17.4.4 Using relative URLs for data requests ....473

17.4.5 Building the application ....474

17.4.6 Testing the production build....475

17.5 Containerizing the application ....476

17.5.1 Installing Docker....476

17.5.2 Preparing the application ....476

17.5.3 Creating the Docker container....477

17.5.4 Running the application ....478

Summary....479

18 Creating an Angular app, part 1....480

18.1 Preparing for this chapter....482

18.1.1 Configuring the web service....482

18.1.2 Configuring the Bootstrap CSS package ....484

18.1.3 Starting the example application ....484

18.2 Understanding TypeScript in Angular development....485

18.2.1 Understanding the TypeScript compiler configuration ....486

18.3 Creating the data model ....487

18.3.1 Creating the Data Source ....489

18.3.2 Creating the data source implementation class ....491

18.3.3 Configuring the data source ....492

18.4 Displaying a filtered list of products....493

18.4.1 Displaying the category buttons....495

18.4.2 Creating the header display ....497

18.4.3 Combining the components ....497

18.5 Configuring the application....499

Summary....501

19 Creating an Angular app, part 2....502

19.1 Preparing for this chapter....503

19.2 Completing the example application features....504

19.2.1 Adding the summary component ....506

19.2.2 Creating the routing configuration ....507

19.3 Deploying the application ....510

19.3.1 Adding the production HTTP server package....510

19.3.2 Creating the persistent data file....510

19.3.3 Creating the server ....511

19.3.4 Using relative URLs for data requests ....511

19.3.5 Building the application ....512

19.3.6 Testing the production build....513

19.4 Containerizing the application ....514

19.4.1 Preparing the application ....514

19.4.2 Creating the Docker container....514

19.4.3 Running the application ....515

Summary....517

20 Creating a React app....518

20.1 Preparing for this chapter....519

20.1.1 Configuring the web service....520

20.1.2 Installing the Bootstrap CSS package ....521

20.1.3 Starting the example application ....522

20.2 Understanding TypeScript in React development ....523

20.3 Defining the entity types....525

20.4 Displaying a filtered list of products....527

20.4.1 Using a functional component and hooks....529

20.4.2 Displaying a list of categories and the header....530

20.4.3 Composing and testing the components ....532

20.5 Creating the data store....534

20.5.1 Implementing the HTTP API clients....537

Summary....541

21 Creating a React app, part 2....542

21.1 Preparing for this chapter....543

21.2 Configuring URL routing....544

21.3 Completing the example application features....547

21.3.1 Adding the confirmation component ....549

21.3.2 Consuming the orders web service....549

21.3.3 Completing the application....551

21.4 Deploying the application ....554

21.4.1 Adding the production HTTP server package....554

21.4.2 Creating the persistent data file....555

21.4.3 Creating the server ....555

21.4.4 Using relative URLs for data requests ....556

21.4.5 Building the application ....557

21.4.6 Testing the production build....557

21.5 Containerizing the application ....558

21.5.1 Preparing the application ....558

21.5.2 Creating the Docker container....559

21.5.3 Running the application ....560

Summary....561

index....562

TypeScript enhances JavaScript with static typing, while keeping all the JS flexibility you know and love! It’s the perfect choice for any developer looking to improve the predictability and reliability of their code. Essential TypeScript 5, Third Edition teaches you how to get the most out of TypeScript 5 for a consistent, dependable development experience.

Inside Essential TypeScript 5, Third Edition you’ll learn how to:

• Configure the TypeScript development tools
• Use type annotations
• Create strongly typed functions and classes
• Use generic types
• Use type guards to determine types
• Create and consume type declaration files
• Use TypeScript to create web applications with Angular and React

The book starts you off with a proper understanding of the JavaScript type system that will make using TypeScript so much easier. On that solid foundation, you’ll build your understanding of TypeScript development, following a hands-on learning path all the way to TypeScript’s advanced features.

About the technology

TypeScript is a popular superset of JavaScript that adds support for static typing. TypeScript’s typing features, which will be instantly familiar to C# or Java programmers, help you reduce errors and improve the overall quality of your JavaScript code.

About the book

Essential TypeScript 5 is a fully updated third edition of the classic Adam Freeman bestseller. It provides full coverage of TypeScript 5, including new features like decorators. You’ll begin with the hows-and-whys of TypeScript, then quickly progress to practical applications of static types. No wasted pages! Each chapter is focused on the skills you need to write awesome web apps.

What's inside

• Configure your development tools
• Create strongly typed functions and classes
• Use generic types, type annotations, and type guards
• Create and consume type declaration files

About the reader

For JavaScript developers. No previous experience with TypeScript required.