Can you help with fixing this issue?
What could be causing this problem? Can you explain what an index type is? Below is the code snippet in question:
const getPast = action => {
const presentToPast = {
approve: 'approved',
reject: 'rejected',
edit: 'edited',
create: 'created'
};
return presentToPast[action];
};
To simplify the process of converting present tense actions to past tense, I suggest creating a custom type called presentToPastType.
type presentToPastType = {
approve: 'approved',
reject: 'rejected',
edit: 'edited',
create: 'created',
};
const getPast = (action: keyof presentToPastType) => {
const presentToPast = {
approve: 'approved',
reject: 'rejected',
edit: 'edited',
create: 'created',
};
return presentToPast[action];
};
Another approach could be:
const getPast = (action: keyof typeof presentToPast) => {
const presentToPast = {
approve: 'approved',
reject: 'rejected',
edit: 'edited',
create: 'created',
};
return presentToPast[action];
};
Greetings on stackoverflow Sayan,
The issue with your code lies in the utilization of an untyped parameter (action). Here is a revised version for you to try:
const getPast = ( action: string ) => {
const presentToPast = {
approve: 'approved',
reject: 'rejected',
edit: 'edited',
create: 'created'
};
return presentToPast[action];
};
console.log(getPast('approve'));// will output : approved
I'm looking to enhance an existing exported type with a new method, without causing any disruption to the current usage in production. import * as BunyanLogger from 'bunyan'; import init from './logger'; export type Logger = Bunya ...
I'm working with an API method that has an Authorize attribute to verify permissions. [Authorize(ReadIndexes)] public async Task<IActionResult> GetIndexes () { ... } Is there a similar way in Angular to implement permission checks so the API ...
Contained within this element is the following component: import React, { useEffect, useState } from 'react'; import { TextareaTestIds } from '../utils/test-ids'; export interface TexareaProps extends React.TextareaHTMLAttributes<H ...
When I first started my project, I used the Typescript HTML Application Template project template. It worked well and set up a project for me. However, now I want to transition to using VSCode. The issue I'm facing is figuring out which switches and c ...
In my current project, I am creating a class where I am directly accessing the package version number like this: const pkg = require('../package.json') export class MyClass() { constructor() { // Set the base version from package.jso ...
UPDATE: Success! Problem Solved After much trial and error, I finally discovered the solution to my issue. It turned out that the problem lied in a simple configuration mistake. To rectify this, I made changes to both my package.json (dependencies section ...
Encountered a puzzling rxjs issue that has me stumped. Here's the scenario: I have two requests to handle: const obs1$ = this.http.get('route-1') const obs2$ = this.http.get('route-2') If obs1$ throws an error, I want to catch it ...
Recently, I encountered an issue where I created a custom class-based Vue component and wanted to access its methods and computed properties from a parent component. I found an example in the Vue Docs that seemed to address my problem (https://v2.vuejs.org ...
I am currently facing a challenge with my React and JavaScript project as I attempt to integrate an npm module developed with TypeScript. The issue lies in configuring my project to compile the TypeScript code from this module, resulting in the error messa ...
I've recently developed a Typescript Package and I want to test it in an application before publishing it on NPM. The main file (index.ts) of the package is structured like this => import Builder from './core/builder'; export default ...
I am having trouble displaying my JSON data in my application. I have imported the HttpClientModule in app.module.ts, but I keep getting an error that says: "" ERROR Error: Cannot find a differ supporting object '[object Object]' of ty ...
In my current project, I am attempting to display a string that changes when a button is pressed in my NextJs application. Here's the code snippet I am working with: 'use client' import { useState } from 'react' export default fu ...
Currently, I am integrating clean architecture in my latest project and facing challenges with repositories, data sources, and terminology. My aim is to test my useCases using an in-memory repository as I am only concerned about the business logic at this ...
I've been working on creating a dynamic settings menu in TypeScript using the following data: const userSettings = { testToggle: { title: "Toggle me", type: "toggle", value: false, }, testDropdow ...
My TypeScript React application is using DynamoDB services to store data, with a JavaScript middleware handling the database access operations. While developing locally, I successfully implemented the scan, put, and delete operations with no errors. Howeve ...
I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...
While transitioning a module from Primeng 7 to Primeng 11 in conjunction with Angular 11, everything seems to be running smoothly on ng serve with all functionalities working as expected. However, upon building the project, I encounter an unexpected error. ...
I am currently utilizing NextJS version 14 along with Supabase. Within my codebase, I have a reusable component that I frequently utilize: import { useState } from 'react'; interface MyInputProps { label: string; name: string; value: stri ...
I developed a compact UI toolkit and released it on the NPM registry. The library is built using strongly typed styled-components (TypeScript) and can be easily integrated into React applications. It functions perfectly after installation with npm install ...
My API response includes the price of a product, which is represented as {{price}} I have a system where I can add or reduce the number of products: <div class="number-input"> <h2>Price: {{price }}</h2> <button oncli ...