TypeScript

Creating a Drag-and-Drop File Uploader with React & TypeScript

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…

Styling Custom Components in React Native Using TypeScript

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 ViewStyle and TextStyle types provided by React Native.

Read more on Styling Custom Components in React Native Using TypeScript…

Type-Safe Object Merging (TypeScript 2.8 Edition)

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.

Read more on Type-Safe Object Merging (TypeScript 2.8 Edition)…

Statically Typed Data Validation with JSON Schema and TypeScript

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:

  1. Define types and validations separately, and type them together with Type Guards.
  2. Use an internal DSL such as io-ts to build both a validator and the TypeScript type at the same time.
  3. Use an external DSL such as JSON Schema to define the validator, and derive the TypeScript type from there.

Read more on Statically Typed Data Validation with JSON Schema and TypeScript…

Flavoring: Flexible Nominal Typing for TypeScript

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…