Essential TypeScript (eBook)

Table of Contents 5
About the Author 19
About the Technical Reviewer 20
Part I: Getting Started with TypeScript 21
Chapter 1: Your First TypeScript Application 22
Getting Ready for This Book 22
Step 1: Install Node.js 22
Step 2: Install Git 22
Step 3: Install TypeScript 23
Step 4: Install a Programmer’s Editor 23
Creating the Project 24
Initializing the Project 24
Creating the Compiler Configuration File 25
Adding a TypeScript Code File 25
Compiling and Executing the Code 25
Defining the Data Model 26
Creating the Todo Item Collection Class 28
Checking the Basic Data Model Features 29
Adding Features to the Collection Class 32
Providing Access to To-Do Items 33
Removing Completed Tasks 35
Providing Item Counts 36
Using a Third-Party Package 39
Adding Type Declarations for the JavaScript Package 41
Adding Commands 42
Filtering Items 43
Adding Tasks 44
Marking Tasks Complete 46
Persistently Storing Data 49
Applying the Persistent Collection Class 51
Summary 52
Chapter 2: Understanding TypeScript 53
Should You Use TypeScript? 53
Understanding the TypeScript Developer Productivity Features 53
Understanding the Limitations of the Productivity Features 54
Understanding the JavaScript Version Features 54
Understanding the Limitations of the Version Features 55
What Do You Need to Know? 55
How Do You Set Up Your Development Environment? 55
What Is the Structure of This Book? 55
Are There Lots of Examples? 56
Where Can You Get the Example Code? 58
Where Can You Get Corrections for This Book? 58
How Can You Contact Me? 58
Summary 58
Chapter 3: JavaScript Primer, Part 1 59
Preparing for This Chapter 59
Getting Confused by JavaScript 60
Understanding JavaScript Types 61
Working with Primitive Data Types 62
Understanding Type Coercion 64
Avoiding Unintentional Type Coercion 65
Appreciating the Value of Explicitly Applied Type Coercion 66
Working with Functions 67
Working with Function Results 68
Avoiding Argument Mismatch Problems 68
Using Arrow Functions 71
Working with Arrays 72
Using the Spread Operator on Arrays 74
Working with Objects 74
Adding, Changing, and Deleting Object Properties 75
Guarding Against Undefined Objects and Properties 76
Using the Spread and Rest Operators on Objects 77
Defining Getters and Setters 79
Defining Methods 80
Understanding the this Keyword 82
Understanding the this Keyword in Stand-Alone Functions 83
Understanding this in Methods 84
Changing the Behavior of the this Keyword 86
Understanding this in Arrow Functions 86
Returning to the Original Problem 88
Summary 89
Chapter 4: JavaScript Primer, Part 2 90
Preparing for This Chapter 90
Understanding JavaScript Object Inheritance 91
Inspecting and Modifying an Object’s Prototype 92
Creating Custom Prototypes 94
Using Constructor Functions 95
Chaining Constructor Functions 96
Checking Prototype Types 98
Defining Static Properties and Methods 99
Using JavaScript Classes 100
Using Inheritance in Classes 101
Defining Static Methods 102
Using Iterators and Generators 103
Using a Generator 104
Defining Iterable Objects 106
Using JavaScript Collections 108
Storing Data by Key Using an Object 108
Storing Data by Key Using a Map 110
Using Symbols for Map Keys 110
Storing Data by Index 112
Using Modules 113
Creating a JavaScript Module 113
Using a JavaScript Module 114
Exporting Named Features from a Module 115
Defining Multiple Named Features in a Module 117
Summary 118
Chapter 5: Using the TypeScript Compiler 119
Preparing for This Chapter 119
Understanding the Project Structure 120
Using the Node Package Manager 121
Understanding the TypeScript Compiler Configuration File 124
Compiling TypeScript Code 126
Understanding Compiler Errors 127
Using Watch Mode and Executing the Compiled Code 128
Automatically Executing Code After Compilation 130
Starting the Compiler Using NPM 131
Using the Version Targeting Feature 131
Setting the Library Files for Compilation 133
Selecting a Module Format 136
Useful Compiler Configuration Settings 139
Summary 141
Chapter 6: Testing and Debugging TypeScript 142
Preparing for This Chapter 142
Debugging TypeScript Code 143
Preparing for Debugging 143
Adding Breakpoints 143
Using Visual Studio Code for Debugging 144
Using the Integrated Node.js Debugger 145
Using the Remote Node.js Debugging Feature 146
Using the TypeScript Linter 148
Disabling Linting Rules 150
Unit Testing TypeScript 152
Configuring the Test Framework 153
Creating Unit Tests 153
Starting the Test Framework 154
Summary 156
Part II: Working with TypeScript 157
Chapter 7: Understanding Static Types 158
Preparing for This Chapter 159
Understanding Static Types 161
Creating a Static Type with a Type Annotation 163
Using Implicitly Defined Static Types 164
Using the any Type 167
Using Implicitly Defined Any Types 169
Disabling Implicit Any Types 169
Using Type Unions 170
Using Type Assertions 172
Asserting to an Unexpected Type 174
Using a Type Guard 175
Understanding the Never Type 177
Using the unknown Type 177
Using Nullable Types 179
Restricting Nullable Assignments 180
Removing null from a Union with an Assertion 181
Removing null from a Union with a Type Guard 183
Using the Definite Assignment Assertion 183
Summary 185
Chapter 8: Using Functions 186
Preparing for This Chapter 187
Defining Functions 188
Redefining Functions 188
Understanding Function Parameters 190
Using Optional Parameters 191
Using a Parameter with a Default Value 192
Using a Rest Parameter 193
Applying Type Annotations to Function Parameters 194
Controlling Null Parameter Values 195
Understanding Function Results 196
Disabling Implicit Returns 197
Using Type Annotations for Function Results 198
Defining Void Functions 199
Overloading Function Types 199
Summary 201
Chapter 9: Using Arrays, Tuples, and Enums 202
Preparing for This Chapter 203
Working with Arrays 204
Using Inferred Typing for Arrays 206
Avoiding Problems with Inferred Array Types 207
Avoiding Problems with Empty Arrays 208
Understanding the never Array Type Pitfall 208
Working with Tuples 209
Processing Tuples 210
Using Tuple Types 211
Using Enums 212
Understanding How Enums Work 213
Using Specific Enum Values 214
Using String Enums 216
Understanding the Limitations of Enums 217
Understanding the Value-Checking Limitation 217
Understanding the Type Guard Limitation 218
Using Constant Enums 218
Using Literal Value Types 220
Using Literal Value Types in Functions 221
Mixing Value Types in a Literal Value Type 222
Using Overrides with Literal Value Types 223
Using Type Aliases 224
Summary 225
Chapter 10: Working with Objects 226
Preparing for This Chapter 227
Working with Objects 228
Using Object Shape Type Annotations 229
Understanding How Shape Types Fit 230
Using Optional Properties for Irregular Shapes 231
Including Methods in Shape Types 231
Enforcing Strict Checking for Methods 233
Using Type Aliases for Shape Types 234
Dealing with Excess Properties 234
Using Shape Type Unions 236
Understanding Union Property Types 237
Using Type Guards for Objects 238
Type Guarding by Checking Properties 238
Type Guarding with a Type Predicate Function 241
Using Type Intersections 242
Using Intersections for Data Correlation 244
Understanding Intersection Merging 245
Merging Properties with the Same Type 247
Merging Properties with Different Types 247
Merging Methods 250
Summary 252
Chapter 11: Working with Classes and Interfaces 253
Preparing for This Chapter 254
Using Constructor Functions 255
Using Classes 257
Using the Access Control Keywords 259
Defining Read-Only Properties 262
Simplifying Class Constructors 263
Using Class Inheritance 264
Understanding Type Inference for Subclasses 265
Using an Abstract Class 267
Type Guarding an Abstract Class 269
Using Interfaces 270
Implementing Multiple Interfaces 272
Extending Interfaces 274
Defining Optional Interface Properties and Methods 276
Defining an Abstract Interface Implementation 278
Type Guarding an Interface 279
Dynamically Creating Properties 281
Summary 282
Chapter 12: Using Generic Types 283
Preparing for This Chapter 284
Understanding the Problem 285
Adding Support for Another Type 286
Creating Generic Classes 287
Understanding Generic Type Arguments 289
Using Different Type Arguments 289
Constraining Generic Type Values 290
Constraining Generic Types Using a Shape 292
Defining Multiple Type Parameters 294
Applying a Type Parameter to a Method 295
Allowing the Compiler to Infer Type Arguments 296
Extending Generic Classes 298
Adding Extra Features to the Existing Type Parameters 298
Fixing the Generic Type Parameter 299
Restricting the Generic Type Parameter 300
Type Guarding Generic Types 302
Defining a Static Method on a Generic Class 304
Defining Generic Interfaces 306
Extending Generic Interfaces 307
Implementing a Generic Interface 307
Passing on the Generic Type Parameter 307
Restricting or Fixing the Generic Type Parameter 309
Creating an Abstract Interface Implementation 309
Summary 311
Chapter 13: Advanced Generic Types 312
Preparing for This Chapter 313
Using Generic Collections 314
Using Generic Iterators 316
Combining an Iterable and an Iterator 318
Creating an Iterable Class 319
Using Index Types 320
Using the Index Type Query 320
Explicitly Providing Generic Type Parameters for Index Types 321
Using the Indexed Access Operator 322
Using an Index Type for the Collection< T>
Using Type Mapping 326
Using a Generic Type Parameter with a Mapped Type 327
Changing Property Optionality and Mutability 328
Mapping Specific Properties 330
Combining Transformations in a Single Mapping 331
Creating Types with a Type Mapping 331
Using Conditional Types 332
Nesting Conditional Types 334
Using Conditional Types in Generic Classes 334
Using Conditional Types with Type Unions 336
Using the Built-in Distributive Conditional Types 337
Using Conditional Types in Type Mappings 337
Identifying Properties of a Specific Type 338
Inferring Additional Types in Conditions 340
Inferring Types of Functions 342
Summary 343
Chapter 14: Working with JavaScript 344
Preparing for This Chapter 345
Adding the TypeScript Code to the Example Project 346
Working with JavaScript 349
Including JavaScript in the Compilation Process 350
Type Checking JavaScript Code 351
Describing Types Used in JavaScript Code 353
Using Comments to Describe Types 354
Using Type Declaration Files 355
Describing Third-Party JavaScript Code 358
Using Definitely Typed Declaration Files 361
Using Packages That Include Type Declarations 363
Generating Declaration Files 365
Summary 368
Part III: Creating Web Applications 369
Chapter 15: Creating a Stand-Alone Web App, Part 1 370
Preparing for This Chapter 370
Creating the Toolchain 372
Adding a Bundler 372
Adding a Development Web Server 375
Creating the Data Model 378
Creating the Data Source 379
Rendering HTML Content Using the DOM API 382
Adding Support for Bootstrap CSS Styles 383
Using JSX to Create HTML Content 385
Understanding the JSX Workflow 386
Configuring the TypeScript Compiler and the Webpack Loader 388
Creating the Factory Function 389
Using the JSX Class 390
Importing the Factory Function in the JSX Class 391
Adding Features to the Application 392
Displaying a Filtered List of Products 392
Displaying Content and Handling Updates 396
Summary 398
Chapter 16: Creating a Stand-Alone Web App, Part 2 399
Preparing for This Chapter 399
Adding a Web Service 402
Incorporating the Data Source into the Application 403
Using Decorators 405
Using Decorator Metadata 407
Completing the Application 411
Adding a Header Class 411
Adding an Order Details Class 411
Adding a Confirmation Class 413
Completing the Application 413
Deploying the Application 417
Adding the Production HTTP Server Package 417
Creating the Persistent Data File 418
Creating the Server 418
Using Relative URLs for Data Requests 419
Building the Application 420
Testing the Production Build 421
Containerizing the Application 422
Installing Docker 422
Preparing the Application 422
Creating the Docker Container 422
Running the Application 423
Summary 425
Chapter 17: Creating an Angular App, Part 1 426
Preparing for This Chapter 427
Configuring the Web Service 427
Configuring the Bootstrap CSS Package 429
Starting the Example Application 430
Understanding TypeScript in Angular Development 431
Understanding the TypeScript Angular Toolchain 432
Understanding the Two Angular Compilers 433
Creating the Data Model 436
Creating the Data Source 437
Creating the Data Source Implementation Class 439
Configuring the Data Source 441
Displaying a Filtered List of Products 441
Displaying the Category Buttons 443
Creating the Header Display 445
Combining the Product, Category, and Header Components 445
Configuring the Application 447
Summary 449
Chapter 18: Creating an Angular App, Part 2 450
Preparing for This Chapter 451
Completing the Example Application Features 452
Adding the Summary Component 454
Creating the Routing Configuration 455
Deploying the Application 457
Adding the Production HTTP Server Package 457
Creating the Persistent Data File 458
Creating the Server 458
Using Relative URLs for Data Requests 459
Building the Application 460
Testing the Production Build 461
Containerizing the Application 462
Preparing the Application 462
Creating the Docker Container 463
Running the Application 464
Summary 465
Chapter 19: Creating a React App 466
Preparing for This Chapter 467
Configuring the Web Service 467
Installing the Bootstrap CSS Package 468
Starting the Example Application 469
Understanding TypeScript in React Development 470
Defining the Entity Types 473
Displaying a Filtered List of Products 474
Using a Functional Component and Hooks 476
Displaying a List of Categories and the Header 478
Composing and Testing the Components 479
Creating the Data Store 482
Creating the HTTP Request Class 485
Connecting the Data Store to the Components 486
Summary 489
Chapter 20: Creating a React App, Part 2 490
Preparing for This Chapter 491
Configuring URL Routing 492
Completing the Example Application Features 494
Adding the Order Summary Component 494
Adding the Confirmation Component 496
Completing the Routing Configuration 497
Deploying the Application 498
Adding the Production HTTP Server Package 498
Creating the Persistent Data File 499
Creating the Server 499
Using Relative URLs for Data Requests 500
Building the Application 501
Testing the Production Build 502
Containerizing the Application 503
Preparing the Application 503
Creating the Docker Container 503
Running the Application 504
Summary 506
Chapter 21: Creating a Vue.js App, Part 1 507
Preparing for This Chapter 508
Configuring the Web Service 509
Configuring the Bootstrap CSS Package 510
Starting the Example Application 510
Understanding TypeScript in Vue.js Development 512
Understanding the TypeScript Vue.js Toolchain 512
Creating the Entity Classes 514
Displaying a Filtered List of Products 515
Displaying a List of Categories and the Header 517
Composing and Testing the Components 519
Creating the Data Store 522
Creating Data Store Decorators 524
Connecting Components to the Data Store 525
Adding Support for the Web Service 527
Summary 531
Chapter 22: Creating a Vue.js App, Part 2 532
Preparing for This Chapter 533
Configuring URL Routing 534
Completing the Example Application Features 536
Adding the Order Summary Component 537
Adding the Confirmation Component 538
Completing the Routing Configuration 539
Deploying the Application 540
Adding the Production HTTP Server Package 540
Creating the Persistent Data File 541
Creating the Server 541
Using Relative URLs for Data Requests 542
Building the Application 543
Testing the Production Build 543
Containerizing the Application 544
Preparing the Application 544
Creating the Docker Container 545
Running the Application 546
Summary 547
Index 548