Tips for transforming one type into another type

I'm currently working with a type called SomeType, which has several properties as shown below:

type SomeType = {
  First: {
    color: 'red' | 'blue'
  },
  Second: number,
  Third: {
    amount: number,
    size: 'small' | 'large'
  }[],
  Fourth: string,
  Fifth: string | number
}

Now, I need to create a new type similar to SomeType, but without hardcoding the structure like this:

type NewSomeType = {
  First: any,
  Second: any,
  Third: any,
  Fourth: any,
  Fifth: any
}

I'm facing some challenges in researching how to achieve this. Any insights or tips would be greatly appreciated!

typescripttypes

Answer №1

If you're seeking information on mapped types, then you've come to the right place. To illustrate, in your case, you could use the following syntax:

type NewSomeType = { [K in keyof SomeType]: any };

This would result in:

/* type NewSomeType = {
    First: any;
    Second: any;
    Third: any;
    Fourth: any;
    Fifth: any;
} */

Feel free to explore this concept further by visiting the Playground link for code

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

Comparison between a Typescript optional field and a field that has the potential to be undefined

Can you clarify the contrast between an optional field and a T | undefined field? export interface Example { property1: string | undefined property2?: string } ...

javascripttypescript

Ways to stop users from submitting a form repeatedly in Angular

In my current feature, users have the ability to create new data and save it. If the data already exists, a modal will pop up as shown in the image below: However, there is an issue when the user clicks the save button multiple times while the request is ...

angulartypescript

A method for increasing a counter using only an instance of a class or function without accessing its methods or properties in Javascript

Looking at the task ahead, let increment = new Increment(); I have been tasked with creating a Javascript class or function called Increment in order to achieve the following: console.log(`${increment}`) // should output 1 console.log(`${increment}`); ...

javascripttypescriptecmascript-6closuresjavascript-objects

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

javascriptreactjstypescriptgraphqlreact-hooks

The React Nested Loop Query: Maximizing Efficiency in Data

Learning React has been a challenge for me, especially when comparing it to XML/XPath. In this scenario, I have two arrays simplified with basic string properties... customerList: Customer[] export class Customer { id: string = ""; firstnam ...

reactjstypescript

Having difficulty importing my customized TypeScript npm package

Creating a typescript npm package is fairly simple, here's an example: Core.ts class Core{ constructor(){} //some functions } export = Core; Core.d.ts declare class Core { constructor(){} //some functions } export = Core; Package. ...

node.jstypescriptimportnpmexport

What steps do I need to take to export my TypeScript declarations to an NPM package?

I have multiple repositories that share similar functionality. I want to export type declarations to an NPM package so I can easily install and use them in my projects. Within the root directory, there is a folder called /declarations, containing several ...

typescripttypescript-typingsnpm-publish

Creating custom components in AngularJS 2 allows you to define methods unique to each component. Want to learn

I created my component (A) by combining multiple html elements, but I have two questions. How do I define methods (such as get, etc.) on my component? I have tried @Output, @ViewChild, etc. but they are not working. I am looking for an alternative way ...

typescriptangular

What is the best way to clear all content from the "textarea" and input fields after submitting?

I'm currently using a Devextreme library for my project. I am having trouble finding a way to clear all the textarea information in the component along with other inputs when clicking on the Save button. Despite trying various methods, I have not bee ...

angulartypescriptdevextreme

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

javascripttypescriptcompiler-errorslogic

Struggling with setting up the onChange function in a Next.js application

After successfully writing and testing the code here, I encountered an error preventing me from building it. Please review the code for any issues. I am attempting to set onChange to handle user input in a text field. Currently using onChange={onChange}, ...

reactjstypescriptnext.js

Creating a subclass of `Error` leads to the error message "only refers to a type, but is being used as a value here."

I currently have Typescript 4.0.2 installed. Within lib.es5.d.ts, there is the snippet provided below: interface Error { name: string; message: string; stack?: string; } interface ErrorConstructor { new(message?: string): Error; (messa ...

typescript

Exploring dynamic data with Highcharts geomaps

API is being called to display data in the chartOptions. However, I am encountering an issue trying to pass it through this.letsTry. I am unsure where I am making a mistake. [data-local.component.html] <highcharts-chart id="container" [Highch ...

angulartypescripthighcharts

Is it possible to conditionally trigger useLazyQuery in RTK Query?

Is it possible to obtain trigger from useLazyQuery conditionally? const [trigger] = props.useLazySearchQuery(); My objective is to retrieve trigger only when useLazySearchQuery is provided in the props. One way I can achieve this is by using const [ ...

reactjstypescriptreact-querydestructuring

Mastering the utilization of bootstrap-select in TypeScript while ensuring "noImplicitAny" is set to true can be quite the challenge, especially when confronted with the issue of bootstrap-select/index

Hello, I am currently exploring Typescript and attempting to incorporate bootstrap-select into a project that requires "noImplicitAny": true. However, I am encountering an issue while trying to import BootstrapSelect from @types/bootstrap-select. The erro ...

typescriptnpmnode-modulesbootstrap-select

List of Ionic Cordova plugins sorted by Android version

Seeking guidance on how to determine which versions of Cordova plugins are compatible with Android 5.0.0. When attempting to build with the latest plugins, I encounter errors indicating that they are not supported in this version of Android. For instance: ...

angulartypescriptcordovaionic-framework

Implementing Entity addition to a Data Source post initialization in TypeORM

The original entity is defined as shown below: import { Entity, PrimaryGeneratedColumn} from "typeorm" @Entity() export class Product { @PrimaryGeneratedColumn() id: number The DataSource is initialized with the following code: import ...

javascripttypescripttypeorm

Database is not displaying the many-to-many connections

Good morning! Hey everyone, I'm having an issue with my code that I need help solving. It involves a many-to-many relationship where users can subscribe to items. user.entity.ts @Entity("user") export class UserEntity { @PrimaryGeneratedColumn ...

typescriptnestjstypeorm

What is the significance of the initial "this" parameter in Typescript?

I came across this method signature: export function retry<T>(this: Observable<T>, count: number = -1): Observable<T> { return higherOrder(count)(this) as Observable<T>; } The first parameter is this and it is typed as Observabl ...

typescript

Issue with TypeScript not detecting exported Firebase Cloud Functions

Dealing With Firebase Cloud Functions Organization I am managing a large number of Firebase Cloud Functions, and in order to keep the code well-structured, I have divided them into separate files for each function category (such as userFunctions, adminFun ...

node.jstypescriptfirebasegoogle-cloud-functions