The TypeScript Workshop E-Book

Ben Grynhaus

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 751

Veröffentlichungsjahr: 2021

Beschreibung

By learning TypeScript, you can start writing cleaner, more readable code that’s easier to understand and less likely to contain bugs. What’s not to like?

It’s certainly an appealing prospect, but learning a new language can be challenging, and it’s not always easy to know where to begin. This book is the perfect place to start. It provides the ideal platform for JavaScript programmers to practice writing eloquent, productive TypeScript code.

Unlike many theory-heavy books, The TypeScript Workshop balances clear explanations with opportunities for hands-on practice. You’ll quickly be up and running building functional websites, without having to wade through pages and pages of history and dull, dry fluff. Guided exercises clearly demonstrate how key concepts are used in the real world, and each chapter is rounded off with an activity that challenges you to apply your new knowledge in the context of a realistic scenario.

Whether you’re a hobbyist eager to get cracking on your next project, or a professional developer looking to unlock your next promotion, pick up a copy and make a start! Whatever your motivation, by the end of this book, you’ll have the confidence and understanding to make it happen with TypeScript.

Leseprobe

The TypeScript Workshop

A practical guide to confident, effective TypeScript programming

Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, and Wekoslav Stefanovski

The TypeScript Workshop

Copyright © 2021 Packt Publishing

All rights reserved. No part of this course may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this course to ensure the accuracy of the information presented. However, the information contained in this course is sold without warranty, either express or implied. Neither the authors nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this course.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this course by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Authors: Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, and Wekoslav Stefanovski

Reviewers: Yusuf Salman and Cihan Yakar

Managing Editor: Mahesh Dhyani

Acquisitions Editors: Royluis Rodrigues and Sneha Shinde

Production Editor: Shantanu Zagade

Editorial Board: Megan Carlisle, Mahesh Dhyani, Heather Gopsill, Manasa Kumar, Alex Mazonowicz, Monesh Mirpuri, Bridget Neale, Abhishek Rane, Brendan Rodrigues, Ankita Thakur, Nitesh Thakur, and Jonathan Wray

First published: July 2021

Production reference: 1280721

ISBN: 978-1-83882-849-3

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK

Table of Contents

Preface

1. TypeScript Fundamentals

Introduction

The Evolution of TypeScript

Design Goals of TypeScript

Getting Started with TypeScript

The TypeScript Compiler

Setting Up a TypeScript Project

Exercise 1.01: Using tsconfig.json and Getting Started with TypeScript

Types and Their Uses

TypeScript and Functions

Exercise 1.02: Working with Functions in TypeScript

TypeScript and Objects

Exercise 1.03: Working with Objects

Basic Types

Exercise 1.04: Examining typeof

Strings

Numbers

Booleans

Arrays

Tuples

Schwartzian transform

Exercise 1.05: Using Arrays and Tuples to Create an Efficient Sort of Objects

Enums

Any and Unknown

Null and Undefined

Never

Function Types

Making Your Own Types

Exercise 1.06: Making a Calculator Function

Activity 1.01: Creating a Library for Working with Strings

Summary

2. Declaration Files

Introduction

Declaration Files

Exercise 2.01: Creating a Declaration File from Scratch

Exceptions

Third-Party Code Libraries

DefinitelyTyped

Analyzing an External Declaration File

Exercise 2.02: Creating Types with External Libraries

Development Workflow with DefinitelyTyped

Exercise 2.03: Creating a Baseball Lineup Card Application

Activity 2.01: Building a Heat Map Declaration File

Summary

3. Functions

Introduction

Functions in TypeScript

Exercise 3.01: Getting Started with Functions in TypeScript

The function Keyword

Function Parameters

Argument versus Parameter

Optional Parameters

Default Parameters

Multiple Arguments

Rest Parameters

Destructuring Return Types

The Function Constructor

Exercise 3.02: Comparing Number Arrays

Function Expressions

Arrow Functions

Type Inference

Exercise 3.03: Writing Arrow Functions

Understanding this

Exercise 3.04: Using this in an Object

Closures and Scope

Exercise 3.05: Creating the Order Factory with Closures

Currying

Exercise 3.06: Refactoring into Curried Functions

Functional Programming

Organizing Functions into Objects and Classes

Exercise 3.07: Refactoring JavaScript into TypeScript

Import, Export, and Require

Exercise 3.08: import and export

Activity 3.01: Building a Flight Booking System with Functions

Unit Testing with ts-jest

Activity 3.02: Writing Unit Tests

Error Handling

Summary

4. Classes and Objects

Introduction

What Are Classes and Objects?

Exercise 4.01: Building Your First Class

Extending Class Behavior with a Constructor

The this Keyword

Exercise 4.02: Defining and Accessing the Attributes of a Class

Exercise 4.03: Integrating Types into Classes

TypeScript Interfaces

Exercise 4.04: Building an Interface

Generating HTML Code in Methods

Exercise 4.05: Generating and Viewing HTML Code

Working with Multiple Classes and Objects

Exercise 4.06: Combining Classes

Activity 4.01: Creating a User Model Using Classes, Objects, and Interfaces

Summary

5. Interfaces and Inheritance

Introduction

Interfaces

Case Study – Writing Your First Interface

Exercise 5.01: Implementing Interfaces

Exercise 5.02: Implementing Interfaces – Creating a Prototype Blogging Application

Exercise 5.03: Creating Interfaces for a Function for Updating a User Database

Activity 5.01: Building a User Management Component Using Interfaces

TypeScript Inheritance

Exercise 5.04: Creating a Base Class and Two Extended Child Classes

Exercise 5.05: Creating Bases and Extended Classes Using Multi-level Inheritance

Activity 5.02: Creating a Prototype Web Application for a Vehicle Showroom Using Inheritance

Summary

6. Advanced Types

Introduction

Type Aliases

Exercise 6.01: Implementing a Type Alias

Type Literals

Exercise 6.02: Type Literals

Intersection Types

Exercise 6.03: Creating Intersection Types

Union Types

Exercise 6.04: Updating the Products Inventory using an API

Index Types

Exercise 6.05: Displaying Error Messages

Activity 6.01: Intersection Type

Activity 6.02: Union Type

Activity 6.03: Index Type

Summary

7. Decorators

Introduction

Reflection

Setting Up Compiler Options

Importance of Decorators

The Problem of Cross-Cutting Concerns

The Solution

Decorators and Decorator Factories

Decorator Syntax

Decorator Factories

Class Decorators

Property Injection

Exercise 7.01: Creating a Simple Class Decorator Factory

Constructor Extension

Exercise 7.02: Using a Constructor Extension Decorator

Constructor Wrapping

Exercise 7.03: Creating a Logging Decorator for a Class

Method and Accessor Decorators

Decorators on Instance Functions

Exercise 7.04: Creating a Decorator That Marks a Function Enumerable

Decorators on Static Functions

Method Wrapping Decorators

Exercise 7.05: Creating a Logging Decorator for a Method

Activity 7.01: Creating Decorators for Call Counting

Using Metadata in Decorators

Reflect Object

Exercise 7.06: Adding Metadata to Methods via Decorators

Property Decorators

Exercise 7.07: Creating and Using a Property Decorator

Parameter Decorators

Exercise 7.08: Creating and Using a Parameter Decorator

Application of Multiple Decorators on a Single Target

Activity 7.02: Using Decorators to Apply Cross-Cutting Concerns

Summary

8. Dependency Injection in TypeScript

Introduction

The DI Design Pattern

DI in Angular

Exercise 8.01: Adding HttpInterceptor to an Angular App

DI in Nest.js

InversifyJS

Exercise 8.02: "Hello World" Using InversifyJS

Activity 8.01: DI-Based Calculator

Summary

9. Generics and Conditional Types

Introduction

Generics

Generic Interfaces

Generic Types

Generic Classes

Exercise 9.01: Generic Set class

Generic Functions

Generic Constraints

Exercise 9.02: The Generic memoize Function

Generic Defaults

Conditional Types

Activity 9.01: Creating a DeepPartial<T> Type

Summary

10. Event Loop and Asynchronous Behavior

Introduction

The Multi-Threaded Approach

The Asynchronous Execution Approach

Executing JavaScript

Exercise 10.01: Stacking Functions

Browsers and JavaScript

Events in the Browser

Environment APIs

setTimeout

Exercise 10.02: Exploring setTimeout

AJAX (Asynchronous JavaScript and XML)

Activity 10.01: Movie Browser Using XHR and Callbacks

Promises

Exercise 10.03: Counting to Five

What are Promises?

Exercise 10.04: Counting to Five with Promises

Activity 10.02: Movie Browser Using fetch and Promises

async/await

Exercise 10.05: Counting to Five with async and await

Activity 10.03: Movie Browser Using fetch and async/await

Summary

11. Higher-Order Functions and Callbacks

Introduction

Introduction to HOCs – Examples

Higher-Order Functions

Exercise 11.01: Orchestrating Data Filtering and Manipulation Using Higher-Order Functions

Callbacks

The Event Loop

Callbacks in Node.js

Callback Hell

Avoiding Callback Hell

Splitting the Callback Handlers into Function Declarations at the File Level

Chaining Callbacks

Promises

async/await

Activity 11.01: Higher-Order Pipe Function

Summary

12. Guide to Promises in TypeScript

Introduction

The Evolution of and Motivation for Promises

Anatomy of a Promise

The Promise Callback

then and catch

Pending State

Fulfilled State

Rejected State

Chaining

Exercise 12.01: Chaining Promises

finally

Promise.all

Exercise 12.02: Recursive Promise.all

Promise.allSettled

Exercise 12.03: Promise.allSettled

Promise.any

Promise.race

Enhancing Promises with Types

Exercise 12.04: Asynchronous Rendering

Libraries and Native Promises — Third-Party Libraries, Q, and Bluebird

Polyfilling Promises

Promisify

Node.js util.promisify

Asynchronous FileSystem

fs.readFile

fs.readFileSync

The fs Promises API

Exercise 12.05: The fs Promises API

Working with Databases

Developing with REST

Exercise 12.06: Implementing a RESTful API backed by sqlite

Putting It All Together – Building a Promise App

Activity 12.01: Building a Promise App

Summary

13. Async/Await in TypeScript

Introduction

Evolution and Motivation

async/await in TypeScript

Exercise 13.01: Transpilation Targets

Choosing a Target

Syntax

async

Exercise 13.02: The async Keyword

Exercise 13.03: Resolving an async Function with then

await

Exercise 13.04: The await Keyword

Exercise 13.05: Awaiting a Promise

Syntactic Sugar

Exception Handling

Exercise 13.06: Exception Handling

Top-Level await

Promise Methods

Exercise 13.07: async/await in Express.js

Exercise 13.08: NestJS

Exercise 13.09: TypeORM

Activity 13.01: Refactoring Chained Promises to Use await

Summary

14. TypeScript and React

Introduction

Typing React

TypeScript in React

Hello, React

The Component

Stateful Components

Stateless Components

Pure Components

Higher-Order Components

JSX and TSX

Exercise 14.01: Bootstrapping with Create React App

Routing

Exercise 14.02: React Router

React Components

Class Components

Function Components (Function Declaration)

Function Components (Function Expression with Arrow Functions)

No JSX

State in Function Components

State Management in React

Exercise 14.03: React Context

Firebase

Exercise 14.04: Getting Started with Firebase

Styling React Applications

Master Stylesheet

Component-Scoped Styles

CSS-in-JS

Component Libraries

Activity 14.01: The Blog

Summary

Appendix

Preface

1. TypeScript Fundamentals