If you're a JavaScript developer struggling to get to grips with TypeScript or use it effectively in your projects, this book will guide you in making the most of this powerful language and its latest features, and help you overcome some common misunderstandings and pitfalls.

Unleashing the Power of TypeScript

Preface

Many of the example React applications we see tend to be small and easily understandable. But in the real world, React apps tend to grow to a scale that makes it impossible for us to keep all of the context in our head. This can often lead to unexpected bugs when a given value isn’t what we thought it would be. That object you thought had a certain property on it? It turns out it ended up being undefined somewhere along the way. That function you passed in? Yeah, that’s undefined too. That string you’re trying to match against? It looks like you misspelled it one night when you were working after hours.

Simplifying Reducers in React with TypeScript

If you’ve come from a language with a type system, you might already be familiar with generics . But if you’re like me and your experience consists predominately of dynamic languages like JavaScript, Python, or Ruby, generics might seem a bit bewildering at first. I’m certainly guilty of just copying and pasting examples without fully understanding what’s going on. But fear not! Generics are both powerful and also fairly simple once we understand them. Let’s start at the basics and build up from there, as we work towards a full understanding what generics are and how we can use them in our TypeScript code.

A Gentle Introduction to Generics in TypeScript

Using TypeScript in any large React application provides a level of safety that’s worth the additional effort over using JavaScript. TypeScript is able to comb through all of our components and confirm that we’re passing in all the props each component requires, and it makes sure sure they’re actually the types we assume they are and not something nefarious like undefined . But there are some cases where even that trade-off is thrown into question—particularly when it comes to using the Context API. Let’s look at how to navigate some of the challenges of using createContext and useContext with TypeScript.

Navigating Around the Perils and Pitfalls of Using React’s Context API with TypeScript

In most of the larger applications and projects I’ve worked on, I often find myself building a bunch of components that are really supersets or abstractions on top of the standard HTML elements. Some examples include custom button elements that might take a prop defining whether or not that button should be a primary or secondary button, or maybe one that indicates that it will invoke a dangerous action, such as deleting or removing a item from the database. I still want my button to have all the properties of a button in addition to the props I want to add to it.

Extending DOM Elements and Creating Polymorphic Components

TypeScript, JavaScript’s more dependable cousin, keeps getting better and better. TypeScript 5.0 and its subsequent minor versions, 5.1 and 5.2, are brimming with powerful new features that promise to make our code cleaner, more powerful, and a lot easier to work with. As you can tell from the release notes , TypeScript 5.0 shipped with a ton of changes—both large and small.

Community Questions