The error message indicates a compatibility issue between parameters 'r' and 'a'

Attempting to reproduce the code found in this blog post, but encountering some perplexing errors.

import { option, identity, apply } from 'fp-ts';
import type { Kind, URIS } from 'fp-ts/HKT';
import { pipe } from 'fp-ts/lib/function';

type OrderId = string;

type OrderState = 'active' | 'deleted';

interface User {
  readonly name: string;
  readonly isActive: boolean;
}

interface OrderHKD<F extends URIS> {
    readonly id: Kind<F, OrderId>;
    readonly issuer: Kind<F, User>;
    readonly date: Kind<F, Date>;
    readonly comment: Kind<F, string>;
    readonly state: Kind<F, OrderState>;
}

type Order = OrderHKD<identity.URI>;
type OrderOption = OrderHKD<option.URI>;

const validateOrder = (inputOrder: OrderOption): option.Option<Order> =>
  pipe(inputOrder, apply.sequenceS(option.Apply));
//                 ^
//                 | here
// Argument of type '<NER extends Record<string, Option<any>>>(r: EnforceNonEmptyRecord<NER>) => Option<{ [K in keyof NER]: [NER[K]] extends [Option<infer A>] ? A : never; }>' is not assignable to parameter of type '(a: OrderOption) => Option<{ [x: string]: any; }>'.
//  Types of parameters 'r' and 'a' are incompatible.
//    Type 'OrderOption' is not assignable to type 'Record<string, Option<any>>'.
//      Index signature for type 'string' is missing in type 'OrderHKD<"Option">'.ts(2345)

Answer №1

It's puzzling how this code was said to have functioned, given that the sequenceS result imposes a constraint of

<NER extends Record<string, Kind<F, any>>>
, which an interface cannot fulfill due to potential declaration merging issues (refer to this TypeScript issue from back in 2019, well before the blog post's publication).

Nevertheless, you can make the sample work by defining OrderHKD as a type instead of an interface:

type OrderHKD<F extends URIS> = {
    readonly id: Kind<F, OrderId>;
    readonly issuer: Kind<F, User>;
    readonly date: Kind<F, Date>;
    readonly comment: Kind<F, string>;
    readonly state: Kind<F, OrderState>;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you provide some guidance on utilizing a for loop within Angular?

Storing the values entered by the user in an input field as "values" and having another array, "existing userdetails," returned from the backend that contains all details of existing users, I am faced with the task of comparing these two sets of data. I h ...

Calculate the variance in days between two dates and assign the result to a separate field

I am working with two date fields, one labeled Commencement Date and the other as Expiration Date. Objective: The goal is to calculate the difference in days between the selected commencement and expiration dates (expirationDate - commecementDate) and ...

What is the best way to increase the size of an array and populate it with just one specific element in Types

If I want to create an array in Python, like [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], all I have to do is use [1] * 10. >>> [1] * 10 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] Is it possible to achieve the same result in TypeScript? ...

Count the number of checked checkboxes by looping through ngFor in Angular

My ngFor loop generates a series of checkboxes based on the X number of items in childrenList: <div *ngFor="let child of childrenList; let indice=index"> <p-checkbox label="{{child.firstname}} {{child.lastname}}" binary=&qu ...

Errors encountered when using TypeScript with destructured variables and props not being recognized

I have a function that returns data. The object is structured with properties such as headerMenu, page, content, and footer. These properties are defined in DataProps interface. When I try to destructure the data object using the line: const { headerMenu, ...

My Weaviate JavaScript client is not returning anything when I use the ".withAsk" function. What could be the issue?

I recently set up a Weaviate Cloud Cluster using the instructions from the quick start manual. The data has been imported successfully, and the client connection is functioning. For the ask function, I have implemented the following: export async functio ...

Developing a loader feature in React

I've been working on incorporating a loader that displays when the component has not yet received data from an API. Here's my code: import React, {Component} from 'react' import './news-cards-pool.css' import NewsService fro ...

The Next.js build encountered an error - unable to locate function in next/script module

While constructing a CMS using next.js, one of the key components is media management through Cloudinary. The integration of the Cloudinary Media Library widget was successful during development using next/script. However, an error has now emerged that pre ...

Exploring the concepts of TypeScript interface inheritance and the powerful capabilities of generics in type inference

I'm facing a dilemma with TypeScript interfaces, generics, classes... not exactly sure which one is causing the issue. My mind is in overdrive trying to find a solution but I can't seem to simplify things. Here's what I'm grappling with ...

Angular's observable data fail to show on the screen

I am facing an issue with passing the data of an Observable fetched via an API request to a component variable for display. I have been trying but unable to make it work successfully. Any assistance would be greatly appreciated. Here is my code. Thank you. ...

A guide to implementing localStorage in TypeScript

When attempting to assign the object item to Product using this code: localStorage.setItem("Product", JSON.stringify(item)) The JSON string of item is not properly assigned to Product. Is there a solution to this issue? ...

Angular 5 error handler does not support service calls

My HTTP calls are placed inside a service, as they should be. Within that service, I inject another service for handling error notifications. In an interesting turn of events, I noticed that when I place the notification call inside the catchError pipe, e ...

Extending the declaration of JavaScript native methods is not possible when using TypeScript

When attempting to enhance the JS native String class by adding a new method, I encounter error TS2339. interface String { transl(): string; } String.prototype.transl = function() { // TS2339: Property 'transl' does not exist on type 'St ...

Harness the power of TypeScript in a single test file with jest's expect.extend() method

This question is similar to Can you limit the scope of a TypeScript global type? but it presents a slightly different scenario that requires clarification (although an answer to this would be greatly appreciated as well). In my Jest setup, I am attempting ...

Error encountered with TypeScript template literals strings type

There's a new feature in the latest version of Typescript that allows the use of template literal strings as types, like this: type Hey = 'Hey'; type HeyThere = `${Hey} There`; It works perfectly in the Typescript playground with version 4 ...

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

In my nodejs app, the folder structure is as follows: project |-- src/ | |-- controllers/ | | |`-- authorize-controller.ts | |`-- index.ts |--dist/ | |--controllers/ | | |`-- authorize-controller.js | | |`-- authorize-controller.js.map | ...

Alter the value by clicking a button within the DynamicRadioGroupModel in ng Dynamic Forms

I am working with ng-dynamic-form (version 6.0.4) and NG Bootstrap in Angular 6. I have a simple question. When a button click event is triggered, I want to change the value in DynamicRadioGroupModel by using the "setValue()" method. However, I am facing ...

What is the most efficient way to retrieve a single type from a union that consists of either a single type or an array of types

Is there a way to determine the type of an exported union type by extracting it from an array, as illustrated in the example above? How can this be achieved without directly referencing the non-exported Type itself? interface CurrentType { a: string; b ...

Rollup ESM creates faulty imports

I need to package a TypeScript React app as a component in an ES module or UMD, but the ES bundle generated is producing an invalid JS module. When bundling, I receive the following hints. However, I am unable to find a solution for this. (!) Missing glob ...

Typescript threw an error stating "Cannot access properties of an undefined object" in the React-Redux-axios

As a backend developer, I am not very familiar with frontend development. However, for my solo project, I am attempting to create some frontend functionalities including user login right after setting the password. Below is the code snippet from UserSlice. ...