Building React Components Using Unions in TypeScript

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • proposal-pattern-matching

    Pattern matching syntax for ECMAScript

  • More importantly, TypeScript typically commits to build things into itself when the proposal in JavaScript reaches Stage 3. The pattern matching proposal in JavaScript is Stage 1, but depends on many other proposals as well that may or may not need to be at Stage 3 as well for it to work. This particular proposal is interested on pattern matching on JavaScript Objects and other primitives, just like Python does with it’s native primitives. These are also dynamic types which helps in some areas, but makes it harder than others. Additionally, the JavaScript type annotations proposal needs to possibly account for this. So it’s going to be awhile. Like many years.

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • The common theme in a lot of React examples utilizes 2 types of data to build React components around: primitives and Objects. In this article, we’re going to talk about a 3rd called Discriminated Unions. We’ll go over what problems they solve, what their future looks like in JavaScript and possibly TypeScript, and what libraries can help you now.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • proposal-type-annotations

    ECMAScript proposal for type syntax that is erased - Stage 1

  • More importantly, TypeScript typically commits to build things into itself when the proposal in JavaScript reaches Stage 3. The pattern matching proposal in JavaScript is Stage 1, but depends on many other proposals as well that may or may not need to be at Stage 3 as well for it to work. This particular proposal is interested on pattern matching on JavaScript Objects and other primitives, just like Python does with it’s native primitives. These are also dynamic types which helps in some areas, but makes it harder than others. Additionally, the JavaScript type annotations proposal needs to possibly account for this. So it’s going to be awhile. Like many years.

  • ts-pattern

    🎨 The exhaustive Pattern Matching library for TypeScript, with smart type inference.

  • ts-pattern

  • purescript

    A strongly-typed language that compiles to JavaScript

  • Naturally I’d recommend using a better language such as ReScript or Elm or PureScript or F#‘s Fable + Elmish, but “React” is the king right now and people perceive TypeScript as “less risky” for jobs/hiring, so here we are.

  • effect

    A fully-fledged functional effect system for TypeScript with a rich standard library

  • effect-ts

  • ts-adt

    Generate Algebraic Data Types and pattern matchers

  • ts-adt

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • variant

    Variant types in TypeScript (by paarthenon)

  • Variant

  • rescript-compiler

    The compiler for ReScript.

  • This is because a “Tagged Union”, another word for TypeScript’s Discriminated Union, is a way to “tag which one is in use right now… we check the tag to see”. Just like when you’re shopping and check the tag of a piece of clothing to see what the price is, what size it is, or what material it’s made out of. Languages like ReScript compile many of their Unions (called Variants) to JavaScript Objects that have a tag property.

  • pampy.js

    Pampy.js: Pattern Matching for JavaScript

  • React

    The library for web and native user interfaces.

  • The common theme in a lot of React examples utilizes 2 types of data to build React components around: primitives and Objects. In this article, we’re going to talk about a 3rd called Discriminated Unions. We’ll go over what problems they solve, what their future looks like in JavaScript and possibly TypeScript, and what libraries can help you now.

  • fsharp.org

    The F# Software Foundation website

  • Naturally I’d recommend using a better language such as ReScript or Elm or PureScript or F#‘s Fable + Elmish, but “React” is the king right now and people perceive TypeScript as “less risky” for jobs/hiring, so here we are.

  • Fable: F# |> BABEL

    F# to JavaScript, TypeScript, Python, Rust and Dart Compiler

  • Naturally I’d recommend using a better language such as ReScript or Elm or PureScript or F#‘s Fable + Elmish, but “React” is the king right now and people perceive TypeScript as “less risky” for jobs/hiring, so here we are.

  • Elm

    Compiler for Elm, a functional language for reliable webapps.

  • I get it. However, the whole point of using Unions to narrow your types, ensure only a set of possible scenarios can occur, and only access data of a particular union when it’s safe to do so. That’s some of what pattern matching can provide, and 100% of what using switch statements in TypeScript with their Discriminated Unions can provide. Yes, it’s not 100% exhaustive, but TypeScript is not soundly typed, and even Elm which is still has the same issue TypeScript does: You’re running in JavaScript where anything is possible. So it’s good enough to build with and much better than what you had.

  • elmish

    Elm-like abstractions for F# apps

  • Naturally I’d recommend using a better language such as ReScript or Elm or PureScript or F#‘s Fable + Elmish, but “React” is the king right now and people perceive TypeScript as “less risky” for jobs/hiring, so here we are.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts