Translate the TypeScript interface to its corresponding interface

Imagine having a TypeScript interface like this:

interface IOriginal {
    aaa: string;
    bbb: boolean;
}

Now, let's say you want to create a similar interface with the same keys but different values (in this scenario, the values are generated using the Reducer generic from Redux, but let's keep it general):

import { Reducer } from "redux";
interface IDerived{
    aaa: Reducer<string>;
    bbb: Reducer<boolean>;
}

The question is: how can you generate IDerived directly from IOriginal without having to retype all the key-value pairs (avoiding repetition and needing to update in two places)? If these were objects, you could do something like this:

const derived = original;
for(var key in derived) derived[key] = Reducer(original[key]);

However, it's uncertain if there are equivalent tools for dealing with types/interfaces.

Answer №1

If you're in search of a mapped type, here's a solution for you:

type DerivedID = { [Key in keyof OriginalI]: Converter<OriginalI[Key]> };

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

Implementing JavaScript Code in TypeScript

Every JavaScript code should also be valid in TypeScript, but when attempting to run the following code snippet below, an error is triggered. Could someone convert this JavaScript code into TypeScript? Error: 20:9 - TS2531 Error: Object is possibly 'z ...

What is the best way to explain to Typescript how to interpret a factory function that generates variable class definitions?

In my current project, I am utilizing Angular v16 and ngxs v18.0 simultaneously. The project consists of multiple grids that require a similar set of actions. To streamline this process, we attempted to create a factory function that would generate action ...

Encountering Issues with TypeScript Strict in Visual Studio Code Problems Panel

I have discovered that I can optimize my TypeScript compilation process by utilizing the --strict flag, which enhances type checking and more. Typically, I compile my TypeScript code directly from Visual Studio Code with a specific task that displays the c ...

Typescript: parameter must be included if another is also required

In the user interface, the parameter c is mandatory only if the parameter a is set to true. interface IArguments { a: boolean, b: string, c: string } The solution below seems to be effective, but how can I exclude the c parameter in the first scenar ...

What are some strategies for exporting methods without resorting to the use of import * as ...?

Imagine having a file structured like this: // HelperFunctions.ts export const dateFormat = 'MM/DD/YYYY'; export const isEmpty = (input: string | null | undefined): boolean => { if (input == null) { return true; } if (!in ...

Why does WebStorm fail to recognize bigint type when using TSC 3.4.x?

Currently, I am working on the models section of my application and considering switching from using number to bigint for id types. However, despite knowing that this is supported from TSC 3.2.x, WebStorm is indicating an error with Unresolved type bigint. ...

Using class-validator in Node.js to validate arrays of objects

My goal is to verify the Alcohol ID and Alcohol Name for emptiness. Below is the format I am working with: { "barId": "string", "barName": "string", "drinksItems": [ { "alcoholId": "string", "alcoholName": "string", "mixerLis ...

Eliminating data type from union in Typescript

I have a specific type that I collect from various other types: type CustomType = { id: string; foo: (string | Type1)[]; bar: (string | Type2)[]; baz: string | Type3 | null; description: string | null; } I am interested in refining thi ...

Exploring the integration of Server-Sent Events in Angular

I'm currently working on incorporating Server-Sent Events (SSE) into my testing application. The server side configuration has been completed, and I am utilizing the endpoint (api/v1/sse/document). The aim here is that whenever a scan is performed, I ...

Exploring the wonders of nested object destructuring in ES6

How have you been? I want to remove the property "isCorrect" from a nested object. Original List id: 1, questionText: 'This is a test question for tests', answerOptions: [ { answerText: 'A', isCorrect: ...

Ways to update HTML values using Events

I am attempting to retrieve a value using Events (ionic) once it listens for my 'onSMSArrive' event. I am able to successfully retrieve the value from the events. However, I am encountering an issue where the value is not updating in my app. Bel ...

Error message: Invariant Violation: Portal.render() being caused by semantic-ui-react Basic Modal

As part of enhancing an existing React component, I attempted to include a basic modal (link to documentation). Everything was working well without the modal, but once I added it in following the semantic-ui-react guidelines, I encountered a runtime error ...

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

I am working on a project where I have a select field with checkboxes. My goal is to disable and check the checkboxes based on values from a string array. I am using Angular in my .ts file. this.claimNames = any[]; <div class="row container"> ...

Issue with numeric values not rendering properly using range slider in Ionic

In my Ionic project, I am attempting to create a range slider for selecting an age between 0 and 25 years old. The goal is to display the selected number when sliding, such as: "I'm 21 years old" Currently, my code is functional. However, it does no ...

Generate an interactive sitemap.xml in ReactJS for each request made to http://example.com/sitemap.xml

I am working on a single-page application (SPA) using reactjs, and I have links in the format of http://example.com/blog/:id. I want to dynamically generate a sitemap for this site. While I'm aware that there are npm packages like react-router-sitema ...

Testing Angular Components - Creating Mocks for AngularFireStore Collection Fetching

Update I made some progress today, but I've encountered a new error in the same process. Updated question below. I'm here with another query regarding how to simulate a complex call from AngularFireStore. I'm facing an issue while running ...

Assuming control value accessor - redirecting attention

import { Component, Input, forwardRef, OnChanges } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'formatted-currency-input', templateUrl: '../v ...

A guide to confirm if an object includes an HTML element without compromising safety

When I implement a function that is triggered by a click event: useEffect(() => { document.addEventListener('click', (e) => handleClickOutside(e), true); }); The function itself: const myElement = useRef(null); const handleCli ...

Typescript-optimized Npm library utilizing the module-alias feature

As I work on creating an npm library with Typescript, I have made use of the paths setting in tsconfig.json and the module-alias tool to streamline my imports, allowing me to use syntax like import * from '@/utils'. However, I have encountered an ...

Unable to retrieve template generated using the innerHTML directive in Angular 4

I am in need of accessing the elements of a dynamically created component's DOM through the innerHTML directive in Angular. Below is my main component: import {Component} from '@angular/core'; @Component({ selector: 'app-root', ...