A while ago, I was working on a project based off the Atomic SPA Starter Kit, which uses TypeScript, React, and GraphQL. One of the features we needed to build was a file upload component that supported dragging and dropping a file from a separate window onto the UI. Read more on Creating a Drag-and-Drop File Uploader with React & TypeScript…
I love Create React App, and I also love TypeScript. That means I really love
react-scripts-ts, which is a great way to spin up a new SPA for experimental purposes.
Read more on Migrating an Ejected Create React App to TypeScript…
Lately, my team has been looking for better ways to create and maintain mocks in our TypeScript project. In particular, we wanted an easy way to mock out modules that we built using Sinon.JS. Read more on Mocking TypeScript Modules with Sinon…
I recently ran into an issue with providing
style properties to custom React Native components written in TypeScript. When defining the type of the
style property, we were using the
TextStyle types provided by React Native.
There are times when you want to merge two generic types in TypeScript, and type inference just isn’t doing it for you.
Object.assign’s typing isn’t as precise as it could be, and spreading generics still doesn’t work. I’ve found a way to implement typing when merging objects using some of the new features in TypeScript 2.8.
One super common problem on TypeScript projects is figuring out how to validate data from external sources and tie that validated data to TypeScript types. In these situations, you generally have a few options:
- Define types and validations separately, and type them together with Type Guards.
- Use an internal DSL such as io-ts to build both a validator and the TypeScript type at the same time.
- Use an external DSL such as JSON Schema to define the validator, and derive the TypeScript type from there.
Recently, I’ve been experimenting with using functional programming in my side projects. Today, I want to share some of what I’ve learned, focusing on utilities I’ve created to facilitate purely functional TypeScript programming.
Recently, we’ve been making heavy use of TypeScript at Atomic Object. We love the great tooling and instant feedback we get with the language’s powerful type system. TypeScript’s structural type system gives us a lot of powerful tools for making invalid states unrepresentable, thereby pointing out bugs at compile time instead of runtime.
However, one challenge we’ve faced with TypeScript in applying this approach is how to differentiate between values that have the same shape, but mean very different things. For example, if both my
Person and my
BlogPost have a numeric
ID, I’d really like to communicate to TypeScript that they’re not interchangeable. But a function that takes a
number accepts both kinds of values.
This post will examine the challenges one might face using the usual approach to this modeling problem, and how we’ve side-stepped them with a variation on the usual technique.
Read more on Flavoring: Flexible Nominal Typing for TypeScript…