book

TypeScript Cookbook

Name: TypeScript Cookbook
Author: Stefan Baumgartner
ISBN: 9781098136659

by Stefan Baumgartner

August 2023

Intermediate to advanced

419 pages

9h 2m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Includes

Sandbox

Foreword
Preface
Who This Book Is ForWhat’s in This Book?Organization of This BookConventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
1. Project Setup
1.1. Type-Checking JavaScript1.2. Installing TypeScript1.3. Keeping Types on the Side1.4. Migrating a Project to TypeScript1.5. Loading Types from Definitely Typed1.6. Setting Up a Full-Stack Project1.7. Setting Up Tests1.8. Typing ECMAScript Modules from URLs1.9. Loading Different Module Types in Node1.10. Working with Deno and Dependencies1.11. Using Predefined Configurations
2. Basic Types
2.1. Annotating Effectively2.2. Working with any and unknown2.3. Choosing the Right Object Type2.4. Working with Tuple Types2.5. Understanding Interfaces Versus Type Aliases2.6. Defining Function Overloads2.7. Defining this Parameter Types2.8. Working with Symbols2.9. Understanding Value and Type Namespaces
3. The Type System
3.1. Modeling Data with Union and Intersection Types3.2. Explicitly Defining Models with Discriminated Union Types3.3. Exhaustiveness Checking with the Assert never Technique3.4. Pinning Types with Const Context3.5. Narrowing Types with Type Predicates3.6. Understanding void3.7. Dealing with Error Types in catch Clauses3.8. Creating Exclusive Or Models with Optional never3.9. Effectively Using Type Assertions3.10. Using Index Signatures3.11. Distinguishing Missing Properties and Undefined Values3.12. Working with Enums3.13. Defining Nominal Types in a Structural Type System3.14. Enabling Loose Autocomplete for String Subsets
4. Generics
4.1. Generalizing Function Signatures4.2. Creating Related Function Arguments4.3. Getting Rid of any and unknown4.4. Understanding Generic Instantiation4.5. Generating New Object Types4.6. Modifying Objects with Assertion Signatures4.7. Mapping Types with Type Maps4.8. Using ThisType to Define this in Objects4.9. Adding Const Context to Generic Type Parameters
5. Conditional Types
5.1. Managing Complex Function Signatures5.2. Filtering with never5.3. Grouping Elements by Kind5.4. Removing Specific Object Properties5.5. Inferring Types in Conditionals
6. String Template Literal Types
6.1. Defining a Custom Event System6.2. Creating Event Callbacks with String Manipulation Types and Key Remapping6.3. Writing a Formatter Function6.4. Extracting Format Parameter Types6.5. Dealing with Recursion Limits6.6. Using Template Literals as Discriminants
7. Variadic Tuple Types
7.1. Typing a concat Function7.2. Typing a promisify Function7.3. Typing a curry Function7.4. Typing a Flexible curry Function7.5. Typing the Simplest curry function7.6. Creating an Enum from a Tuple7.7. Splitting All Elements of a Function Signature
8. Helper Types
8.1. Setting Specific Properties Optional8.2. Modifying Nested Objects8.3. Remapping Types8.4. Getting All Required Keys8.5. Allowing at Least One Property8.6. Allowing Exactly One and All or None8.7. Converting Union to Intersection Types8.8. Using type-fest

9. The Standard Library and External Type Definitions
9.1. Iterating over Objects with Object.keys9.2. Explicitly Highlighting Unsafe Operations with Type Assertions and unknown9.3. Working with defineProperty9.4. Expanding Types for Array.prototype.includes9.5. Filtering Nullish Values9.6. Extending Modules9.7. Augmenting Globals9.8. Adding Non-JS Modules to the Module Graph
10. TypeScript and React
10.1. Writing Proxy Components10.2. Writing Controlled Components10.3. Typing Custom Hooks10.4. Typing Generic forwardRef Components10.5. Providing Types for the Context API10.6. Typing Higher-Order Components10.7. Typing Callbacks in React’s Synthetic Event System10.8. Typing Polymorphic Components
11. Classes
11.1. Choosing the Right Visibility Modifier11.2. Explicitly Defining Method Overrides11.3. Describing Constructors and Prototypes11.4. Using Generics in Classes11.5. Deciding When to Use Classes or Namespaces11.6. Writing Static Classes11.7. Working with Strict Property Initialization11.8. Working with this Types in Classes11.9. Writing Decorators
12. Type Development Strategies
12.1. Writing Low Maintenance Types12.2. Refining Types Step by Step12.3. Checking Contracts with satisfies12.4. Testing Complex Types12.5. Validating Data Types at Runtime with Zod12.6. Working Around Index Access Restrictions12.7. Deciding Whether to Use Function Overloads or Conditional Types12.8. Naming Generics12.9. Prototyping on the TypeScript Playground12.10. Providing Multiple Library Versions12.11. Knowing When to Stop
Index
About the Author

Content preview from TypeScript Cookbook

Chapter 10. TypeScript and React

React is arguably one of the most popular JavaScript libraries in recent years. Its simple approach to the composition of components has changed the way we write frontend (and, to an extent, backend) applications, allowing you to declaratively write UI code using a JavaScript syntax extension called JSX. Not only was this simple principle easy to pick up and understand, but it also influenced dozens of other libraries.

JSX is undoubtedly a game changer in the JavaScript world, and with TypeScript’s goal to cater to all JavaScript developers, JSX found its way into TypeScript. In fact, TypeScript is a full-fledged JSX compiler. If you have no need for additional bundling or extra tooling, TypeScript is all you need to get your React app going. TypeScript is also immensely popular. At the time of writing, the React typings on NPM clocked 20 million downloads per week. The fantastic tooling with VS Code and the excellent types made TypeScript the first choice for React developers around the globe.

While TypeScript’s popularity among React developers continues unabated, one circumstance makes the use of TypeScript with React a bit difficult: TypeScript isn’t the React team’s first choice. While other JSX-based libraries are now mostly written in TypeScript and therefore provide excellent types out of the box, the React team works with their own static type-checker called Flow, which is similar to, but ultimately incompatible with, TypeScript. This ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781098136642Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

TypeScript Cookbook

by Stefan Baumgartner

Chapter 10. TypeScript and React

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.