Discovering ways to optimize argument type declarations in TypeScript

If we consider having code structured like this:

function updateById(
  collection: Record<string, any>[],
  id: number,
  patch: Record<string, any>
): any[] {
  return collection.map(item => {
    if (item.id === id) {
      return {
        ...item,
        ...patch
      };
    }

    return item;
  });
}

function updateRefById(
  collection: Ref<Record<string, any>[]>,
  id: number,
  patch: Record<string, any>
): void {
  collection.value = updateById(collection.value, id, patch);
}

We have a generic function called updateById and a more specific one named updateRefById which acts as a wrapper. It's noticeable that there is some redundancy in type checking since both functions share almost the same arguments.

Is there a way to reduce this redundancy and make the code more concise?

The only potential solution that comes to mind is passing all the function arguments through a single options object. However, I'm unsure about whether or not this approach would be suitable for our needs.

Answer №1

To streamline this process, a generic approach can be used to avoid redundant types. In this situation, replacing function declarations with variables may not yield significant improvements as return and collection parameter types are not repeated:

type TCollection = Record<string, any>[];
type TUpdateFn<T, U> = (
  collection: T,
  id: number,
  patch: Record<string, any>
) => U;

const updateById: TUpdateFn<TCollection , any[]> = (collection, id, patch) => { ... };

const updateRefById: TUpdateFn<Ref<TCollection>, void> = (collection, id, patch) => { ... };

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

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

Is it possible to determine if the process for changing Three.js material has been successfully completed?

Is it possible to determine the completion of this process? material.map = new THREE.Texture( canvas ); material.map.needsUpdate = true; If not, sometimes the final result will be a black snapshot. var snapshotData = renderer.domElement.toDataURL(strMi ...

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}`); ...

Immutable parameter in constructor

While analyzing some TypeScript code, I stumbled upon a peculiar declaration within a class definition: constructor(readonly constructorParam : Type) { // no assignment of constructorParam here } Surprisingly, constructorParam is still being used as usu ...

Experiencing difficulties with NPM installation

Screenshot of my terminal in VSCode Despite attempting to uninstall and reinstall node and clearing the cache, I am still unable to resolve this issue. Any suggestions? If it's relevant, I am using Windows 10. ...

What are the reasons for transitioning from using <script> includes to npm installs?

I am currently working on a VueJS project where I utilize npm to handle all Vue-related components such as vue-resource, router, and Vuex. However, in my index.html file, I have also included additional scripts like Bootstrap, jQuery, and Tween using scrip ...

Convert a list into a hierarchical structure of nested objects

Working with angular, I aim to display a nested tree structure of folders in an HTML format like below: <div id="tree"> <ul> <li ng-repeat='folder in folderList' ng-include="'/templates/tree-renderer.html'" ...

Is it possible to return a promise after utilizing .then() in AngularJS?

As someone who is still getting the hang of Angular and promises, I want to make sure I'm on the right track. Right now, my data layer service uses Restangular to fetch data and returns a promise. Here's how it looks... dataStore.getUsers = fun ...

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Currently in my ejs file, I have a button that sends a value to app.js instantly when the program runs. However, I want it to only submit the value when clicked by the user. <% notesArray.forEach((note,i) =>{ %> <div class="note"> ...

Please provide TypeScript code for a React wrapper function that augments a component's props with two additional functions

During the course of my project, I implemented a function wrapping React component to incorporate undo/redo functionality using keyboard shortcuts Ctrl+Z and Shift+Ctrl+Z. Here is an example: import React from 'react'; interface WithUndoRedoProp ...

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

I'm currently stuck on developing a function that takes a string as an argument and outputs an object with this string as a key. For example (using pseudo code): test('bar') => {bar: ...} I am facing difficulties in ensuring the correct ...

Generating dynamic content

I require assistance with a programming issue. I am working with two separate components: Stage and Executor. Within the Stage component, I am attempting to create new elements based on input parameters, while in the Executor component, I set these paramet ...

Utilize $stateParams to dynamically generate a title

When I click a link to our 'count' page, I can pass a router parameter with the following code: $state.go('count', {targetName: object.name}) The router is set up to recognize this parameter in the URL: url: '/count/:targetName& ...

Changing the color of the timePicker clock in material-ui: a step-by-step guide

I have been attempting to update the color of the time clock in my timeInput component (material-ui-time-picker) for material-ui, but unfortunately, it is not reflecting the change. Here is the code I am using: <TimeInput style ={heure} ...

Encountering an error in Angular where the property does not exist in type

Struggling to create a collapsible menu within my header component in an Angular project, I've hit a snag with proper JSON formatting. The error message that keeps popping up reads: Error: src/app/components/header/header.component.html:48:49 - error ...

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

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 ...

Caught off guard by this promise: TypeError - Attempting to access a property that does not exist in my Ionic 2 application

I'm encountering an issue with native Facebook login that displays the following error message: Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined I have shared my entire project code below. Although I am able to ...