fp-ts: Take an array containing Option<string> elements and transform it into an array of strings, containing only the values of the elements that are defined

Question

fp-ts: Take an array containing Option<string> elements and transform it into an array of strings, containing only the values of the elements that are defined

Currently, I am in the process of validating a command that is applied to an array representing SVG path data using fp-ts.

type CommandValidation = (commands: CommandArray, nextCommand: Command) => option.Option<string>;

const newCommandValidations: Array<CommandValidation> = [
  validateFirstCommandIsMove,
  validateSymmetricCommandFollowsBezier,
  validateNoMoveAfterMove,
];

export const safelyPushCommand = (command: Command) => either.map((commands: CommandArray) => {
  // The errors are not overlapping yet, but there might be co-existing errors in the future
  const validationErrors = fpFunction.pipe(newCommandValidations,
    fpArray.map((validation) => validation(commands, command)),
    fpArray.filter(option.isSome),
    fpArray.map(option.fold(() => undefined, (some) => some)));

  if (validationErrors.length > 0) {
    return either.left(validationErrors);
  }
  return either.right(pushCommands([command])(commands));
});

Unfortunately, the validationErrors variable is still considered as a list of items with possible "none" values.

How can I obtain an array of strings (specifically typed) that represent any validation errors for this operation?

Should I use an "apply" function to pass parameters into the validation functions?

How can I get an apply function for the validators?

Is there a better way to perform the fold operation when the second function is simply the identity function? EDIT: I had this question addressed in this video https://youtu.be/1LCqHnaJJtY?t=2470 :

option.fold(() => undefined, (some) => some) === option.getOrElse(() => undefined) === option.toUndefined

Many questions from someone navigating through the realm of fp-ts, hoping for some insights to make my project more efficient. The sample code can be found in a branch I created here: https://github.com/justin-hackin/fp-ts-svg-path-d/tree/validators

typescript fp-ts

Answer 1

Answer №1

After reviewing the code you provided, here are some enhancements that I have implemented. I am open to making further adjustments once I receive clarification on certain details.

import * as either from 'fp-ts/lib/Either'
import * as fpFunction from 'fp-ts/lib/function'
import * as option from 'fp-ts/lib/Option'
import * as fpArray from 'fp-ts/lib/Array'

// To ensure code compilation, kept types basic
type CommandArray = unknown[];
type Command = unknown;

type CommandValidation = (commands: CommandArray, nextCommand: Command) => option.Option<string>;

declare const validateFirstCommandIsMove: CommandValidation
declare const validateSymmetricCommandFollowsBezier: CommandValidation
declare const validateNoMoveAfterMove: CommandValidation

const newCommandValidations: Array<CommandValidation> = [
  validateFirstCommandIsMove,
  validateSymmetricCommandFollowsBezier,
  validateNoMoveAfterMove,
];

export const safelyPushCommand = (command: Command) => (commands: CommandArray) => {
  return fpFunction.pipe(
    newCommandValidations,
    fpArray.map((validation) => validation(commands, command)),
    option.sequenceArray,
    option.fold(
      () => either.right(pushCommands([command])(commands)),
      (validationErrors) => either.left(validationErrors)
    )
  );
};

The code above reflects my attempt to make your code work more efficiently. However, it lacks idiomatic clarity.

It is advisable to follow the convention where None signifies failure or absence of value in an Option. Your current use of None for passing validations and Some for failing validations feels counterintuitive.

I recommend using an Either instead, with the Left side reserved for holding validation errors.

A useful technique discussed in this reference -> https://dev.to/gcanti/getting-started-with-fp-ts-either-vs-validation-5eja

Below is a sample solution utilizing either.getApplicativeValidation for running all 3 validation functions and collecting errors in a NonEmptyArray<string>.

import { sequenceT } from 'fp-ts/lib/Apply'
import { getSemigroup, NonEmptyArray } from 'fp-ts/lib/NonEmptyArray'

declare const validateFirstCommandIsMove1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;
declare const validateSymmetricCommandFollowsBezier1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;
declare const validateNoMoveAfterMove1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;

const runValidations = sequenceT(either.getApplicativeValidation(getSemigroup<string>()))

const validateCommand = (command: Command): either.Either<NonEmptyArray<string>, string> => {
  return fpFunction.pipe(
    command,
    runValidations(
      validateFirstCommandIsMove1,
      validateSymmetricCommandFollowsBezier1,
      validateNoMoveAfterMove1
    ),
  )
}

Answer 2

After reviewing the code you provided, here are some enhancements that I have implemented. I am open to making further adjustments once I receive clarification on certain details.

import * as either from 'fp-ts/lib/Either'
import * as fpFunction from 'fp-ts/lib/function'
import * as option from 'fp-ts/lib/Option'
import * as fpArray from 'fp-ts/lib/Array'

// To ensure code compilation, kept types basic
type CommandArray = unknown[];
type Command = unknown;

type CommandValidation = (commands: CommandArray, nextCommand: Command) => option.Option<string>;

declare const validateFirstCommandIsMove: CommandValidation
declare const validateSymmetricCommandFollowsBezier: CommandValidation
declare const validateNoMoveAfterMove: CommandValidation

const newCommandValidations: Array<CommandValidation> = [
  validateFirstCommandIsMove,
  validateSymmetricCommandFollowsBezier,
  validateNoMoveAfterMove,
];

export const safelyPushCommand = (command: Command) => (commands: CommandArray) => {
  return fpFunction.pipe(
    newCommandValidations,
    fpArray.map((validation) => validation(commands, command)),
    option.sequenceArray,
    option.fold(
      () => either.right(pushCommands([command])(commands)),
      (validationErrors) => either.left(validationErrors)
    )
  );
};

The code above reflects my attempt to make your code work more efficiently. However, it lacks idiomatic clarity.

It is advisable to follow the convention where None signifies failure or absence of value in an Option. Your current use of None for passing validations and Some for failing validations feels counterintuitive.

I recommend using an Either instead, with the Left side reserved for holding validation errors.

A useful technique discussed in this reference -> https://dev.to/gcanti/getting-started-with-fp-ts-either-vs-validation-5eja

Below is a sample solution utilizing either.getApplicativeValidation for running all 3 validation functions and collecting errors in a NonEmptyArray<string>.

import { sequenceT } from 'fp-ts/lib/Apply'
import { getSemigroup, NonEmptyArray } from 'fp-ts/lib/NonEmptyArray'

declare const validateFirstCommandIsMove1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;
declare const validateSymmetricCommandFollowsBezier1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;
declare const validateNoMoveAfterMove1: (command: Command) => either.Either<NonEmptyArray<string>, Command>;

const runValidations = sequenceT(either.getApplicativeValidation(getSemigroup<string>()))

const validateCommand = (command: Command): either.Either<NonEmptyArray<string>, string> => {
  return fpFunction.pipe(
    command,
    runValidations(
      validateFirstCommandIsMove1,
      validateSymmetricCommandFollowsBezier1,
      validateNoMoveAfterMove1
    ),
  )
}

fp-ts: Take an array containing Option<string> elements and transform it into an array of strings, containing only the values of the elements that are defined

Answer №1

Similar questions

The module "node_modules/minimatch/dist/cjs/index" does not contain the exported member 'IOptions'

component is receiving an incompatible argument in its props

Descriptive term that alters a characteristic of a category

Is there a way to make PrismaClient return DateTime fields as Unix timestamps rather than JavaScript date objects?

How does f' differ from let f = <F>f?

Unable to establish the relative placement of Div elements

I am having trouble getting the guide for setting up a NextJS app with Typescript to function properly

Sending input in a nested event listener

Unraveling Props in a React Component Using Typescript and a Union Interface

There is no registered handler for channel - Electron IPC handle/invoke

Encountering a 503 application error code while trying to load the Angular

Unexpectedly, the current value is not displayed in the Angular2 dropdown select element that contains multiple group options

Swap out the selector of an Ionic2 component with its contents

Can an empty form group be defined and then have form controls added later within the onInit function?

Collection of functions featuring specific data types

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Unleash the power of a module by exposing it to the global Window object using the dynamic

Is it possible to use export default Enum in TypeScript?

How do @material-ui/core and @types/material-ui interact with each other?

What is the best way to simulate Graphql queries and disable the loader in order to test a React component when loading is set to false using Jest and Enzyme?