New Update in Typescript 4.9: The type 'NonNullable<K>' could potentially represent a primitive value, which is not allowed as the right operand in the 'in' operator. Error code: 2638

Amidst the changes in Typescript 4.9, there are some updates to how the in operator operates.

Given the code snippet below, what approach can I take to convince tsc that id is not just a primitive value?

export type KeyOrId =
  | {
      key: string;
    }
  | {
      id: string;
    };

export default function checkValue<K extends KeyOrId | null>(
  value: K,
) {
 
    if (!value) {
      return undefined;
    }

    // The error 'NonNullable<K>' may refer to a primitive data type and cannot be used with the 'in' operator.(2638)
    return 'id' in value;
}

I attempted using a guard like typeof value !== 'object', but it didn't work out as expected.

Check out this Playground example!

Answer №1

The issue stems from this particular line - K extends KeyOrId | null .

Breaking it down, K extends KeyOrId | null can be written as K extends KeyOrId OR K extends null .

A corrected version would look like the following:

export type KeyOrId =
  | {
      key: string;
    }
  | {
      id: string;
    };


export default function customizedFunction<K extends KeyOrId>(
  keyOrId: K | null,
) {
 
    if (!keyOrId) {
      return undefined;
    }

    return 'id' in keyOrId;
}

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

Models in Typescript that are interrelated with Loopback

I'm currently working on defining connected models including the HasMany relationship in the context of @types/loopback definitions My approach involves creating an interface for HasMany and its implementation: interface IHasMany { /** ...

Creating a general function to accommodate two alike types

Is there a way to modify the addSuffix function to handle two different types and return them simultaneously? Here's an example: type First = { name: string, address: string, } type Second = { name: string ...

Can the WebSocket interface be substituted with WebSocket itself?

I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...

What could be causing the error message "Unable to access 'http' property of undefined" to appear in this validator?

Can someone help me with creating an asynchronous validator for a reactive form control that checks if a username already exists? Below is the code for the async validator: userdata.service.ts import { HttpClient } from '@angular/common/http'; i ...

Encountering a discord bot malfunction while on my Ubuntu server

My discord bot runs smoothly on my Windows 10 setup, but when deployed to the server running Ubuntu Server 20, it encounters a specific error. The issue arises when trying to handle incoming chat messages from the server. While I can read and respond to m ...

Redux - a method of updating state through actions

Hello, I am currently working on developing a lottery system and I have a question regarding the best approach to modify state using action payloads. Let's consider the initial state: type initialCartState = { productsFromPreviousSession: Product[ ...

NX combined with Nest.js and TypeORM, further enhanced with Webpack and Migrations

Recently, I embarked on a project using NX (Nest.js + Angular) and set up TypeORM for database configuration. While everything runs smoothly in "serve" mode, I found myself struggling with configuring migrations. In a typical Nest.js project, all files in ...

React-aria | Encountering a typescript error with input fields/textfields

Seeking assistance with using react-aria, specifically the useTextField feature. Despite following the documentation available at , I encountered an error related to the input element. Any help would be appreciated. Code import { AriaTextFieldOptions, use ...

Tips for preloading a TypeScript class using the -r option of ts-node

Imagine you have a file called lib.ts that contains the following code: export class A {} console.log('script loaded'); Now, if you launch the ts-node REPL using the command: npx ts-node -r ./lib.ts, you will see that it outputs "script loaded," ...

Tips for incorporating ACE Editor syntax highlighting rules into an Angular application

I am attempting to create custom highlighter rules by referencing examples from here and here. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import * as ace from 'ace-builds'; import 'ace-builds/src- ...

Issue with DTO and a custom decorator in NestJS

I am currently facing an issue with using a DTO alongside a custom decorator within a NestJS controller for body validation. I am sending a request using multipart/form data, which requires me to parse the data from a string to JSON. However, when attempti ...

What is the process of creating an instance of a class based on a string in Typescript?

Can someone please guide me on how to create an instance of a class based on a string in Nestjs and Typescript? After conducting some research, I attempted the following code but encountered an error where it says "WINDOWS is not defined." let paul:string ...

Angular 2 feature that allows for a single list value to be toggled with the

Currently, my form is connected to a C# API that displays a list of entries. I am trying to implement a feature where two out of three fields can be edited for each line by clicking a button that toggles between Yes and No. When the button is clicked, it s ...

Manage sequential observables and await user input

I have a collection of items that I need to loop through in order to determine whether or not a modal dialog should be displayed to the user, and then pause the iteration until the user provides input. The items are stored within an observable as Observabl ...

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Every time I attempt to create a new stripe object, I encounter the error message "Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string& ...

Rollup does not allow the use of self-written component imports in a component library

I am in the process of creating a personalized component library using my own components. However, I am encountering difficulties in the final stage of constructing the library using rollup. The current structure of my folders is as follows: ├── src ...

Issue with TypeScript when calling the jQuery getJSON() method

Currently, I am working with TypeScript version 1.7.5 and the latest jQuery type definition available. However, when I attempt to make a call to $.getJSON(), it results in an error message stating "error TS2346: Supplied parameters do not match any signatu ...

Can you retrieve the Angular Service Instance beyond the scope of an angular component?

Is it possible to obtain the reference of an Injectable Angular service within a generic class without including it in the constructor? I am exploring different methods to access the Service reference. For example: export class Utils { getData(): string ...

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

Encountering npm3 installation errors with typyings in Angular 2?

Each time I try to sudo npm install Angular 2 modules, everything updates and installs correctly. However, I encounter the following error when the typings install is attempted: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0 ...