Tips for creating a TypeScript function that only needs one property from an object

Question

Tips for creating a TypeScript function that only needs one property from an object

Looking to overcome the habit of using any in TypeScript, specifically when creating a function that adds or removes an item from an array. The key requirement is that the item must have an id property of type string. Here's how I currently have it implemented:

interface Item {
  id: string;
  [key: string]: any;
}

function toggleArrayItem(array: Item[], item: Item) {
  const index = array.findIndex(i => i.id === item.id);

  if (index >= 0) {
    array.splice(index, 1);
  } else {
    array.push(item);
  }
}

I've considered adjusting the third line to include a list of possible types such as

string | number | string[] | number[]

, but realized this isn't a viable solution. How can I rewrite this function without resorting to using any?

javascript typescript

Answer 1

Answer №1

Here's a code snippet that could come in handy:

interface Product {
  code: string;
}

function updateProductList<T extends Product>(productList: T[], product: T){
  const index = productList.findIndex((p) => p.code === product.code);

  if (index >= 0) {
    productList.splice(index, 1);
  } else {
    productList.push(product);
  }
}

const x = {code: 'ABC123', name: 'example'};
const y = {code: 'XYZ456', price: 25};
const z = {code: 'LMN789', price: 15};

updateProductList([] as Product[], x);
updateProductList([y,z], y);

Feel free to test this on TS Playground: https://tsplay.dev/qrTjku

Answer 2

Here's a code snippet that could come in handy:

interface Product {
  code: string;
}

function updateProductList<T extends Product>(productList: T[], product: T){
  const index = productList.findIndex((p) => p.code === product.code);

  if (index >= 0) {
    productList.splice(index, 1);
  } else {
    productList.push(product);
  }
}

const x = {code: 'ABC123', name: 'example'};
const y = {code: 'XYZ456', price: 25};
const z = {code: 'LMN789', price: 15};

updateProductList([] as Product[], x);
updateProductList([y,z], y);

Feel free to test this on TS Playground: https://tsplay.dev/qrTjku

Answer 3

Answer №2

Simply eliminate the [key: string]: any; line if it serves no purpose for you:

interface Product {
  code: string;
}

function modifyProductList(list: Product[], item: Product) {
  const idx = list.findIndex(i => i.code === item.code);

  if (idx >= 0) {
    list.splice(idx, 1);
  } else {
    list.push(item);
  }
}

Answer 4

Simply eliminate the [key: string]: any; line if it serves no purpose for you:

interface Product {
  code: string;
}

function modifyProductList(list: Product[], item: Product) {
  const idx = list.findIndex(i => i.code === item.code);

  if (idx >= 0) {
    list.splice(idx, 1);
  } else {
    list.push(item);
  }
}

Tips for creating a TypeScript function that only needs one property from an object

Answer №1

Answer №2

Similar questions

What is the method for verifying that one type extends another in the TypeScript compiler API?

Error message encountered in AngularJS when trying to send Fullcalendar: TypeError - Cannot access property '__id' of an undefined object

Odd behavior observed while running npm scripts in the npm terminal

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

What is the best way to retrieve unique elements from a mongoose database based on specific criteria?

What is the best method for eliminating a character from all elements in jQuery classes?

What are the steps to take in deploying a JavaScript automation application?

Is there a way to simulate pressing the ENTER/RETURN key using JavaScript executor in Selenium using Python?

Refreshed pages in Next.js often encounter intermittent 503 service unavailable errors with static chunks

What is the tick angle for the dateAxisRenderer in jqplot?

I encountered an issue while attempting to secure the key with node-redlock, as it results

session failed to register the third variable

Guide on importing table information into an array using jQuery

Despite encountering the 'property x does not exist on type y' error for Mongoose, it continues to function properly

JavaScript EasyBitConverter

Vanilla JavaScript: Enabling Video Autoplay within a Modal

Can you show me how to use vuejs to implement h2 tags?

How to generate PDF downloads with PHP using FPDF

Show the current time using Moment.js

JavaScript counter that starts at 1 and increments with each rotation