Exploring the functionalities of R.pick in TypeScript

Recently, I attempted the following code snippet:

import R from 'ramda'
import fs from 'fs'
import path from 'path'
import {promisify} from 'util'

const readFile = promisify(fs.readFile)

export async function discoverPackageInfo(): Promise<{
  name: string,
  version: string
  description: string
}> {
  return readFile(path.join(__dirname, '..', 'package.json'))
    .then(b => b.toString())
    .then(JSON.parse)
    .then(R.pick([
      'name',
      'description',
      'version',
    ]))
}

However, the outcome was not as expected. An error was thrown:

src/file.ts:13:3 - error TS2322: Type '{ name: string; version: string; description: string; } | Pick<any, never>' is not assignable to type '{ name: string; version: string; description: string; }'.
  Type 'Pick<any, never>' is missing the following properties from type '{ name: string; version: string; description: string; }': name, version, description

 13   return readFile(path.join(__dirname, '..', 'package.json'))
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 14     .then(b => b.toString())
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 19       'version',
    ~~~~~~~~~~~~~~~~
 20     ]))
    ~~~~~~~

I'm unsure of what mistake I made here. Can someone help identify it?

Answer №1

When using <a href="https://github.com/microsoft/TypeScript/blob/16031bc/lib/lib.es5.d.ts#L1059" rel="nofollow noreferrer">JSON.parse</a>, the return type is <code>any

The result after using <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1db9bfa/types/ramda/index.d.ts#L1435" rel="nofollow noreferrer"><code>R.pick</a> looks like this:
.then(R.pick([ 'name', 'description', 'version' ])) 
=>
type Return = Pick<any, Inner> // results in {}; any comes from JSON.parse
type Inner = Exclude<keyof any,
    Exclude<keyof any, "name" | "description" | "version">> // never

The expected output is

{ name: string, version: string description: string }
, but instead, it returns {}. To correct this, you need to explicitly assert the desired type for JSON.parse (name it MyThing):

readFile(path.join(__dirname, "..", "package.json"))
  .then(b => b.toString())
  .then(s => JSON.parse(s) as MyThing)
  .then(R.pick(["name", "description", "version"]));

To make parsing more type-safe, consider using assertion functions / type guards:

export async function discoverPackageInfo(): Promise<MyThing> {
  return readFile(...).then(...)
    .then(safeParse(assertMyThing)) // <-- change
    .then(R.pick(...));
}

const safeParse = <T>(assertFn: (o: any) => asserts o is T) => (s: string) => {
  const parsed = JSON.parse(s);
  assertFn(parsed);
  return parsed;
}

function assertMyThing(o: any): asserts o is MyThing {
  if (!("name" in o) || !("version" in o) || !("description" in o))
    throw Error();
}

Access the Playground to experiment with external type imports which may take some time to load or paste in your own environment.

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

Unable to update a single object within an array using the spread operator

I am currently working on updating an object within an array and have encountered some issues. In my initial code, I successfully updated a specific property of the object inside the array like this: var equipment = this.equipments.find((e) => e.id === ...

The presence of a constructor in a component disrupts the connection between React and Redux in

I am facing an issue with the connect function from 'react-redux' in my Typescript class example. The error occurs at the last line and I'm struggling to understand why it's happening. The constructor is necessary for other parts of the ...

Divide the code into individual components within Angular 2 projects

I currently have 3 Angular 2 projects developed in TypeScript. Each project contains the same models and services. I would like to find a way to integrate these common elements at a global level and connect them with each individual project. Any suggesti ...

Determine the category of a container based on the enclosed function

The goal is to determine the type of a wrapper based on the wrapped function, meaning to infer the return type from the parameter type. I encountered difficulties trying to achieve this using infer: function wrap<T extends ((...args: any[]) => any) ...

retrieve the checkbox formgroup using the Response API

After following a tutorial on creating dynamic checkboxes, I now need to implement dynamic checkboxes using an API request. In my implementation so far, I have defined the structure as shown below: inquiry-response.ts interface Item { // Item interface ...

Allow exclusively certain type to pass through the function

Is it possible to receive an error message from the function in the following example? I have included comments at a relevant spot in the code below: interface Pos { x: number, y: number, } function doSome(pos: Pos) { return pos.x + pos.y } let p ...

Why does my export function get executed every time the TextInput changes?

Hey there, here is my React and TypeScript code. I'm wondering why the console.log statement gets called every time my text field changes... export default function TabOneScreen({ navigation, }) { const [out_1, set_out1] = useState('' ...

Approach to streamlining and making services more flexible

Currently, I am immersed in a complex Angular 2 endeavor that requires fetching various types of objects from a noSQL database. These objects are represented using straightforward model classes, and I have set up services to retrieve the data from the DB a ...

I encountered a warning while using the useViewportScroll in NextJs with Framer Motion: "Caution: The useLayoutEffect function does not have any effect on the server

Successfully implementing NextJs with Framer Motion, yet encountered a warning: Warning: useLayoutEffect does not function on the server due to its effect not being able to be encoded in the server renderer's output format. This may cause a differenc ...

The error message "Property 'list' is not found on type 'void' React - Material UI" indicates that the 'list' property is not recognized

Currently, I am facing an issue while working with Material UI and React Typescript. The error message I receive is "Property 'list' does not exist on type 'void'" when attempting to use makeStyles and createStyles to remove padding. It ...

Using MatTableDataSource in a different Angular component

I am working with two components, namely Order and OrderDetail. Within the Order component, I have a MatTableDataSource that gets populated from a service. OrderComponent Prior to the constructor listData: MatTableDataSource<DocumentDetailModel>; ...

Focusing on an input element in Angular2+

How do I set focus on an input element? Not with AngularDart, but similar to the approach shown in this question: <input type="text" [(ngModel)]="title" [focus] /> //or <input type="text" [(ngModel)]="title" autofocus /> Does Angular2 provi ...

Guide to Implementing StoreApi in Zustand LibraryLearn how to utilize Store

While reading the documentation for zustand, I came across a useful piece of information. In addition to the standard `set` and `get` parameters, there is an extra parameter called `api` in the StateCreator function. Check out the example below: import cr ...

Ensuring the accuracy of nested objects through class validator in combination with nestjs

I'm currently facing an issue with validating nested objects using class-validator and NestJS. I attempted to follow this thread, where I utilized the @Type decorator from class-transform but unfortunately, it did not work as expected. Here is my setu ...

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

Currently working on a hello world project in Electron and stumbled across the possibility of using Typescript for the Main process, . The provided instructions suggest changing the file extension from index.js to index.ts and updating the package.json fi ...

When incorporating leaflet-routing-machine with Angular 7, Nominatim seems to be inaccessible

Greetings! As a first-time user of the Leafletjs library with Angular 7 (TypeScript), I encountered an error while using Leaflet routing machine. Here is the code snippet that caused the issue. Any ideas on how to resolve this problem? component.ts : L. ...

Changing dot notation to bracket notation in Angular

Having trouble using dynamic columns in a Primeng table? The column fields need to be in bracket notation for this setup. What if you have a column with nested JSON structure and you're not sure how to write that in bracket notation? Don't worry, ...

Encountering an error in Angular2 and TypeScript: TS2322 error message stating that the type 'Response' cannot be assigned to type 'UserStatus'

Currently, I am facing some challenges while working with Angular2 and TypeScript. Transitioning from AngularJS to Angular2 has proven to be a bit tricky for me. To better understand this new framework, I decided to create an experimental app with the foll ...

Does TypeScript lack awareness of type checking within nested functions?

Currently, I am using TypeScript with React and encountering a particular issue. Below is a function I have created to ensure that the variable 'arr' is an Array and not empty. export const isNotEmptyArr = (arr?: unknown[]) => { return Arra ...

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...