DEV Community: Stefano Regosa

Pipeable Pattern Matching in Typescript

Stefano Regosa — Sun, 27 Dec 2020 23:47:00 +0000

In the latest post, we talked about pattern matching
Match API.

In this article we gonna look into the matchW API, a wider match implementation where the match happens within a pipe function.

A pipe is a function of functions that pipes the value of an expression into a pipeline of functions.
This function takes an initial value and passes that as the argument(s) for the first internal function to use, then it takes the result from that function and passes it to another internal function.

A pipe typescript implementation can be found inside the fp-ts library so we need to install that library first.

yarn

yarn add fp-ts

npm

npm install --save fp-ts

MatchW

With this api we don't need to specify via generic the matches or return type since both signatures are inferred within the pipe function.
The only thing we have to specify in order to implement our pattern matching function is the discriminated union.

Let's implement our matchW pattern-matching against the fp-ts Option.

If we look at the fp-ts Option implementation

export interface None {
  readonly _tag: 'None'
}

export interface Some<A> {
  readonly _tag: 'Some'
  readonly value: A
}

export type Option<A> = None | Some<A>

we see that the convention used was _tag, so we have to specify that inside our implementation as well.

M.matchW('_tag')

Once we did that, the LSP auto-complete will do the rest by providing suggestions via Intellisense:

for each case

and each implementation

Option MatchW

import * as M from 'pattern-matching-ts/lib/match'
import { pipe } from 'fp-ts/lib/function'
import * as O from 'fp-ts/lib/Option'

const optionMatching = (o: O.Option<string>) =>
  pipe(
    o,
    M.matchW('_tag')({
      Some: ({ value }) => 'Something: ' + value,
      None: () => 'Nothing',
    })
  )

assert.deepStrictEqual(optionMatching(O.some('data')), 'Something: data')
assert.deepStrictEqual(optionMatching(O.none), 'Nothing')

Following the previous example, we can implement the pattern-matching against the Either.

Either MatchW

import * as M from 'pattern-matching-ts/lib/match'
import { pipe } from 'fp-ts/lib/function'
import * as E from 'fp-ts/lib/Either'

type RGB = Record<'r' | 'g' | 'b', number>
const either = (maybeRgb: E.Either<string, RGB>) =>
  pipe(
    maybeRgb,
    M.matchW('_tag')({
      Left: ({ left }) => 'Error: ' + left,
      Right: ({ right: { r, g, b } }) => `Red: ${r} | Green: ${g} | Blue: ${b}`
    })
  )

assert.deepStrictEqual(either(E.right({ r: 255, g: 255, b: 0 })), 'Red: 255 | Green: 255 | Blue: 0')

Since the matchW discriminated union can extend also number let's see how we can implement a pattern-matching against HTTP codes

import * as M from 'pattern-matching-ts/lib/match'
import { pipe } from 'fp-ts/lib/function'

interface ServerResponse<Code extends string | number> {
  readonly code: Code
}

interface Response<Body> {
  readonly response: {
    readonly body: Body
  }
}

interface Success extends ServerResponse<200>, Response<ReadonlyArray<string>> {}

interface NotFoundError extends ServerResponse<404> {}

interface ServerError extends ServerResponse<500> {
  readonly detail: string
}

type Responses = Success | NotFoundError | ServerError

const matchResponse = (response: Responses) =>
  pipe(
    response,
    M.matchW('code')({
      500: ({ detail }) => ({ message: 'Internal server error', detail }),
      404: () => ({ message: 'The page cannot be found!' }),
      200: ({ response }) => response.body,
      _: () => 'Unexpected response'
    })
  )

assert.deepStrictEqual(either(E.right({ r: 255, g: 255, b: 0 })), 'Red: 255 | Green: 255 | Blue: 0')
assert.deepStrictEqual(matchResponse({ code: 200, response: { body: ['data'] } }), ['data'])
assert.deepStrictEqual(matchResponse({ code: 500, detail: 'Cannot connect to the database' }), {
  message: 'Internal server error',
  detail: 'Cannot connect to the database'
})
assert.deepStrictEqual(matchResponse({ code: 404 }), { message: 'The page cannot be found!' })

pattern-matching-ts source-code

pattern-matching-ts NPM

Pattern Matching in Typescript

Stefano Regosa — Tue, 17 Nov 2020 00:30:16 +0000

What is Pattern Matching?

Pattern Matching is a declarative much more powerful and less verbose alternative to imperatives "if/else" conditions.

A definition can be found inside Scala Documentation

“Pattern matching tests whether a given value (or sequence of values) has the shape defined by a pattern, and, if it does, binds the variables in the pattern to the corresponding components of the value (or sequence of values).”

In Functional Programming languages, there're built-in keywords for Pattern Matching. Typescript though is one language that works very well with Functional Programming but lacks this feature, for this reason I made a package pattern-matching-ts that aims to bring Pattern Matching feature to Typescript through Discriminated Union Types / Algebraic Data Types.

Pattern Matching with Option

What's an Option Monad?

"In programming languages (more so functional programming languages) and type theory, an option type or maybe type is a polymorphic type that represents an encapsulation of an optional value; e.g., it is used as the return type of functions which may or may not return a meaningful value when they are applied. It consists of a constructor which either is empty (often named None or Nothing), or which encapsulates the original data type A (often written Just A or Some A)."

Let's implement our Option Type signature

interface None {
  readonly _tag: 'None'
}

interface Some<A> {
  readonly _tag: 'Some'
  readonly value: A
}

type Option<A> = None | Some<A>

Now that we have defined the Option type signature we can use it as a discriminated union for our pattern matching.

The pattern-matching package

yarn

yarn add pattern-matching-ts

npm

npm install --save pattern-matching-ts

Now we are ready to implement our option pattern matching.

 * as M from 'pattern-matching-ts/lib/match' 


const optionMatching = M.match<Option<string>, string>({
  Some: (x) => `Some: ${x.value}`,
  None: () => 'Nothing'
})

assert.deepStrictEqual(
  optionMatching(O.some('data')),
   'Some: data'
)

Let's say we have to handle more cases than a simple value that may or not be there...

we can achieve that easily by defining a discriminated union

interface ChangeColor<T = number> {
  readonly _tag: 'ChangeColor'
  readonly value: {
    readonly r: T
    readonly g: T
    readonly b: T
  }
}
interface Move<T = number> {
  readonly _tag: 'Move'
  readonly value: {
    readonly x: T
    readonly y: T 
  }
}

interface Write {
  readonly _tag: 'Write'
  readonly value: {
    readonly text: string
  }
}

type Cases = ChangeColor<number> | Move | Write

Now we are ready to build our Pattern Matching by implementing all the cases
plus the required default that uses _:=> as a reserved keyword.

import * as M from 'pattern-matching-ts'

const matchMessage = M.match<Cases, string>({
    ChangeColor: ({ value: { r, g, b } }) => `Red: ${r} | Green: ${g} | Blue: ${b}`,
    Move: ({ value: { x, y } }) => `Move in the x direction: ${x} and in the y direction: ${y}`,
    Write: ({ value: { text } }) => `Text message: ${text}`,
    _: () => 'Default message' 
})

const ChangeColor = ({ r, g, b }: ChangeColor<number>['value']) => ({
   _tag: 'ChangeColor', value: { r, g, b }
}) 

assert.deepStrictEqual(
  matchMessage(ChangeColor({ r: 12, g: 20, b: 30 })),
  'Red: 12 | Green: 20 | Blue: 30'
)

assert.deepStrictEqual(matchMessage(null), 'Default message')

pattern-matching-ts source-code

pattern-matching-ts NPM