Essential TypeScript : From Beginner to Pro

Work with Typescript and get the most from this versatile open source language. Author Adam Freeman begins this book by describing Typescript and the benefits it offers, and goes on to show you how to use TypeScript in realistic scenarios, going in-depth to give you the knowledge you need. Starting from the nuts-and-bolts and building up to the most advanced and sophisticated features, you will learn how TypeScript builds on the JavaScript type system to create a safer and more productive development experience and understand how TypeScript can be used to create applications using popular frameworks, including Node.js, Angular, React, and Vue.js. Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them. What You Will Learn Gain a solid understanding of the TypeScript language and tools Use TypeScript for client- and server-side development Extend and customize TypeScript Debug and unit test your TypeScript code Who This Book Is ForDevelopers who want to start using TypeScript, for example to create rich web applications using Angular, React, or Vue.js About the authorAdam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and long-distance running. Table of Contents......Page 5 About the Author......Page 19 About the Technical Reviewer......Page 20 Part I: Getting Started with TypeScript......Page 21 Step 2: Install Git......Page 22 Step 4: Install a Programmer’s Editor......Page 23 Initializing the Project......Page 24 Compiling and Executing the Code......Page 25 Defining the Data Model......Page 26 Creating the Todo Item Collection Class......Page 28 Checking the Basic Data Model Features......Page 29 Adding Features to the Collection Class......Page 32 Providing Access to To-Do Items......Page 33 Removing Completed Tasks......Page 35 Providing Item Counts......Page 36 Using a Third-Party Package......Page 39 Adding Type Declarations for the JavaScript Package......Page 41 Adding Commands......Page 42 Filtering Items......Page 43 Adding Tasks......Page 44 Marking Tasks Complete......Page 46 Persistently Storing Data......Page 49 Applying the Persistent Collection Class......Page 51 Summary......Page 52 Understanding the TypeScript Developer Productivity Features......Page 53 Understanding the JavaScript Version Features......Page 54 What Is the Structure of This Book?......Page 55 Are There Lots of Examples?......Page 56 Summary......Page 58 Preparing for This Chapter......Page 59 Getting Confused by JavaScript......Page 60 Understanding JavaScript Types......Page 61 Working with Primitive Data Types......Page 62 Understanding Type Coercion......Page 64 Avoiding Unintentional Type Coercion......Page 65 Appreciating the Value of Explicitly Applied Type Coercion......Page 66 Working with Functions......Page 67 Avoiding Argument Mismatch Problems......Page 68 Using Arrow Functions......Page 71 Working with Arrays......Page 72 Working with Objects......Page 74 Adding, Changing, and Deleting Object Properties......Page 75 Guarding Against Undefined Objects and Properties......Page 76 Using the Spread and Rest Operators on Objects......Page 77 Defining Getters and Setters......Page 79 Defining Methods......Page 80 Understanding the this Keyword......Page 82 Understanding the this Keyword in Stand-Alone Functions......Page 83 Understanding this in Methods......Page 84 Understanding this in Arrow Functions......Page 86 Returning to the Original Problem......Page 88 Summary......Page 89 Preparing for This Chapter......Page 90 Understanding JavaScript Object Inheritance......Page 91 Inspecting and Modifying an Object’s Prototype......Page 92 Creating Custom Prototypes......Page 94 Using Constructor Functions......Page 95 Chaining Constructor Functions......Page 96 Checking Prototype Types......Page 98 Defining Static Properties and Methods......Page 99 Using JavaScript Classes......Page 100 Using Inheritance in Classes......Page 101 Defining Static Methods......Page 102 Using Iterators and Generators......Page 103 Using a Generator......Page 104 Defining Iterable Objects......Page 106 Storing Data by Key Using an Object......Page 108 Using Symbols for Map Keys......Page 110 Storing Data by Index......Page 112 Creating a JavaScript Module......Page 113 Using a JavaScript Module......Page 114 Exporting Named Features from a Module......Page 115 Defining Multiple Named Features in a Module......Page 117 Summary......Page 118 Preparing for This Chapter......Page 119 Understanding the Project Structure......Page 120 Using the Node Package Manager......Page 121 Understanding the TypeScript Compiler Configuration File......Page 124 Compiling TypeScript Code......Page 126 Understanding Compiler Errors......Page 127 Using Watch Mode and Executing the Compiled Code......Page 128 Automatically Executing Code After Compilation......Page 130 Using the Version Targeting Feature......Page 131 Setting the Library Files for Compilation......Page 133 Selecting a Module Format......Page 136 Useful Compiler Configuration Settings......Page 139 Summary......Page 141 Preparing for This Chapter......Page 142 Adding Breakpoints......Page 143 Using Visual Studio Code for Debugging......Page 144 Using the Integrated Node.js Debugger......Page 145 Using the Remote Node.js Debugging Feature......Page 146 Using the TypeScript Linter......Page 148 Disabling Linting Rules......Page 150 Unit Testing TypeScript......Page 152 Creating Unit Tests......Page 153 Starting the Test Framework......Page 154 Summary......Page 156 Part II: Working with TypeScript......Page 157 Chapter 7: Understanding Static Types......Page 158 Preparing for This Chapter......Page 159 Understanding Static Types......Page 161 Creating a Static Type with a Type Annotation......Page 163 Using Implicitly Defined Static Types......Page 164 Using the any Type......Page 167 Disabling Implicit Any Types......Page 169 Using Type Unions......Page 170 Using Type Assertions......Page 172 Asserting to an Unexpected Type......Page 174 Using a Type Guard......Page 175 Using the unknown Type......Page 177 Using Nullable Types......Page 179 Restricting Nullable Assignments......Page 180 Removing null from a Union with an Assertion......Page 181 Using the Definite Assignment Assertion......Page 183 Summary......Page 185 Chapter 8: Using Functions......Page 186 Preparing for This Chapter......Page 187 Redefining Functions......Page 188 Understanding Function Parameters......Page 190 Using Optional Parameters......Page 191 Using a Parameter with a Default Value......Page 192 Using a Rest Parameter......Page 193 Applying Type Annotations to Function Parameters......Page 194 Controlling Null Parameter Values......Page 195 Understanding Function Results......Page 196 Disabling Implicit Returns......Page 197 Using Type Annotations for Function Results......Page 198 Overloading Function Types......Page 199 Summary......Page 201 Chapter 9: Using Arrays, Tuples, and Enums......Page 202 Preparing for This Chapter......Page 203 Working with Arrays......Page 204 Using Inferred Typing for Arrays......Page 206 Avoiding Problems with Inferred Array Types......Page 207 Understanding the never Array Type Pitfall......Page 208 Working with Tuples......Page 209 Processing Tuples......Page 210 Using Tuple Types......Page 211 Using Enums......Page 212 Understanding How Enums Work......Page 213 Using Specific Enum Values......Page 214 Using String Enums......Page 216 Understanding the Value-Checking Limitation......Page 217 Using Constant Enums......Page 218 Using Literal Value Types......Page 220 Using Literal Value Types in Functions......Page 221 Mixing Value Types in a Literal Value Type......Page 222 Using Overrides with Literal Value Types......Page 223 Using Type Aliases......Page 224 Summary......Page 225 Chapter 10: Working with Objects......Page 226 Preparing for This Chapter......Page 227 Working with Objects......Page 228 Using Object Shape Type Annotations......Page 229 Understanding How Shape Types Fit......Page 230 Including Methods in Shape Types......Page 231 Enforcing Strict Checking for Methods......Page 233 Dealing with Excess Properties......Page 234 Using Shape Type Unions......Page 236 Understanding Union Property Types......Page 237 Type Guarding by Checking Properties......Page 238 Type Guarding with a Type Predicate Function......Page 241 Using Type Intersections......Page 242 Using Intersections for Data Correlation......Page 244 Understanding Intersection Merging......Page 245 Merging Properties with Different Types......Page 247 Merging Methods......Page 250 Summary......Page 252 Chapter 11: Working with Classes and Interfaces......Page 253 Preparing for This Chapter......Page 254 Using Constructor Functions......Page 255 Using Classes......Page 257 Using the Access Control Keywords......Page 259 Defining Read-Only Properties......Page 262 Simplifying Class Constructors......Page 263 Using Class Inheritance......Page 264 Understanding Type Inference for Subclasses......Page 265 Using an Abstract Class......Page 267 Type Guarding an Abstract Class......Page 269 Using Interfaces......Page 270 Implementing Multiple Interfaces......Page 272 Extending Interfaces......Page 274 Defining Optional Interface Properties and Methods......Page 276 Defining an Abstract Interface Implementation......Page 278 Type Guarding an Interface......Page 279 Dynamically Creating Properties......Page 281 Summary......Page 282 Chapter 12: Using Generic Types......Page 283 Preparing for This Chapter......Page 284 Understanding the Problem......Page 285 Adding Support for Another Type......Page 286 Creating Generic Classes......Page 287 Using Different Type Arguments......Page 289 Constraining Generic Type Values......Page 290 Constraining Generic Types Using a Shape......Page 292 Defining Multiple Type Parameters......Page 294 Applying a Type Parameter to a Method......Page 295 Allowing the Compiler to Infer Type Arguments......Page 296 Adding Extra Features to the Existing Type Parameters......Page 298 Fixing the Generic Type Parameter......Page 299 Restricting the Generic Type Parameter......Page 300 Type Guarding Generic Types......Page 302 Defining a Static Method on a Generic Class......Page 304 Defining Generic Interfaces......Page 306 Passing on the Generic Type Parameter......Page 307 Creating an Abstract Interface Implementation......Page 309 Summary......Page 311 Chapter 13: Advanced Generic Types......Page 312 Preparing for This Chapter......Page 313 Using Generic Collections......Page 314 Using Generic Iterators......Page 316 Combining an Iterable and an Iterator......Page 318 Creating an Iterable Class......Page 319 Using the Index Type Query......Page 320 Explicitly Providing Generic Type Parameters for Index Types......Page 321 Using the Indexed Access Operator......Page 322 Using an Index Type for the Collection Class......Page 324 Using Type Mapping......Page 326 Using a Generic Type Parameter with a Mapped Type......Page 327 Changing Property Optionality and Mutability......Page 328 Mapping Specific Properties......Page 330 Creating Types with a Type Mapping......Page 331 Using Conditional Types......Page 332 Using Conditional Types in Generic Classes......Page 334 Using Conditional Types with Type Unions......Page 336 Using Conditional Types in Type Mappings......Page 337 Identifying Properties of a Specific Type......Page 338 Inferring Additional Types in Conditions......Page 340 Inferring Types of Functions......Page 342 Summary......Page 343 Chapter 14: Working with JavaScript......Page 344 Preparing for This Chapter......Page 345 Adding the TypeScript Code to the Example Project......Page 346 Working with JavaScript......Page 349 Including JavaScript in the Compilation Process......Page 350 Type Checking JavaScript Code......Page 351 Describing Types Used in JavaScript Code......Page 353 Using Comments to Describe Types......Page 354 Using Type Declaration Files......Page 355 Describing Third-Party JavaScript Code......Page 358 Using Definitely Typed Declaration Files......Page 361 Using Packages That Include Type Declarations......Page 363 Generating Declaration Files......Page 365 Summary......Page 368 Part III: Creating Web Applications......Page 369 Preparing for This Chapter......Page 370 Adding a Bundler......Page 372 Adding a Development Web Server......Page 375 Creating the Data Model......Page 378 Creating the Data Source......Page 379 Rendering HTML Content Using the DOM API......Page 382 Adding Support for Bootstrap CSS Styles......Page 383 Using JSX to Create HTML Content......Page 385 Understanding the JSX Workflow......Page 386 Configuring the TypeScript Compiler and the Webpack Loader......Page 388 Creating the Factory Function......Page 389 Using the JSX Class......Page 390 Importing the Factory Function in the JSX Class......Page 391 Displaying a Filtered List of Products......Page 392 Displaying Content and Handling Updates......Page 396 Summary......Page 398 Preparing for This Chapter......Page 399 Adding a Web Service......Page 402 Incorporating the Data Source into the Application......Page 403 Using Decorators......Page 405 Using Decorator Metadata......Page 407 Adding an Order Details Class......Page 411 Completing the Application......Page 413 Adding the Production HTTP Server Package......Page 417 Creating the Server......Page 418 Using Relative URLs for Data Requests......Page 419 Building the Application......Page 420 Testing the Production Build......Page 421 Creating the Docker Container......Page 422 Running the Application......Page 423 Summary......Page 425 Chapter 17: Creating an Angular App, Part 1......Page 426 Configuring the Web Service......Page 427 Configuring the Bootstrap CSS Package......Page 429 Starting the Example Application......Page 430 Understanding TypeScript in Angular Development......Page 431 Understanding the TypeScript Angular Toolchain......Page 432 Understanding the Two Angular Compilers......Page 433 Creating the Data Model......Page 436 Creating the Data Source......Page 437 Creating the Data Source Implementation Class......Page 439 Displaying a Filtered List of Products......Page 441 Displaying the Category Buttons......Page 443 Combining the Product, Category, and Header Components......Page 445 Configuring the Application......Page 447 Summary......Page 449 Chapter 18: Creating an Angular App, Part 2......Page 450 Preparing for This Chapter......Page 451 Completing the Example Application Features......Page 452 Adding the Summary Component......Page 454 Creating the Routing Configuration......Page 455 Adding the Production HTTP Server Package......Page 457 Creating the Server......Page 458 Using Relative URLs for Data Requests......Page 459 Building the Application......Page 460 Testing the Production Build......Page 461 Preparing the Application......Page 462 Creating the Docker Container......Page 463 Running the Application......Page 464 Summary......Page 465 Chapter 19: Creating a React App......Page 466 Configuring the Web Service......Page 467 Installing the Bootstrap CSS Package......Page 468 Starting the Example Application......Page 469 Understanding TypeScript in React Development......Page 470 Defining the Entity Types......Page 473 Displaying a Filtered List of Products......Page 474 Using a Functional Component and Hooks......Page 476 Displaying a List of Categories and the Header......Page 478 Composing and Testing the Components......Page 479 Creating the Data Store......Page 482 Creating the HTTP Request Class......Page 485 Connecting the Data Store to the Components......Page 486 Summary......Page 489 Chapter 20: Creating a React App, Part 2......Page 490 Preparing for This Chapter......Page 491 Configuring URL Routing......Page 492 Adding the Order Summary Component......Page 494 Adding the Confirmation Component......Page 496 Completing the Routing Configuration......Page 497 Adding the Production HTTP Server Package......Page 498 Creating the Server......Page 499 Using Relative URLs for Data Requests......Page 500 Building the Application......Page 501 Testing the Production Build......Page 502 Creating the Docker Container......Page 503 Running the Application......Page 504 Summary......Page 506 Chapter 21: Creating a Vue.js App, Part 1......Page 507 Preparing for This Chapter......Page 508 Configuring the Web Service......Page 509 Starting the Example Application......Page 510 Understanding the TypeScript Vue.js Toolchain......Page 512 Creating the Entity Classes......Page 514 Displaying a Filtered List of Products......Page 515 Displaying a List of Categories and the Header......Page 517 Composing and Testing the Components......Page 519 Creating the Data Store......Page 522 Creating Data Store Decorators......Page 524 Connecting Components to the Data Store......Page 525 Adding Support for the Web Service......Page 527 Summary......Page 531 Chapter 22: Creating a Vue.js App, Part 2......Page 532 Preparing for This Chapter......Page 533 Configuring URL Routing......Page 534 Completing the Example Application Features......Page 536 Adding the Order Summary Component......Page 537 Adding the Confirmation Component......Page 538 Completing the Routing Configuration......Page 539 Adding the Production HTTP Server Package......Page 540 Creating the Server......Page 541 Using Relative URLs for Data Requests......Page 542 Testing the Production Build......Page 543 Preparing the Application......Page 544 Creating the Docker Container......Page 545 Running the Application......Page 546 Summary......Page 547 Index......Page 548 Work with Typescript and get the most from this versatile open source language. Author Adam Freeman begins this book by describing Typescript and the benefits it offers, and goes on to show you how to use TypeScript in realistic scenarios, going in-depth to give you the knowledge you need. Starting from the nuts-and-bolts and building up to the most advanced and sophisticated features, you will learn how TypeScript builds on the JavaScript type system to create a safer and more productive development experience and understand how TypeScript can be used to create applications using popular frameworks, including Node.js, Angular, React, and Vue.js. Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them. What You Will Learn Gain a solid understanding of the TypeScript language and tools Use TypeScript for client- and server-side development Extend and customize TypeScript Debug and unit test your TypeScript code Who This Book Is For Developers who want to start using TypeScript, for example to create rich web applications using Angular, React, or Vue.js Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and long-distance running "Discover the most essential and valuable aspects of TypeScript to get the most from this versatile open source language! In typical Freeman fashion, "Essential TypeScript" begins by providing a solid foundation to build on; enlisting straightforward communication and examples to empower you with true understanding and confidence in using the language. From there you will discover the benefits of TypeScript, see it in action through realistic scenarios, and further deepen your knowledge. Starting from the nuts-and-bolts and building up to the most advanced and sophisticated features, you will learn how TypeScript builds on the JavaScript type system to create a safer and more productive development experience. And understand how TypeScript can be used to create applications using popular frameworks, including Node.js, Angular, React and Vue.js. Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them."--Publisher's description Part 1: Getting Started with TypeScript 1. Your First TypeScript Application 2. Understanding TypeScript 3. JavaScript Primer, Part 1 4. JavaScript Primer, Part 2 5. Using the TypeScript Compiler 6. Testing and Debugging TypeScript Part 2: Working with TypeScript 7. Understanding Static Types 8. Using Functions 9. Using Arrays, Tuples and Enums 10. Working with Objects 11. Working with Classes and Interfaces 12. Using Generic Types 13. Advanced Generic Types 14. Working with JavaScript Part 3: Creating Web Applications 15. Creating a Stand-Alone Web App, Part 1 16. Creating a Stand-Alone Web App, Part 2 17. Creating an Angular App, Part 1 18. Creating an Angular App, Part 2 19. Creating a React App, Part 1 20. Creating a React App, Part 2 21. Creating a Vue.js App, Part 1 22. Creating a Vue.js App, Part 2