Inferring object keys in Typescript using an array as a basis

I am attempting to generate an object with specific keys based on the values within an array.

Below is the code snippet:

type AllowedKeys = "foo" | "bar" | "baz"

interface Options {
    keys: AllowedKeys[]
}

interface AllTypesDeclaration {
    foo: string[];
    baz: object[];
    bar: number[];
}

function createObj(arg: Options): Pick<AllTypesDeclaration, typeof arg.keys[number]> {
    return {}
}

const myObj = createObj({ keys: ['baz'] })

// This should work:
myObj.baz

// This should fail:
myObj.foo
myObj.bar

As you can observe, my attempt using Pick does not seem to be successful.

Demo: here

Answer №1

If you want to restrict the type of keys by the input, generics are necessary in this case. Without them, there would be no way to ensure that only specific keys are allowed.

function generateObject<U extends PermittedKeys[]>(input: { keys: U })
    : Pick<AllPossibleTypesDeclaration, typeof input.keys[number]> {
    return {}
}

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

Tips for adding an array to a formData: incorporating an array with two values along with their corresponding keys

Snippet : const options = new RequestOptions({ headers: headers }); let myArray; myArray = [{ "subfolder_name": subfolder, "file_upload": file }]; let formData: FormData = new FormData(); formData.append("folder_name",folder ); formData.append("counse ...

Filtering an array in Vue using Lodash based on the values of another array

As I continue to learn JavaScript, I have encountered something that is confusing me. Within my Vue data object, I have the following properties: data: { allergenFilter: [], categoryFilter: [], results: {}, }, I am using an array of check ...

Having difficulty in animating the upward movement of textbox2

I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 t ...

Use Javascript to set the position attribute to static for any styles that currently have the position attribute set to fixed

While web scraping using Selenium WebDriver with Chrome, I stumbled upon a page containing fixed regions that do not scroll and remain in place relative to the window. Often when trying to scroll to a specific control using Actions.MoveToElement(), the ele ...

Avoid the occurrence of the parent's event on the child node

Attempting to make changes to an existing table created in react, the table is comprised of rows and cells structured as follows: <Table> <Row onClick={rowClickHandler}> <Cell onCLick={cellClickHandler} /> <Cell /> ...

Laravel's routing system may cause complications when trying to send data via jQuery AJAX post requests

My current challenge involves passing an ID to a PHP script through AJAX. Previously, everything was working perfectly with the code snippet below: var baseURL = '/W4W/public/'; function voteUp(){ var snippetID = document.getElementById(&ap ...

Unable to initiate ng-click event in AngularJS

Looking to trigger a function in TypeScript from the view using AngularJS. My technology stack includes AngularJS, TypeScript, and ASP.Net MVC3. Here is the link in the UI: <div id="left_aside" ng-controller="MyGivingPortfolioController"> <div ...

Utilizing a variable name to specify an array or object for searching in Javascript and jQuery

Looking to improve my JavaScript skills as a beginner. I have a program that can randomly select an item from an object, but now I want it to pick another item from an object with the same name as the first selection. However, I'm struggling with usin ...

Utilizing the Jquery click function to assign an element as a variable

I'm currently working on a script that aims to extract the inner text of any clicked item with the class "customclass". Keep in mind that this specifically targets anchor elements. However, I've encountered an issue where the individual element ...

Guide on integrating a Jison generated parser within an Angular application

Using the Jison library, parsers can be created based on a specific grammar by running: $ jison calculator.jison This process is described in reference [1]. The above command generates a parser named calculator.js. Now the question arises - how to in ...

Attempt to transfer the $ref information to the prop data of the component

Hey, I have a Carousel component and a method like this: carousel () { return this.$refs.carousel } But when I try to pass it as a prop to another component, the data in the prop is coming back as undefined. Why is that happening? <Dots :carousel=&qu ...

FullCalendar experiencing issues displaying some events when using AJAX/JSON

I've been experimenting with FullCalendar for some time now, but I'm facing a minor issue. When I load events through AJAX/JSON in the correct format, the calendar only displays the first event. Although all other events are visible in the conso ...

Establish a single route for executing two different statements in MSSQL: one for updating and the other for inserting data into the MS-SQL

I have a Node application where I currently insert data into one table, but now I also need to insert it into another table. The issue is that I am unsure how to execute a second promise for this task. var query = "first SQL query..."; var query2 = "new ...

Guide on how to "attach" the routes of an Angular 2 module to a specific location within the routing structure

Let's consider a scenario where the main routing module is defined as follows: // app-routing.module.ts const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'auth', ...

Issue with hydration when logging in with Next-Auth in NextJS 13.4

Step-by-step Instructions: 'node -v' -> v18.16.1 'npx -v' -> 9.8.0 To start, I created a new Next.js app by running npx create-next-app@latest in the terminal within my app folder. Here is a link to the package.json file. Nex ...

I can't seem to figure out why the removeChild() function is not functioning properly in my

Recently, I've been working on a search website where users can input either a partial or full name and then click a button to display a list of actors whose names contain that specific string in a hint-like fashion. These names are sourced from a MyS ...

Allow for the inclusion of periods and spaces when coding in JavaScript

My JavaScript code checks if the username meets certain criteria. // Check the username re = /^\w+$/; if(!re.test(form.username.value)) { alert("Alert"); form.username.focus(); return false; } Currently, the script only accepts lette ...

Display array elements without numerical indexes

Consider the code snippet below: for(i=0; i<3; i++){ a = {}; a['name' + i] = i; data.push(a); } This code will generate the following array: { 1:{name0:0}, 2:{name1:1}, 3:{name2:2} } How can I modify the code ...

Record the marker's location only once following the completion of its dragging action

Is there a way to make the console log for getPosition only happen when the marker is stopped being dragged, rather than every 0.1 seconds while it's being dragged? Similar to how .getRadius() works - it logs the radius change just once. https://i.ss ...

Eliminate the need to input the complete URL every time when making server calls

Currently, my springbok application has a React-Typescript frontend that is functioning well. I am using the request-promise library to make requests like this: get('http://localhost:8080/api/items/allItems', {json: true}). However, I would like ...