lodash offers the pick function which can be used like this:
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
I am interested in creating a type-safe version of this function using typescript.
The desired usage should look like this:
pick(object, "a", "b")
The main objective is to ensure type safety while using this function.
Is it feasible to achieve this goal?
It seems like the solution you're looking for could involve utilizing the Pick type. How about trying out this implementation?
function select<T, K extends keyof T>(source: T, ...keys: K[]): Pick<T, K> {
const result: any = {};
keys.forEach(key => {
result[key] = source[key];
})
return result;
}
const obj = {a: 1, b: '2', c: 3}
const selectedValues = select(obj, 'b', 'c');
selectedValues.a; // not accessible
selectedValues.b // string
selectedValues.c // number
Utilizing Object.fromEntries (es2019) in a function:
function selectKeys<T extends object, K extends keyof T> (source: T, ...keysToSelect: K[]): Pick<T, K> {
const entries = keysToSelect.map(key => ([key, source[key]]));
return Object.fromEntries(entries);
}
Here is my solution using the Object.assign() method:
function pickKeys<T, K extends keyof T>(objectToPickFrom: T, keysToPick: K[]): Pick<T, K> {
return Object.assign(
{},
...keysToPick.map(key => {
if (objectToPickFrom && Object.prototype.hasOwnProperty.call(objectToPickFrom, key)) {
return { [key]: objectToPickFrom[key] };
}
})
);
};
The type definitions for lodash utilize the Pick method to automatically pass along the properties, saving you from having to define them yourself. Simply add them to your project by running either npm i --save-dev @types/lodash or yarn add -D @types/lodash.
After reviewing Ethan.Roday's response, I decided to make a few modifications.
I utilized the Array.reduce method and eliminated the use of the any type.
function extractKeys<T, K extends keyof T>(objectToExtractFrom: T, keysToExtract: K[]) {
return keysToExtract.reduce((accumulator, currentValue) => {
return (accumulator[currentValue] = objectToExtractFrom[currentValue]), accumulator;
}, {} as Pick<T, K>);
}
Here is my modified version, building upon @Bayu Karnia's solution:
function selectKeys<T extends Record<string | number | symbol, T>, K extends keyof T>(
dataObject: T,
selectedKeys: K[]
): Pick<T, K> {
return Object.assign(
{},
...selectedKeys.map((key: K) => {
return { [key]: dataObject[key] };
})
);
}
It seems like I successfully switched arguments and used curry, resulting in satisfactory type outcomes. I would greatly appreciate it if someone could provide an explanation:
const pick = <T, K extends keyof T>(keys: (keyof T)[]) => <R extends T>(obj: R) => keys.reduce<Pick<R, K>>((acc, key) => {
(acc as T)[key] = obj[key]
return acc;
}, {} as Pick<R, K>)
In the interface, I have a section that displays text along with a unique component titled FilterCriteriaList. This component includes custom buttons that alter their color when clicked. My goal is to reset the settings in the FilterCriteriaList component ...
Encountering an interesting issue that I need clarification on. Recently, I developed a compact Angular application to demonstrate the problem at hand. The puzzling situation arises when passing an Array (any[] or Object[]) as an @Input property to a chil ...
Encountering an issue with the node-config library while using typescript. The structure of my config folder is depicted here: https://i.sstatic.net/BKBgv.png After running tsc and attempting to launch my app from its entry point (app.js), a error ...
I'm currently working on developing a reusable component that involves using a redux-form <Field /> and styling it with styled-components within the component. The issue I'm facing is that none of the styles are being applied. Here is my ...
I am currently working on converting an API response into a TypeScript class or interface. The API is returning a list of objects with various properties, but I only require a few specific properties from the response object. Example of API Response: ...
I have a detailed component that is designed to show the 5-day forecast for a specific city. I have successfully retrieved the data using the http.get(Url) method. However, I am unsure of how to bind this JSON data to my view. I am familiar with displayi ...
I am looking to conduct unit testing on this Typescript code that has been transpiled using Clasp into Google App Script: function onLinksInText(text: GoogleAppsScript.Document.Text, onLink: OnLinkCallback) { const iterator = new TextIterator(text, on ...
Imagine being on the current URL of http://localhost:4200/#/transactions/overview/5?tab=2 and then navigating to http://localhost:4200/#/deals/detail/ If I refresh the deals/detail page, I want to return to the previous URL which could be something like h ...
Currently, I am stuck on an Angular tutorial that includes some code, but unfortunately, I am encountering an error that I haven't been able to troubleshoot. In all instances within my code where dish or getDish are present, they are stored as strings ...
There seems to be an issue with the creation of the transitions Array, but I can't figure out why! The text class export enum STATE_ID { CGU, Initial, Previous, Question} export enum CHOICE_ID {CGU_accepted, CGU_not_accepted} export class STATE_MAC ...
Hey there developers, I've been encountering an issue while trying to bind my dynamically generated checkboxes to an array in my project. In my users.template.html file, I have the following code snippet: <div *ngFor="let r of roles" class="checkb ...
My goal is to only update the fields that I have specified, leaving other data unchanged. However, in my current situation, when I pass the key to be changed, all other fields are set to null. import userModel from '../../models/usermodel' impor ...
Trying to create a basic Solana Program using Rust/Anchor that involves a PDA is causing a CPI error upon invocation, even though there doesn't appear to be any CPI happening (possibly due to the PDA account initialization). Below is the Program code ...
I'm currently utilizing a BehaviorSubject in my service to retrieve data from the BackEnd, which I subscribe to in my mainComponent using the async pipe. However, whenever I navigate to another subComponent and then return to my mainComponent by clic ...
Is there a way to automatically select the first row in ag-grid when using it with Angular? If you're curious, here's some code that may help: https://stackblitz.com/edit/ag-grid-angular-hello-world-xabqct?file=src/app/app.component.ts I'm ...
I am confronted with multiple input fields: <label> <span className="codes__input-label">Count</span> <input type="number" value={this.state.count} onChange={this.onInputChange} /> </label> ...
Encountering an issue with a button react component utilizing the opacify function from the Polished Library The styling is done using styled-components along with a theme passed through ThemeProvider. Upon testing the code, an error is thrown. Also, the ...
Shema Interfaces export interface MyCat { name: string; color: string; } export type Cat = MyCat & Document; export const CatSchema = new Schema({ name: { type: String, required: true, }, color: { type: String, required: tr ...
Upon having the Component and utilizing a TypeScript Interface for defining its props: interface Props { headerType: DROPDOWN_MENU_TYPE, //DROPDOWN_MENU_TYPE is enum headerContent: SVGClass isReverse: boolean; }; const MyComp: React.FunctionC ...
I am currently working on developing an Angular service that can seamlessly switch between making actual API calls and utilizing local storage within a single method invocation. component.ts this.userService.getAllUsers().subscribe(data => { conso ...