Instructions on generating a type by utilizing variables for key values

I'm attempting to reproduce this structure for react navigation route parameters:

export type RootStackParamList = {
  "Welcome": undefined;
  "Onboarding User": { category: string };
}

Instead of a string as the key, I want to use a variable like shown below

interface path { [key: string]: string }

export const PATHS: path = {
  welcome: 'Welcome',
  onboardingUser: "Onboarding User",
};


export type RootStackParamList = {
  [PATHS.welcome]: undefined;
  [PATHS.onboardingUser]: { category: string };
}

The error message says 

TS1170: A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

How do I create an interface with a constant variable?

typescriptreact-navigation

Answer №1

After posting my question, I was able to find the answer myself.

I decided to switch from using a const for PATHS in the interface to using an enum instead.


export enum ROUTES {
  home = 'Home',
  profile = "Profile"
};


export type RootStackParamList = {
  [ROUTES.home]: undefined;
  [ROUTES.profile]: { category: string };
}

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

absence of firing the onChange event in space

Within my ReactJS project, I have implemented a basic controlled input element. Strangely, when I attempt to trigger the onChange event by pressing the spacebar, it does not register. Is this expected behavior? And if not, what steps can I take to modify i ...

reactjstypescript

Using styled() in TypeScript to customize a Material UI List component

I am currently in the process of transitioning a project from JavaScript to TypeScript, and I have encountered an issue with a modified version of Material UI's List component that is created using style(). The specific problem arises when I attempt t ...

reactjstypescriptmaterial-ui

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

Incorporating types into my NestJS server has been a priority. After creating a controller (a route for those who prefer Express), I attempted to define the type for params: public async getAllMessages( @Query('startDate', ValidateDate) start ...

javascriptnode.jstypescriptexpressnext.js

Step-by-step guide on mocking a method within a method using JEST

Currently, I am facing a challenge in unit testing a method named search. This method consists of three additional methods - buildSearchParameter, isUnknownFields, and readAll. I am looking to mock these methods but I am uncertain about the process. Can ...

javascriptnode.jstypescriptunit-testingjestjs

What are the steps to integrate a database into my Next.js application?

While I was experimenting with integrating postgresql into a nextjs project, I encountered an error 405 when trying to create an account. Below is the error message in the browser console: page.tsx:14 POST http://localhost:3000/api/auth/ ...

sqltypescriptnext.jsprismanext.js13

How to Implement Angular ngStyle with ChangeDetectionStrategy.OnPush?

Check out this StackBlitz demonstration that demonstrates how ngStyle is being used to style the h1 element in the following way: <h1 [ngStyle]="{'background-color': backgroundColor}" The component named HelloComponent employs the O ...

javascripthtmlcssangulartypescript

Tips on transferring key values when inputText changes in ReactJs using TypeScript

I have implemented a switch case for comparing object keys with strings in the following code snippet: import { TextField, Button } from "@material-ui/core"; import React, { Component, ReactNode } from "react"; import classes from "./Contact.module.scss" ...

javascriptreactjstypescriptmaterial-uireact-dom

Is there a way to open an image.png file in typescript using the "rb" mode?

Is there a way to open png files in typescript similar to the python method with open(path+im,"rb") as f:? I have a folder with png files and I need to read and convert them to base 64. Can anyone assist me with the equivalent method in typescript? This i ...

javascripttypescriptimagepng

Sign up for Observable and receive notifications for specific events

I am working with an Angular service that looks like this: export class EventService { private subject = new Subject<Event>(); send(code: EventCode, data?: any) { this.subject.next(event); } clear() { this.subject.next(); } g ...

angulartypescriptrxjsangular6angular7

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

Unable to break down the property 'desks' of '(0 , _react.useContext)(...)' due to its undefined nature

Trying to mock DeskContext to include desks and checkIfUserPresent when calling useContext is causing an error to occur: Cannot destructure property 'desks' of '(0 , _react.useContext)(...)' as it is undefined TypeError: Cannot destruct ...

reactjstypescriptreact-hooksjestjsreact-testing-library

unable to successfully complete parameter in angular 2

After receiving data from the API, I am using the subscribe method to execute lines of code. Below is the code snippet: this.attRecService.getAgendaData(moment(this.viewDate).format('YYYY-MM')).subscribe( resp => { this.ag ...

angulartypescriptasynchronoussubscription

Angular error: "No directive was found with exportAs 'ngModel'." Ensure that FomsModule has already been imported

I'm encountering an issue where I am being advised to import "FomsModule", but it is already imported in my code. I attempted to include "ReactiveFormsModule" as well, but the problem persists. Here is the complete error message: src/app/components/ ...

javascriptangulartypescript

Issue with Angular Testing: Tick function fails to work properly when component initialization includes a timer

Question How can I make the `tick` function work properly so that my test advances by 10s and calls `submit` in my component as expected? Note: I am looking for a solution other than using await new Promise(r => setTimeout(r, 10000)) to avoid having l ...

angulartypescripttestingtimer

Utilizing Bootstrap-Slider in Vue with TypeScript

Attempting to incorporate a bootstrap-slider onto my webpage using a TypeScript-based Vue backend within an ASP.NET Core framework. Utilizing the standard Vue.js template with TypeScript in ASP.NET Core. Have added the bootstrap-slider types via npm inst ...

asp.nettypescriptvue.js

Building on Angular 7, generate a fresh object by extracting specific values from an existing object

My object structure is as follows: const Obj = "Value1": { "value1value": "1" }, "Value2": { "value2value": "2" }, "Value3": { "value3value": "3" }, "BTest": { "1": "1", "2": "2" }, "Value4": { "value4value": "value4value" }, "ATes ...

javascriptangulartypescript

Using the watch flag in TypeScript across multiple projects - A comprehensive guide

In my project, I have the following scripts section in the package.json: "watch": "?", "build": "npm run build:compactor && npm run build:generator && npm run build:cleaner", "build:lambda": ...

typescriptnpmtsconfig

Solving the issue where the argument type is not assignable to the parameter type

I am attempting to filter an array of objects in React using TypeScript and encountered this error. Below is my interface, state, and function: TS2345: Argument of type '(prev: IBudget, current: IBudget) => IBudget | undefined' is not assigna ...

reactjstypescriptfiltertypesreduce

Designing a platform for dynamic components in react-native - the ultimate wrapper for all elements

export interface IWEProps { accessibilityLabel: string; onPress?: ((status: string | undefined) => void) | undefined; localePrefix: string; children: JSX.Element[]; style: IWEStyle; type?: string; } class WrappingElement extends React.Pure ...

javascriptreactjstypescriptreact-native

What is the most effective approach for handling user input delays with Async promises?

New to Vue.js and currently exploring the following challenge: I have a component named PopUp which can be displayed or hidden using functions of the same name. My goal is for the popUp.show() function to return a promise that contains information about ...

javascripttypescriptvue.js