Can an object be formed using the keys of another object, despite having different data types for the values?

Looking to dynamically generate textures based on a config object? I have a function that does just that by returning an object with the same property names but different values:

function generateTextures(config: {
    default?: boolean,
    multiply?: boolean,
    dark?: boolean
} = {default: true, multiply: true, dark: true}) {
    const textures : {[key: string]: []} = {}; // Seeking a way to define object properties dynamically

    const textures : { // Is there a way to achieve this without manually specifying keys and changing types?
        default?: [],
        multiply?: [],
        dark?: []
    } = {};

    do something...

    return textures;
}

Any suggestions or solutions would be greatly appreciated. Thank you!

Answer №1

Absolutely, the solution to your query lies in utilizing a mapped type. Check out this implementation:

const textures: { [K in keyof typeof config]: [] } = {};

By incorporating the keys of the type typeof config within the map, you bypass the need to explicitly define the type again. The resulting type of textures would be:

/* const textures: {
    default?: [] | undefined;
    multiply?: [] | undefined;
    dark?: [] | undefined;
} */

This aligns perfectly with what you wish to achieve. Hopefully, this explanation proves beneficial to you. Best of luck!

Click here for Playground link to 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

Can the internal types be accessed through Assembly.GetExportedTypes()?

Similar Question: Understanding Assembly.GetExportedTypes and GetTypes Do internal types become visible when using the method Assembly.GetExportedTypes()? What happens if the call is made from an assembly with an InternalsVisibleToAttribute? ...

What is the best way to replicate certain key-value pairs in an array of objects?

I am working with an array of objects. resources=[{name:'x', title:'xx',..},{name:'y',title:'yy',..}..] To populate my HTML tooltip, I am pushing all the titles from the resources array to a new array. dialogOkCli ...

"Ensuring the right data type is selected for the onChange event

In my code, I have a simple select component set up like this. import { Controller } from "react-hook-form"; import Select, { StylesConfig } from "react-select"; //.. const [universe, setUniverse] = useState<SetStateAction<TOptio ...

What is the best way to exempt a unique situation from a directive's operation?

While troubleshooting a bug related to search functionality on my page, I encountered an issue with the search component. The search feature is working correctly and returning the expected values. However, when I clear the search criteria, I noticed that t ...

Struggling to link dropdownlist with an array fetched from my service - need assistance

One of my services includes a method that retrieves a list of employees: export class EmployeeService { private employeesUrl = 'http://localhost:portnum/api/employees'; getEmployees(): Observable<IEmployee[]> { return th ...

Find the maximum value in an array using TypeScript

I have a single-column array called n_fnc and I am trying to find the maximum value within it. However, my current approach does not seem to be working. let first = this.fncs.map(item => item.n_fnc); console.log("First",first); x= Math ...

What is the best way to get my Discord bot to respond in "Embed" format using TypeScript?

I've been attempting to create a bot that responds with an embedded message when mentioned, but I'm running into some issues. Whenever I run this code snippet, it throws an error in my terminal and doesn't seem to do anything: client.on(&apo ...

Measuring Shannon Entropy for an array using Typescript

I'm currently attempting to calculate the Shannon entropy in typescript: Here's my current code: val =[0.5035203893575573, 0.4964796106424427] shannonEntropy(val){ let temp, temp2; temp = -(val[0] * Math.log(val[0])) temp2 = -(val[ ...

Clerk Middleware experiencing unexpected malfunctions

After installing Next.js 14 for my project, I decided to set up authentication with Clerk before getting started. Despite configuring the middleware.ts and layout.tsx files and running npm run dev, the terminal showed that the /middleware was compiled. How ...

The combination of MUI pickers and date-fns led to a TypeError: the function utils.getYearText is not defined

In my latest project, I'm utilizing Material-UI V4, Material-UI Date/Time Pickers, and date-fns. The page design is minimalistic, and I have incorporated the DateTimePicker component from Material UI: <DateTimePicker label ...

What is the best way to represent a directory structure in JSON using a C# data type?

My directory structure is as follows: v1 file1.txt file2.txt common common.txt I need to create a C# function that can traverse this directory structure and generate JSON output. The expected JSON format is like this: { "v1&qu ...

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

Is it possible to determine when a component has completed its rendering process in Angular?

I am currently working on an Angular application where I have a page component that contains several subcomponents. Each subcomponent is set up to fetch data from an API in the ngOnInit method, causing a layout shift issue as they load at different speeds ...

The function (a: number) => {} is incompatible with the type (a?: number) => void and cannot be assigned

type Func = (param?: number) => void const func: Func = (param: number) => {} I encountered the error: Type '(param: number) => void' is not assignable to type 'Func'. Types of parameters 'param' and 'param ...

What is causing the issue with entering the code? Exploring the restrictions of the mui tag

Can someone explain why I am unable to use boolean data type in this code snippet? I am trying to determine whether the user is an admin or not, and based on that, hide or disable a button. const Authenticate = useSelector(userSelector) let checkValue ...

What is the maximum number of groupings that can be created from a set of numbers within a

I'm trying to figure out how to handle a specific task, but I'm running into some obstacles. When adding numbers to clusters, a number is considered to belong to a cluster if its distance to at least one existing number in the cluster is within a ...

Does the term 'alias' hold a special significance in programming?

Utilizing Angular 2 and Typescript, I have a component with a property defined as follows: alias: string; Attempting to bind this property to an input tag in my template like so: <input class="form-control" type="text" required ...

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

I have successfully implemented code using Http and now I am looking to upgrade it to use the latest HttpClient. So far, I have taken the following steps: In App.module.ts: imported { HttpClientModule } from "@angular/common/http"; Added HttpClientModul ...

What is the method to utilize global mixin methods within a TypeScript Vue component?

I am currently developing a Vue application using TypeScript. I have created a mixin (which can be found in global.mixin.js) and registered it using Vue.mixin() (as shown in main.ts). Content of global.mixin.js: import { mathHttp, engHttp } from '@/ ...

Collaborative Vue component: Clients need to manually import the CSS

I recently created a Vue component using TypeScript that resulted in a separate CSS file being generated after the build process. However, I noticed that when the client imports this component, the CSS file is not imported automatically and needs to be exp ...