Book Image

The TypeScript Workshop

By : Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, Vekoslav Stefanovski
5 (1)
Book Image

The TypeScript Workshop

5 (1)
By: Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, Vekoslav Stefanovski

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
The TypeScript Workshop
Ben Grynhaus | Jordan Hudgens | Rayon Hunte | Matt Morgan | Vekoslav Stefanovski
Jul, 2021 | 714 pages
Small book image
Learning TypeScript 2.x
Remo H Jansen
Apr, 2018 | 536 pages
Small book image
Mastering TypeScript
Nathan Rozentals
Apr, 2021 | 538 pages
Small book image
Learn TypeScript 3 by Building Web Applications
Alexis Georges | Sebastien Dubois
Nov, 2019 | 804 pages
Table of Contents (16 chapters)
Preface
About the Book
1
1. TypeScript Fundamentals
1. TypeScript Fundamentals
Introduction
Getting Started with TypeScript
TypeScript and Functions
TypeScript and Objects
Basic Types
Making Your Own Types
Summary
Free Chapter
2
2. Declaration Files
2. Declaration Files
Introduction
Declaration Files
Third-Party Code Libraries
Summary
3
3. Functions
3. Functions
Introduction
Functions in TypeScript
Function Expressions
Arrow Functions
Type Inference
Functional Programming
Organizing Functions into Objects and Classes
Import, Export, and Require
Unit Testing with ts-jest
Error Handling
Summary
4
4. Classes and Objects
4. Classes and Objects
Introduction
What Are Classes and Objects?
TypeScript Interfaces
Generating HTML Code in Methods
Summary
5
5. Interfaces and Inheritance
5. Interfaces and Inheritance
Introduction
Interfaces
TypeScript Inheritance
Summary
6
6. Advanced Types
6. Advanced Types
Introduction
Type Aliases
Type Literals
Intersection Types
Union Types
Index Types
Summary
7
7. Decorators
7. Decorators
Introduction
Reflection
Importance of Decorators
Decorators and Decorator Factories
Class Decorators
Method and Accessor Decorators
Activity 7.01: Creating Decorators for Call Counting
Using Metadata in Decorators
Property Decorators
Parameter Decorators
Application of Multiple Decorators on a Single Target
Summary
8
8. Dependency Injection in TypeScript
8. Dependency Injection in TypeScript
Introduction
The DI Design Pattern
InversifyJS
Summary
9
9. Generics and Conditional Types
9. Generics and Conditional Types
Introduction
Generics
Exercise 9.01: Generic Set class
Conditional Types
Summary
10
10. Event Loop and Asynchronous Behavior
10. Event Loop and Asynchronous Behavior
Introduction
The Multi-Threaded Approach
Executing JavaScript
Browsers and JavaScript
Environment APIs
Promises
Summary
11
11. Higher-Order Functions and Callbacks
11. Higher-Order Functions and Callbacks
Introduction
Higher-Order Functions
Callbacks
The Event Loop
Summary
12
12. Guide to Promises in TypeScript
12. Guide to Promises in TypeScript
Introduction
The Evolution of and Motivation for Promises
Anatomy of a Promise
Enhancing Promises with Types
Libraries and Native Promises — Third-Party Libraries, Q, and Bluebird
Promisify
Asynchronous FileSystem
Working with Databases
Developing with REST
Putting It All Together – Building a Promise App
Summary
13
13. Async/Await in TypeScript
13. Async/Await in TypeScript
Introduction
Evolution and Motivation
async/await in TypeScript
Syntax
Exception Handling
Top-Level await
Promise Methods
Summary
14
14. TypeScript and React
14. TypeScript and React
Introduction
Typing React
Hello, React
The Component
JSX and TSX
Routing
React Components
State Management in React
Firebase
Styling React Applications
Summary
Appendix
1. TypeScript Fundamentals
2. Declaration Files
3. Functions
4. Classes and Objects
5. Interfaces and Inheritance
6. Advanced Types
7. Decorator
8. Dependency Injection in TypeScript
9. Generics and Conditional Types
10. Event Loop and Asynchronous Behavior
11. Higher-Order Functions and Callbacks
12. Guide to Promises in TypeScript
13. Async/Await in TypeScript
14. TypeScript and React

13. Async/Await in TypeScript

Activity 13.01: Refactoring Chained Promises to Use await

Solution:

Let's go over what needed to change in order to make this work:

  1. First of all, the await keyword can only be used inside an async function, so we must add that keyword to the function declaration:
    const renderAll = async () => {
  2. Now we have to replace then with await. Let's look again at what the render function does. In our simple case, it just returns a promise that resolves to a string, but in the real world, it would render something in a web browser and then resolve to a string. Since we want to log out that string, we can actually resolve the promise inside a console.log statement. Even though console.log is a synchronous operation, putting await inside it will cause the function to print out the resolved promise value, exactly as we would hope.

    The refactored program is six lines shorter and eliminates nesting:

    export class El {
  constructor...
Previous Section
End of Section
Next Section