Never miss a beat

Join my newsletter.

Tag: typescript

TypeScript Tuples

Published: 4/9/2020

TypeScript offers a plethora of types for developers to leverage, but some of the types may be ones that you’re unfamiliar with. Take the tuple, for example. JavaScript doesn’t have a concept of tuples , so figuring out how and when to use one might feel tricky. Thankfully, Tuples are pretty simple and are used by popular frameworks, like React. What is a tuple? Tuples allow you to express an array with a fixed number of elements of which each element may be of a different type. For example…

Managing Authentication with React's useContext Hook

Published: 2/11/2020

Contexts are a commonly used tool when building React libraries, but are often overlooked when building an application in React. I don’t believe that should be the case, as useContext can provide you a powerful alternative (but lightweight) alternative to tools like Redux when managed carefully. The classic example of using a context is to declare an app theme but we can use them for so much more than that. In fact, we’re going to leverage a context today to demonstrate how simple…

How do I use TypeScript with React?

Published: 1/11/2020

React is allowing developers to iterate faster and build safer, more reliable frontend applications than we were building many years ago. TypeScript , a relatively new addition to the “JavaScript Alternatives” scene, also aims to add a new level of safety in the form of type safety. Naturally, it makes sense for us to want to use TypeScript to write React components. But how do you do that? There are two different ways. Using the –typescript flag with create-react-app If you’re starting a new…

Typescript: What is a Partial?

Published: 1/10/2020

A common theme in TypeScript is to define an interface for a data structure. Additionally, it’s fairly common to post data structures to an HTTP endpoint to create resources. You may even find yourself posting another structure with some of the same properties to update that data structure. Instead of creating another interface for the update, in this example, is where the use of Typescript’s Partial comes in to play. Imagine that we have the following interface. It’s safe to assume that there…

Fetching Data with React Hooks

Published: 1/9/2020

React hooks have changed the way that I (and arguably the React Community) prefer to build components . I’ve been working on a GraphQL project for a while, and when we migrated to functional components and hooks, I was able to use Apollo’s hooks for my data fetching needs. However, I find myself now working on a new project that doesn’t use GraphQL. Consequentially, I find myself wondering “How do I fetch data with React Hooks?” If you’d just like to see a codepen example of the code, you can…

Auth Guarding React Router Routes

Published: 10/27/2019

A common theme in web applications is to serve specific content to authenticated users while serving other content to everyone else. I’ve heard this referred to in the past as “auth guarding” specific content. In this case of our example today, we want to auth guard react-router routes. There are a couple of different ways to do this, but I’ve found a pattern that I really like that uses higher-order function components to help create the functionality that would be expected of an auth guarded…