Freeman Essential TypeScript

From Beginner to Pro
1. ed
ISBN: 978-1-4842-4979-6
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 551 Seiten

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 LearnGain a solid understanding of the TypeScript language and toolsUse TypeScript for client- and server-side developmentExtend and customize TypeScriptDebug 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.


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.

Autoren/Hrsg.

Freeman, Adam

Inhaltsverzeichnis

1;Table of Contents;5
2;About the Author;19
3;About the Technical Reviewer;20
4;Part I: Getting Started with TypeScript;21
4.1;Chapter 1: Your First TypeScript Application;22
4.1.1;Getting Ready for This Book;22
4.1.1.1;Step 1: Install Node.js;22
4.1.1.2;Step 2: Install Git;22
4.1.1.3;Step 3: Install TypeScript;23
4.1.1.4;Step 4: Install a Programmer’s Editor;23
4.1.2;Creating the Project;24
4.1.2.1;Initializing the Project;24
4.1.2.2;Creating the Compiler Configuration File;25
4.1.2.3;Adding a TypeScript Code File;25
4.1.2.4;Compiling and Executing the Code;25
4.1.2.5;Defining the Data Model;26
4.1.2.5.1;Creating the Todo Item Collection Class;28
4.1.2.5.2;Checking the Basic Data Model Features;29
4.1.2.6;Adding Features to the Collection Class;32
4.1.2.6.1;Providing Access to To-Do Items;33
4.1.2.6.2;Removing Completed Tasks;35
4.1.2.6.3;Providing Item Counts;36
4.1.3;Using a Third-Party Package;39
4.1.3.1;Adding Type Declarations for the JavaScript Package;41
4.1.4;Adding Commands;42
4.1.4.1;Filtering Items;43
4.1.4.2;Adding Tasks;44
4.1.4.3;Marking Tasks Complete;46
4.1.5;Persistently Storing Data;49
4.1.5.1;Applying the Persistent Collection Class;51
4.1.6;Summary;52
4.2;Chapter 2: Understanding TypeScript;53
4.2.1;Should You Use TypeScript?;53
4.2.1.1;Understanding the TypeScript Developer Productivity Features;53
4.2.1.1.1;Understanding the Limitations of the Productivity Features;54
4.2.1.2;Understanding the JavaScript Version Features;54
4.2.1.2.1;Understanding the Limitations of the Version Features;55
4.2.2;What Do You Need to Know?;55
4.2.3;How Do You Set Up Your Development Environment?;55
4.2.4;What Is the Structure of This Book?;55
4.2.5;Are There Lots of Examples?;56
4.2.6;Where Can You Get the Example Code?;58
4.2.7;Where Can You Get Corrections for This Book?;58
4.2.8;How Can You Contact Me?;58
4.2.9;Summary;58
4.3;Chapter 3: JavaScript Primer, Part 1;59
4.3.1;Preparing for This Chapter;59
4.3.2;Getting Confused by JavaScript;60
4.3.3;Understanding JavaScript Types;61
4.3.3.1;Working with Primitive Data Types;62
4.3.3.2;Understanding Type Coercion;64
4.3.3.2.1;Avoiding Unintentional Type Coercion;65
4.3.3.2.2;Appreciating the Value of Explicitly Applied Type Coercion;66
4.3.3.3;Working with Functions;67
4.3.3.3.1;Working with Function Results;68
4.3.3.3.2;Avoiding Argument Mismatch Problems;68
4.3.3.3.3;Using Arrow Functions;71
4.3.4;Working with Arrays;72
4.3.4.1;Using the Spread Operator on Arrays;74
4.3.5;Working with Objects;74
4.3.5.1;Adding, Changing, and Deleting Object Properties;75
4.3.5.1.1;Guarding Against Undefined Objects and Properties;76
4.3.5.2;Using the Spread and Rest Operators on Objects;77
4.3.5.3;Defining Getters and Setters;79
4.3.5.4;Defining Methods;80
4.3.6;Understanding the this Keyword;82
4.3.6.1;Understanding the this Keyword in Stand-Alone Functions;83
4.3.6.2;Understanding this in Methods;84
4.3.6.3;Changing the Behavior of the this Keyword;86
4.3.6.4;Understanding this in Arrow Functions;86
4.3.6.5;Returning to the Original Problem;88
4.3.7;Summary;89
4.4;Chapter 4: JavaScript Primer, Part 2;90
4.4.1;Preparing for This Chapter;90
4.4.2;Understanding JavaScript Object Inheritance;91
4.4.2.1;Inspecting and Modifying an Object’s Prototype;92
4.4.2.2;Creating Custom Prototypes;94
4.4.2.3;Using Constructor Functions;95
4.4.2.3.1;Chaining Constructor Functions;96
4.4.2.4;Checking Prototype Types;98
4.4.2.5;Defining Static Properties and Methods;99
4.4.2.6;Using JavaScript Classes;100
4.4.2.6.1;Using Inheritance in Classes;101
4.4.2.6.2;Defining Static Methods;102
4.4.3;Using Iterators and Generators;103
4.4.3.1;Using a Generator;104
4.4.3.2;Defining Iterable Objects;106
4.4.4;Using JavaScript Collections;108
4.4.4.1;Storing Data by Key Using an Object;108
4.4.4.2;Storing Data by Key Using a Map;110
4.4.4.2.1;Using Symbols for Map Keys;110
4.4.4.3;Storing Data by Index;112
4.4.5;Using Modules;113
4.4.5.1;Creating a JavaScript Module;113
4.4.5.2;Using a JavaScript Module;114
4.4.5.3;Exporting Named Features from a Module;115
4.4.5.4;Defining Multiple Named Features in a Module;117
4.4.6;Summary;118
4.5;Chapter 5: Using the TypeScript Compiler;119
4.5.1;Preparing for This Chapter;119
4.5.2;Understanding the Project Structure;120
4.5.3;Using the Node Package Manager;121
4.5.4;Understanding the TypeScript Compiler Configuration File;124
4.5.5;Compiling TypeScript Code;126
4.5.5.1;Understanding Compiler Errors;127
4.5.5.2;Using Watch Mode and Executing the Compiled Code;128
4.5.5.2.1;Automatically Executing Code After Compilation;130
4.5.5.2.2;Starting the Compiler Using NPM;131
4.5.6;Using the Version Targeting Feature;131
4.5.6.1;Setting the Library Files for Compilation;133
4.5.7;Selecting a Module Format;136
4.5.8;Useful Compiler Configuration Settings;139
4.5.9;Summary;141
4.6;Chapter 6: Testing and Debugging TypeScript;142
4.6.1;Preparing for This Chapter;142
4.6.2;Debugging TypeScript Code;143
4.6.2.1;Preparing for Debugging;143
4.6.2.1.1;Adding Breakpoints;143
4.6.2.2;Using Visual Studio Code for Debugging;144
4.6.2.3;Using the Integrated Node.js Debugger;145
4.6.2.4;Using the Remote Node.js Debugging Feature;146
4.6.3;Using the TypeScript Linter;148
4.6.3.1;Disabling Linting Rules;150
4.6.4;Unit Testing TypeScript;152
4.6.4.1;Configuring the Test Framework;153
4.6.4.2;Creating Unit Tests;153
4.6.4.3;Starting the Test Framework;154
4.6.5;Summary;156
5;Part II: Working with TypeScript;157
5.1;Chapter 7: Understanding Static Types;158
5.1.1;Preparing for This Chapter;159
5.1.2;Understanding Static Types;161
5.1.2.1;Creating a Static Type with a Type Annotation;163
5.1.2.2;Using Implicitly Defined Static Types;164
5.1.2.3;Using the any Type;167
5.1.2.3.1;Using Implicitly Defined Any Types;169
5.1.2.3.2;Disabling Implicit Any Types;169
5.1.3;Using Type Unions;170
5.1.4;Using Type Assertions;172
5.1.4.1;Asserting to an Unexpected Type;174
5.1.5;Using a Type Guard;175
5.1.5.1;Understanding the Never Type;177
5.1.6;Using the unknown Type;177
5.1.7;Using Nullable Types;179
5.1.7.1;Restricting Nullable Assignments;180
5.1.7.2;Removing null from a Union with an Assertion;181
5.1.7.3;Removing null from a Union with a Type Guard;183
5.1.7.4;Using the Definite Assignment Assertion;183
5.1.8;Summary;185
5.2;Chapter 8: Using Functions;186
5.2.1;Preparing for This Chapter;187
5.2.2;Defining Functions;188
5.2.2.1;Redefining Functions;188
5.2.2.2;Understanding Function Parameters;190
5.2.2.2.1;Using Optional Parameters;191
5.2.2.2.2;Using a Parameter with a Default Value;192
5.2.2.2.3;Using a Rest Parameter;193
5.2.2.2.4;Applying Type Annotations to Function Parameters;194
5.2.2.2.5;Controlling Null Parameter Values;195
5.2.2.3;Understanding Function Results;196
5.2.2.3.1;Disabling Implicit Returns;197
5.2.2.3.2;Using Type Annotations for Function Results;198
5.2.2.3.3;Defining Void Functions;199
5.2.2.4;Overloading Function Types;199
5.2.3;Summary;201
5.3;Chapter 9: Using Arrays, Tuples, and Enums;202
5.3.1;Preparing for This Chapter;203
5.3.2;Working with Arrays;204
5.3.2.1;Using Inferred Typing for Arrays;206
5.3.2.2;Avoiding Problems with Inferred Array Types;207
5.3.2.3;Avoiding Problems with Empty Arrays;208
5.3.2.3.1;Understanding the never Array Type Pitfall;208
5.3.3;Working with Tuples;209
5.3.3.1;Processing Tuples;210
5.3.3.2;Using Tuple Types;211
5.3.4;Using Enums;212
5.3.4.1;Understanding How Enums Work;213
5.3.4.1.1;Using Specific Enum Values;214
5.3.4.2;Using String Enums;216
5.3.4.3;Understanding the Limitations of Enums;217
5.3.4.3.1;Understanding the Value-Checking Limitation;217
5.3.4.3.2;Understanding the Type Guard Limitation;218
5.3.4.3.3;Using Constant Enums;218
5.3.5;Using Literal Value Types;220
5.3.5.1;Using Literal Value Types in Functions;221
5.3.5.2;Mixing Value Types in a Literal Value Type;222
5.3.5.3;Using Overrides with Literal Value Types;223
5.3.6;Using Type Aliases;224
5.3.7;Summary;225
5.4;Chapter 10: Working with Objects;226
5.4.1;Preparing for This Chapter;227
5.4.2;Working with Objects;228
5.4.2.1;Using Object Shape Type Annotations;229
5.4.2.2;Understanding How Shape Types Fit;230
5.4.2.2.1;Using Optional Properties for Irregular Shapes;231
5.4.2.2.2;Including Methods in Shape Types;231
5.4.2.2.2.1;Enforcing Strict Checking for Methods;233
5.4.2.3;Using Type Aliases for Shape Types;234
5.4.2.4;Dealing with Excess Properties;234
5.4.2.5;Using Shape Type Unions;236
5.4.2.6;Understanding Union Property Types;237
5.4.2.7;Using Type Guards for Objects;238
5.4.2.7.1;Type Guarding by Checking Properties;238
5.4.2.7.2;Type Guarding with a Type Predicate Function;241
5.4.3;Using Type Intersections;242
5.4.3.1;Using Intersections for Data Correlation;244
5.4.3.2;Understanding Intersection Merging;245
5.4.3.2.1;Merging Properties with the Same Type;247
5.4.3.2.2;Merging Properties with Different Types;247
5.4.3.2.3;Merging Methods;250
5.4.4;Summary;252
5.5;Chapter 11: Working with Classes and Interfaces;253
5.5.1;Preparing for This Chapter;254
5.5.2;Using Constructor Functions;255
5.5.3;Using Classes;257
5.5.3.1;Using the Access Control Keywords;259
5.5.3.2;Defining Read-Only Properties;262
5.5.3.3;Simplifying Class Constructors;263
5.5.3.4;Using Class Inheritance;264
5.5.3.4.1;Understanding Type Inference for Subclasses;265
5.5.3.5;Using an Abstract Class;267
5.5.3.5.1;Type Guarding an Abstract Class;269
5.5.4;Using Interfaces;270
5.5.4.1;Implementing Multiple Interfaces;272
5.5.4.2;Extending Interfaces;274
5.5.4.3;Defining Optional Interface Properties and Methods;276
5.5.4.4;Defining an Abstract Interface Implementation;278
5.5.4.5;Type Guarding an Interface;279
5.5.5;Dynamically Creating Properties;281
5.5.6;Summary;282
5.6;Chapter 12: Using Generic Types;283
5.6.1;Preparing for This Chapter;284
5.6.2;Understanding the Problem;285
5.6.2.1;Adding Support for Another Type;286
5.6.3;Creating Generic Classes;287
5.6.3.1;Understanding Generic Type Arguments;289
5.6.3.2;Using Different Type Arguments;289
5.6.3.3;Constraining Generic Type Values;290
5.6.3.3.1;Constraining Generic Types Using a Shape;292
5.6.3.4;Defining Multiple Type Parameters;294
5.6.3.4.1;Applying a Type Parameter to a Method;295
5.6.3.5;Allowing the Compiler to Infer Type Arguments;296
5.6.3.6;Extending Generic Classes;298
5.6.3.6.1;Adding Extra Features to the Existing Type Parameters;298
5.6.3.6.2;Fixing the Generic Type Parameter;299
5.6.3.6.3;Restricting the Generic Type Parameter;300
5.6.3.7;Type Guarding Generic Types;302
5.6.3.8;Defining a Static Method on a Generic Class;304
5.6.4;Defining Generic Interfaces;306
5.6.4.1;Extending Generic Interfaces;307
5.6.4.2;Implementing a Generic Interface;307
5.6.4.2.1;Passing on the Generic Type Parameter;307
5.6.4.2.2;Restricting or Fixing the Generic Type Parameter;309
5.6.4.2.3;Creating an Abstract Interface Implementation;309
5.6.5;Summary;311
5.7;Chapter 13: Advanced Generic Types;312
5.7.1;Preparing for This Chapter;313
5.7.2;Using Generic Collections;314
5.7.3;Using Generic Iterators;316
5.7.3.1;Combining an Iterable and an Iterator;318
5.7.3.2;Creating an Iterable Class;319
5.7.4;Using Index Types;320
5.7.4.1;Using the Index Type Query;320
5.7.4.2;Explicitly Providing Generic Type Parameters for Index Types;321
5.7.4.3;Using the Indexed Access Operator;322
5.7.4.4;Using an Index Type for the Collection Class;324
5.7.5;Using Type Mapping;326
5.7.5.1;Using a Generic Type Parameter with a Mapped Type;327
5.7.5.2;Changing Property Optionality and Mutability;328
5.7.5.3;Mapping Specific Properties;330
5.7.5.4;Combining Transformations in a Single Mapping;331
5.7.5.5;Creating Types with a Type Mapping;331
5.7.6;Using Conditional Types;332
5.7.6.1;Nesting Conditional Types;334
5.7.6.2;Using Conditional Types in Generic Classes;334
5.7.6.3;Using Conditional Types with Type Unions;336
5.7.6.3.1;Using the Built-in Distributive Conditional Types;337
5.7.6.4;Using Conditional Types in Type Mappings;337
5.7.6.5;Identifying Properties of a Specific Type;338
5.7.6.6;Inferring Additional Types in Conditions;340
5.7.6.6.1;Inferring Types of Functions;342
5.7.7;Summary;343
5.8;Chapter 14: Working with JavaScript;344
5.8.1;Preparing for This Chapter;345
5.8.1.1;Adding the TypeScript Code to the Example Project;346
5.8.2;Working with JavaScript;349
5.8.2.1;Including JavaScript in the Compilation Process;350
5.8.2.2;Type Checking JavaScript Code;351
5.8.3;Describing Types Used in JavaScript Code;353
5.8.3.1;Using Comments to Describe Types;354
5.8.3.2;Using Type Declaration Files;355
5.8.3.3;Describing Third-Party JavaScript Code;358
5.8.3.4;Using Definitely Typed Declaration Files;361
5.8.3.5;Using Packages That Include Type Declarations;363
5.8.4;Generating Declaration Files;365
5.8.5;Summary;368
6;Part III: Creating Web Applications;369
6.1;Chapter 15: Creating a Stand-Alone Web App, Part 1;370
6.1.1;Preparing for This Chapter;370
6.1.2;Creating the Toolchain;372
6.1.3;Adding a Bundler;372
6.1.4;Adding a Development Web Server;375
6.1.5;Creating the Data Model;378
6.1.5.1;Creating the Data Source;379
6.1.6;Rendering HTML Content Using the DOM API;382
6.1.6.1;Adding Support for Bootstrap CSS Styles;383
6.1.7;Using JSX to Create HTML Content;385
6.1.7.1;Understanding the JSX Workflow;386
6.1.7.2;Configuring the TypeScript Compiler and the Webpack Loader;388
6.1.7.3;Creating the Factory Function;389
6.1.7.4;Using the JSX Class;390
6.1.7.5;Importing the Factory Function in the JSX Class;391
6.1.8;Adding Features to the Application;392
6.1.8.1;Displaying a Filtered List of Products;392
6.1.8.2;Displaying Content and Handling Updates;396
6.1.9;Summary;398
6.2;Chapter 16: Creating a Stand-Alone Web App, Part 2;399
6.2.1;Preparing for This Chapter;399
6.2.2;Adding a Web Service;402
6.2.2.1;Incorporating the Data Source into the Application;403
6.2.3;Using Decorators;405
6.2.3.1;Using Decorator Metadata;407
6.2.4;Completing the Application;411
6.2.4.1;Adding a Header Class;411
6.2.4.2;Adding an Order Details Class;411
6.2.4.3;Adding a Confirmation Class;413
6.2.4.4;Completing the Application;413
6.2.5;Deploying the Application;417
6.2.5.1;Adding the Production HTTP Server Package;417
6.2.5.2;Creating the Persistent Data File;418
6.2.5.3;Creating the Server;418
6.2.5.4;Using Relative URLs for Data Requests;419
6.2.5.5;Building the Application;420
6.2.5.6;Testing the Production Build;421
6.2.6;Containerizing the Application;422
6.2.6.1;Installing Docker;422
6.2.6.2;Preparing the Application;422
6.2.6.3;Creating the Docker Container;422
6.2.6.4;Running the Application;423
6.2.7;Summary;425
6.3;Chapter 17: Creating an Angular App, Part 1;426
6.3.1;Preparing for This Chapter;427
6.3.1.1;Configuring the Web Service;427
6.3.1.2;Configuring the Bootstrap CSS Package;429
6.3.1.3;Starting the Example Application;430
6.3.2;Understanding TypeScript in Angular Development;431
6.3.2.1;Understanding the TypeScript Angular Toolchain;432
6.3.2.2;Understanding the Two Angular Compilers;433
6.3.3;Creating the Data Model;436
6.3.3.1;Creating the Data Source;437
6.3.3.2;Creating the Data Source Implementation Class;439
6.3.3.3;Configuring the Data Source;441
6.3.4;Displaying a Filtered List of Products;441
6.3.4.1;Displaying the Category Buttons;443
6.3.4.2;Creating the Header Display;445
6.3.4.3;Combining the Product, Category, and Header Components;445
6.3.5;Configuring the Application;447
6.3.6;Summary;449
6.4;Chapter 18: Creating an Angular App, Part 2;450
6.4.1;Preparing for This Chapter;451
6.4.2;Completing the Example Application Features;452
6.4.2.1;Adding the Summary Component;454
6.4.2.2;Creating the Routing Configuration;455
6.4.3;Deploying the Application;457
6.4.3.1;Adding the Production HTTP Server Package;457
6.4.3.2;Creating the Persistent Data File;458
6.4.3.3;Creating the Server;458
6.4.3.4;Using Relative URLs for Data Requests;459
6.4.3.5;Building the Application;460
6.4.3.6;Testing the Production Build;461
6.4.4;Containerizing the Application;462
6.4.4.1;Preparing the Application;462
6.4.4.2;Creating the Docker Container;463
6.4.4.3;Running the Application;464
6.4.5;Summary;465
6.5;Chapter 19: Creating a React App;466
6.5.1;Preparing for This Chapter;467
6.5.1.1;Configuring the Web Service;467
6.5.1.2;Installing the Bootstrap CSS Package;468
6.5.1.3;Starting the Example Application;469
6.5.2;Understanding TypeScript in React Development;470
6.5.3;Defining the Entity Types;473
6.5.4;Displaying a Filtered List of Products;474
6.5.4.1;Using a Functional Component and Hooks;476
6.5.4.2;Displaying a List of Categories and the Header;478
6.5.4.3;Composing and Testing the Components;479
6.5.5;Creating the Data Store;482
6.5.5.1;Creating the HTTP Request Class;485
6.5.5.2;Connecting the Data Store to the Components;486
6.5.6;Summary;489
6.6;Chapter 20: Creating a React App, Part 2;490
6.6.1;Preparing for This Chapter;491
6.6.2;Configuring URL Routing;492
6.6.3;Completing the Example Application Features;494
6.6.3.1;Adding the Order Summary Component;494
6.6.3.2;Adding the Confirmation Component;496
6.6.3.3;Completing the Routing Configuration;497
6.6.4;Deploying the Application;498
6.6.4.1;Adding the Production HTTP Server Package;498
6.6.4.2;Creating the Persistent Data File;499
6.6.4.3;Creating the Server;499
6.6.4.4;Using Relative URLs for Data Requests;500
6.6.4.5;Building the Application;501
6.6.4.6;Testing the Production Build;502
6.6.5;Containerizing the Application;503
6.6.5.1;Preparing the Application;503
6.6.5.2;Creating the Docker Container;503
6.6.5.3;Running the Application;504
6.6.6;Summary;506
6.7;Chapter 21: Creating a Vue.js App, Part 1;507
6.7.1;Preparing for This Chapter;508
6.7.1.1;Configuring the Web Service;509
6.7.1.2;Configuring the Bootstrap CSS Package;510
6.7.1.3;Starting the Example Application;510
6.7.2;Understanding TypeScript in Vue.js Development;512
6.7.2.1;Understanding the TypeScript Vue.js Toolchain;512
6.7.3;Creating the Entity Classes;514
6.7.4;Displaying a Filtered List of Products;515
6.7.4.1;Displaying a List of Categories and the Header;517
6.7.4.2;Composing and Testing the Components;519
6.7.5;Creating the Data Store;522
6.7.5.1;Creating Data Store Decorators;524
6.7.5.2;Connecting Components to the Data Store;525
6.7.6;Adding Support for the Web Service;527
6.7.7;Summary;531
6.8;Chapter 22: Creating a Vue.js App, Part 2;532
6.8.1;Preparing for This Chapter;533
6.8.2;Configuring URL Routing;534
6.8.3;Completing the Example Application Features;536
6.8.3.1;Adding the Order Summary Component;537
6.8.3.2;Adding the Confirmation Component;538
6.8.3.3;Completing the Routing Configuration;539
6.8.4;Deploying the Application;540
6.8.4.1;Adding the Production HTTP Server Package;540
6.8.4.2;Creating the Persistent Data File;541
6.8.4.3;Creating the Server;541
6.8.4.4;Using Relative URLs for Data Requests;542
6.8.4.5;Building the Application;543
6.8.4.6;Testing the Production Build;543
6.8.5;Containerizing the Application;544
6.8.5.1;Preparing the Application;544
6.8.5.2;Creating the Docker Container;545
6.8.5.3;Running the Application;546
6.8.6;Summary;547
7;Index;548