I have an array consisting of strings. I am trying to transform this array into an object where each string is a property with specific attributes assigned to them.
export interface SomeNumbers {
name: string;
value: number;
}
const arr = ['apple', 'banana', 'cherry'];
const fruitsObject = {}; // How can I define a type for this object?
arr.forEach((fruit, index) => {
fruitsObject[fruit] = {
name: fruit,
value: index
};
});
Here is an example that may suit your needs:
export interface SetOfNumbers {
title: string;
data: number;
}
const elements = ['one', 'two', 'three'];
const mapping: { [identifier: string]: SetOfNumbers } = {};
elements.forEach((value, index) => {
mapping[value] = {
title: value,
data: index
};
});
Utilizing the reducer pattern can effectively handle both type and runtime scopes.
export interface SomeNumbers<N, V> {
name: N;
value: V;
}
type Reducer<
Tuple extends Array<any>,
Acc extends Record<string, any> = {},
Index extends number[] = []
> =
Tuple extends []
? Acc
: (Tuple extends [infer Head, ...infer Tail]
? (Head extends PropertyKey
? Reducer<
Tail,
Acc & Record<Head, SomeNumbers<Head, Index['length']>>,
[...Index, 1]
>
: never)
: never)
const generator = <Tuple extends string[]>(tuple: [...Tuple]) =>
tuple.reduce((acc, elem, index) => ({
...acc,
[elem]: {
name: elem,
value: index
}
}), {} as Reducer<Tuple>)
const output = generator(['first', 'second', 'third'])
// {
// name: "first";
// value: 0;
}
output.first
Reducer type performs a similar function to the generator function. However, Reducer recursively iterates through the tuple.
Reducer - recursively traverses the Tuple and merges Acc with SomeNumbers<N,V>. Index - serves as an additional tuple for indexing. The value in Index increases by 1 element each iteration, corresponding to the index of the currently processed element
For more examples, check out my blog
Recently, I've integrated an image upload feature for my database using the following function: private saveFileData(upload: Upload): void { this.firebaseAuth.authState.subscribe(auth => { this.db.list(`uploads/${auth && auth.email && au ...
Exploring the concept of host binding on the input element's readonly attribute, aiming to add the attribute without assigning any value. Even though HTML specifications state that assigning a value may not make a difference as long as the attribute i ...
Currently, I am utilizing React version 17.0.2 along with Typescript for my project. My aim is to transfer the setLoading function from the parent component (App) to the child component (About) so that the loading state within App can be altered from About ...
I'm facing an issue with importing classes from one .ts file to another .ts file. Here is the structure of my project: https://i.sstatic.net/gZM57.png I'm attempting to import print.ts into testing.ts This is how my tsconfig.json appears: ht ...
In my current project, I am using a combination of React with TypeScript and Jest along with Testing Library for testing purposes. I have a specific requirement to unit test some code where I need to ensure that the person.id is correctly set as the key at ...
I've developed a custom ExpressJS wrapper on a private npm repository and I'm looking to export both my library and ExpressJS itself. Here's an example: index.ts export { myExpress } from './my-express'; // my custom express wrap ...
I'm currently delving into the deep #6 tutorial on NetNinja's react-router, but I'm attempting to implement it using TypeScript. My task involves fetching data from a JSON object, utilizing the useLoaderData() hook, and trying to properly ma ...
Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...
When working with Typescript in a React project, the top level component typically does not receive any props. What is the recommended approach for typing this scenario? I have been using the following coding structure as a template, but I am curious if t ...
Encountering issues while adding files from the react-admin example demo, facing some errors: 'Cannot use namespace 'FilterProps' as a type.' Snippet of code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orde ...
When working with HTML in Angular, I am looking for a way to use an <a> tag that adjusts its routerlink based on whether or not a user is logged in. Is it possible to achieve this functionality within a single tag? <a *ngIf="!(accountService ...
Feeling a bit uncertain... I'm wondering if it's suitable, awesome or not advisable to employ a builder pattern to retrieve API response and then apply the builder pattern on that response before storing it in @ngrx/store? And later on when acces ...
Below is an example of the code I am working with: class Stupid { private cache: Map<any, any> = new Map(); get<T>(key: string): T { return this.cache.get(key); }; } class Smart<T> extends Stupid { get(key: string): T { s ...
Currently, I am working on a UWP application built with Angular5 and I would like to incorporate Windows Runtime Component(Universal) classes into the application to access data from a table. import { Component,OnInit } from '@angular/core'; @C ...
function genericIdentity<T>(arg: T): T { return arg; } let myGenericIdentity: <U>(arg: U) => U = genericIdentity; I see that the 'genericIdentity' function is accepting an argument of a generic type. However, I am unsure about ...
After discovering an unexpected behavior in Typescript's type-inference, I suspect there may be a bug. Imagine having a list of the MyItem interface. interface MyItem { id?: string; value: string; } const myItemList: MyItem[] = []; It's ...
I have a specified object: config: { someKey: someString } My goal is to generate a tuple type based on that configuration. Here is an example: function createRouter< T extends Record<string, string> >(config: T) { type Router = { // ...
In my component, I am initializing a Formik form by calling a function and passing the next/router object. This is how it looks: export default function Reset() { const router = useRouter(); const formik = useFormik(RecoverForm(router)); return ( ...
After configuring my Angular 4 project with a service like this: const usersURL = 'http://my.super.url.php'; @Injectable() export class UserService { users: Observable<User[]> constructor (public http:Http) let tick$ = Observ ...
I'm completely stuck on this and can't seem to figure it out without using a second function: interface Fixed { a: number } const fn = <A, B extends {} = {}>(b: B) => { return b } fn({ a: 1 }) // { a: number } fn<Fixed>({ a: 1 } ...