@gregchlosta/option-ts

Simple implementation of Option type with Pattern Matching for TypesScript

The Option<T> and Its Advantages Over Null Values

The problem with null values is that if you try to use a null value as a not-null value, you’ll get an error of some kind. Because this null or not-null property is pervasive, it’s extremely easy to make this kind of error.

However, the concept that null is trying to express is still a useful one: a null is a value that is currently invalid or absent for some reason.

The problem isn’t really with the concept but with the particular implementation. Type Option<T> with Pattern Matching functionality provided by this library can help you with this.

How to Install:

1npm install @gregchlosta/option-ts
2

How to Use

Option<T> is a discriminated union of Some<T> and None. When we have a Some value, we know that a value is present and the value is held within the Some. When we have a None value, in some sense, it means the same thing as null. We don’t have a valid value.

Initialize the Option<T> value

1import { Option, newOption } from '@gregchlosta/option-ts'
2
3// Type will automatically get inferred when value is provided as parameter.
4const some = newOption('Some Value') // -> Option<string> -> (Some<string>)
5
6// When creating a None Option, manual typing possible value type is required since automatic type inferrance is not possible
7const none: Option<string> = newOption() // -> Option<string> -> (None)

Patern matching with match()

Match function will take Option<T>, and matcher object as parameters. Functions declared in the matcher object always have to return the same value type.

Example below come from React, but option-ts can be used with any other front-end framework or regular TypeScript.

1import React from 'react'
2import { Option, match } from '@gregchlosta/option-ts'
3
4export type ButtonProps = {
5  title: Option<string>
6}
7
8export const Button: React.FC<ButtonProps> = ({ title }) => {
9  return match(title, {
10    Some: (v) => <button>{v}</button>,
11    None: () => <button>Default</button>,
12  })
13}

Unpacking Option<T> with withDefault()

To get direct access to the value we can simple unpack option using withDefault() which takes two parameters: option, and default value.

1import { Option, newOption, withDefault } from '@gregchlosta/option-ts'
2
3const someOption = newOption('Some!')
4const noneOption: Option<string> = newOption()
5
6const valueSome = withDefault(someOption, 'default') // 'Some!'
7const valueDefault = withDefault(noneOption, 'default') // 'default'

Type Guards

1import { newOption, isSome, isNone } from '@gregchlosta/option-ts'
2
3const someOption = newOption('Some!')
4const noneOption: Option<string> = newOption()
5
6isSome(someOption) // true
7isNone(noneOption) // false

License

The MIT License