In the case of explicit object keys and string types, TypeScript does not narrow types

My current setup is as follows:

export const PRISMA_TYPES_TO_TS = {
  'Int': 'number',
  'BigInt': 'number',
  'Decimal': 'number',
  'Float': 'number',
  'String': 'string',
  'Bytes': 'string',
  'Boolean': 'boolean',
  'DateTime': 'Date',
};


const randomKey: string = "randomKey"; // value can vary

if (PRISMA_TYPES_TO_TS.hasOwnProperty(randomKey)) {
  // encountering a TS error here stating "No index signature with a parameter of type 'string' was found on type"
  console.log('type is valid', PRISMA_TYPES_TO_TS[randomKey]);
} else {
  console.log('value is not valid');
}

The issue arises from TypeScript's inability to narrow types after the verification using 

PRISMA_TYPES_TO_TS.hasOwnProperty(randomKey)

What are some alternative methods for narrowing types in such scenarios?

javascripttypescriptobject

Answer №1

One of the reasons for this behavior is the signature of hasOwnProperty:

hasOwnProperty(v: PropertyKey): boolean;

This method does not act as a type guard and therefore does not narrow down types in TypeScript.

Since it's not possible to create a generic type guard, you will have to resort to using a type assertion:

if (PRISMA_TYPES_TO_TS.hasOwnProperty(randomKey)) {
  // TypeScript error "No index signature with a parameter of type 'string' was found on type"
  console.log('type is good', PRISMA_TYPES_TO_TS[randomKey as keyof typeof PRISMA_TYPES_TO_TS]);
} else {
  console.log('value is not good');
}

Playground

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

Leveraging the FileReader API within a Vue.js component function

I'm working on a Vue.js file picker that needs to display previews of selected files. To accomplish this, I am utilizing the FileReader API to read user-selected files as data URLs using the readAsDataURL method of the FileReader object. However, I&a ...

javascripteventsvue.jsfilereader

Tips on utilizing Ajax for updating the RenderBody() segment

Can anyone help me understand why my Ajax.ActionLink menu item is calling JavaScript twice when I try to use it for the second time? I simply want to update the RenderBody() after clicking on a menu item. _Layout.cshtml: ... <body> <div i ...

javascriptjqueryajaxasp.net-mvc-4

Are reflection problems a concern when using type-graphql mutations?

Recently, I've been experimenting with integrating type-graphql into my nodejs project. While implementing @Query methods went smoothly, I'm facing challenges with the following code snippet in combination with Moleculer service. @Mutation() / ...

typescriptgraphqltypegraphql

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

javascriptjqueryhtmlajax

Displaying [object Object] in Angular Material datatable

I am currently working on implementing a datatable component using Express and Firebase DB. Below is the service request data: getText() { return this.http.get<nomchamp[]>(this.url) .map(res => { console.log(res); return res }); ...

javascriptangularexpressdatatableangular-datatables

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

javascripthtmljquerydjangodjango-templates

"Enhancing event handling: Using addEventListener natively with selectors similar to .on()

Has anyone figured out how to replicate jQuery's .on() method in vanilla JavaScript? The native addEventListener function doesn't seem to have the capability to filter based on child/selector elements, and delving into event bubbling and capturin ...

javascriptjquerydom-events

Forming a jQuery element using a lengthy HTML code

Having a large HTML string that consists of multiple child nodes. Wondering if there is a way to create a jQuery DOM object from this string? Attempted to use $(string) but it only gave back an array with separate nodes. Trying to get an element that I ...

javascriptjqueryhtml

Create a continuous scrolling tool similar to Google Reader for iGoogle

Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...

javascriptcss

Update annotations in a React.js powered app similar to Google Keep

I am currently working on developing a replication of the Google Keep application using react js. So far, I have successfully implemented all the basic features such as expanding the create area, adding a note, and deleting it. However, I am facing challen ...

javascriptreactjsgoogle-keep

React encountered an expression when it was looking for either an assignment or function call

I'm facing an issue while trying to display the data retrieved from my database. Instead of the expected output, I am getting an error message - Failed to compile. ./src/components/list-pets.component.js Line 38:5: Expected an assignment or function ...

javascriptreactjs

Present Different Content for Visitors Using Ad-Blocking Software

I am currently working on a project that is supported by ads. These ads are subtle and relevant to the content, not obnoxious popups for questionable products. However, since the project relies on ad revenue, users with Ad Blockers unfortunately do not co ...

javascriptjqueryadsadblock

Content Security Policy directive violation: Chrome extension policy error occured due to refusal to execute inline event handler

I've been working on a chrome extension to perform a simple task, but I've hit a roadblock with one line of HTML code that's causing issues with setting the correct permissions. Despite my efforts, I'm stuck on what exactly needs to be ...

javascripthtmljsongoogle-chrome

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

javascript

Exploring the world of JMeter: capturing sessions with JavaScript and jQuery

I need to capture a user session in order to conduct a performance test. I have been using the JMeter HTTP(S) Test Script Recorder, but unfortunately it is not recognizing javascript and jquery. The error message I'm receiving is: JQuery is not def ...

javascriptjquerysessionjmeter

Implementation of a recursive stream in fp-ts for paginated API with lazy evaluation

My objective involves making requests to an API for transactions and saving them to a database. The API response is paginated, so I need to read each page and save the transactions in batches. After one request/response cycle, I aim to process the data an ...

typescriptrecursionstreamlazy-evaluationfp-ts

How to retrieve a component's property within an Angular2 provider?

As a beginner in OOP, I am currently experimenting with Ionic 2, Angular 2, and TypeScript. In my home.html file, I have an input field connected to the username property in home.ts as shown below: export class HomePage { public username: string; public n ...

oopangulartypescriptionic2

Guide to incorporating the useEffect hook within a React Native View

I am trying to use useEffect within a return statement (inside a Text element nested inside multiple View elements), and my understanding is that I need to use "{...}" syntax to indicate that the code written is actual JavaScript. However, when I implement ...

reactjstypescriptreact-native

NextAuth credentials are undefined and authentication is malfunctioning in React

I encountered the following issue: https://i.sstatic.net/3VBoJ.png This is the code snippet that I am using: return ( <> {Object.values(providers).map((provider) => { if (provider.id === "credentials") { ret ...

javascriptreactjstypescriptfirebasenext-auth

Encountering the 404 Not Found error when trying to fetch the Next.js API Route from the app

Currently facing difficulties with the routing in Next.js 13's app. Every time I attempt to access it, for instance via Postman, I keep getting a 404 Not Found error. This is my file structure: https://i.stack.imgur.com/ZWrlb.png An example of one ...

javascriptreactjsnext.jsprisma