I need help with a standard interface:
interface IProps<T> {
item: T;
key: keyof T;
}
Is there a way to guarantee that item[key] is either a string or number so it can be used as an index for
Record<string | number, string>My codebase is written in typescript v3.9.
If you're looking for a stricter type than keyof T, one that only allows keys with values of type string | number, then here's a solution:
type KeysAssignableTo<T, V> = {[K in keyof T]: T[K] extends V ? K : never}[keyof T]
interface IProps<T> {
item: T;
key: KeysAssignableTo<T, string | number>;
}
For example:
const item = {foo: 1, bar: true}
// OK
const testOK: IProps<typeof item> = {item, key: 'foo'}
// error: Type 'bar' is not assignable to type 'foo'
const testBad: IProps<typeof item> = {item, key: 'bar'}
Consider utilizing a specialized type instead of a generic one, such as:
interface CustomType {
[key: string]: string | number;
}
Below is an example that resembles what you might be searching for:
interface IProps<U extends Record<string, string | number>> {
data: U;
identifier: keyof U;
}
type Example1 = IProps<{ num: 1 }> // valid
type Example2 = IProps<{ num: '42' }> // valid
type Example3 = IProps<{ num: ['42'] }> // invalid
Take a look at the default _app.tsx code snippet from NextJS: function MyApp({ Component, pageProps }) { return ( <Component {...pageProps} /> ) } The issue arises when transitioning to TypeScript, as ES6Lint generates a warning indicating t ...
Is there a way to modify a React component to accept an optional prop and then treat it as non-null within the component itself? For example, consider the following basic component: import React from 'react'; type props = { x?: number; }; c ...
I'm currently working on implementing data editing within a component. My task involves checking if any of the data fields have been altered, and if so, prompting a confirmation pop-up to appear. If the user confirms the change, the data will then be ...
class Foo{ } var instance: Foo; export function getFooInstance(){ /* logic */ } or export class Foo{ private static _instance; private constructor(){}; public getInstance(){/* logic */} } // Use it like this Foo.getInstance() I would ...
In my coding project, I am dealing with an empty array, a value, and an object. Since there are multiple objects involved, I want to organize them into categories. Here is an example of what I envision: ARRAY KEY OBJECT OBJECT KEY OBJECT ...
Below is a snippet of JSON data: { "languageKeys": [{ "id": 1, "project": null, "key": "GENERIC.WELCOME", "languageStrings": [{ "id": 1, "content": "Welcome", "language": { ...
I attempted to create a multiline tooltip using the example below. However, the \n is showing up in the tooltip. I am looking to add a line break like we would with an HTML tooltip. Check out the code here. ...
I am attempting to store searched recipes data in local storage so that when the user refreshes, the data from the last searched recipe will still be available. I have tried saving the recipes data to local storage when a new search request is made and se ...
My current project involves using a TypeScript backend for a Dialogflow application with fulfillment. I initially used a preconfigured project template and didn't delve into the details. I work in VS Code and never explicitly build my code. Instead, ...
When I receive a response from the server, I want to redirect to another page. However, this process takes around 60 seconds, so in the meantime, I want to display a spinner. Once the response is received, I should be redirected to the new page. Sounds sim ...
Currently working on a task list and aiming to set the default date to 3 days from now, excluding weekends. Utilizing Vue and thinking a computed property might be the solution? DateTime.utc().plus({ days: 3 }).toFormat('yyyy-MM-dd HH:mm:ss'), ...
Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...
Encountering the following issue: "WebDriverError: Unable to convert: Error 404: Not found" while running a test with protractor: browser.actions().doubleClick(elem).perform(); or browser.actions().click(elem).click(elem).perform(); Uncertain of t ...
Is something wrong with my code if I can only see the footer, header, and side-nav components on localhost? How can I fix this? app.component.html <div class="container-fluid"> <div class="row"> <div class=&q ...
I have been working on a simple Angular/Typescript project that includes 12 basic unit tests which all pass successfully. However, I am now looking to measure the code coverage of these tests. Despite trying different methods, I have not been able to achie ...
Currently, I am in the midst of developing a React component library and one of my components contains a function that I want to export. The purpose of the addParticle function is to enable users of the library to dynamically insert particles into a cont ...
In the process of developing a basic Angular application using TypeScript, I have encountered an issue. Within my project, there is a URL structure like this: www.example.com/api/1/countries/Italy/ My goal is to extract the values 1 and Italy from this U ...
main.component.html [...] <a routerLink="/company-list">Open</a> [...] <main> <router-outlet name="content"><router-outlet> </main> [...] app.compoment.html <router-outlet><router-outlet> app.routing.modu ...
I need to integrate the function getCookie into my Vue file. This function is already defined in the HTML file where the Vue file will be injected. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" ...
I am in need of a function that can accept a parameter with interfaces having a specific structure. The parameter should be either a string hash or a string hash along with an attribute string hash, as shown below: { anotherHash: { a: 'a', ...