Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Question

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

How can I define a type in a function argument that corresponds to one of the object properties with the same type?

For instance, if I have an object:

type Article = {
  name: string;
  quantity: number;
  priceNet: number;
  priceGross: number;
};

and I want to create a function that calculates the total price based on a specific price type property:

function calculateTotalPrice(article: Article, priceTypeProperty: NeededProperty) {
  return article[priceTypeProperty] * article.quantity;
}

What should the definition of NeededProperty be in order to ensure TypeScript that it matches either the priceNet or priceGross property within the Article object and has a data type of number?

javascript typescript function object-properties type-definition

Answer 1

Answer №1

In order to accomplish this task, you can utilize the `keyof` operator in conjunction with a type constraint to ensure that the parameter corresponds to one of the valid key names defined in the `Article` type. It must be either `priceNet` or `priceGross`, and it should have a data type of `number`.

type Article = {
  name: string;
  quantity: number;
  priceNet: number;
  priceGross: number;
};

function calculateTotal(article: Article, selectedPriceType: keyof Article & ("priceNet" | "priceGross")) {
  return article[selectedPriceType] * article.quantity;
}

// Example of how to use the function
const myArticle: Article = {
  name: "Sample Item",
  quantity: 3,
  priceNet: 15,
  priceGross: 18
};

const totalNetPrice = calculateTotal(myArticle, "priceNet"); // This works fine
const totalGrossPrice = calculateTotal(myArticle, "priceGross"); // Works as expected

const totalPriceOther = calculateTotal(myArticle, "anotherPrice"); // This will not work

Answer 2

In order to accomplish this task, you can utilize the `keyof` operator in conjunction with a type constraint to ensure that the parameter corresponds to one of the valid key names defined in the `Article` type. It must be either `priceNet` or `priceGross`, and it should have a data type of `number`.

type Article = {
  name: string;
  quantity: number;
  priceNet: number;
  priceGross: number;
};

function calculateTotal(article: Article, selectedPriceType: keyof Article & ("priceNet" | "priceGross")) {
  return article[selectedPriceType] * article.quantity;
}

// Example of how to use the function
const myArticle: Article = {
  name: "Sample Item",
  quantity: 3,
  priceNet: 15,
  priceGross: 18
};

const totalNetPrice = calculateTotal(myArticle, "priceNet"); // This works fine
const totalGrossPrice = calculateTotal(myArticle, "priceGross"); // Works as expected

const totalPriceOther = calculateTotal(myArticle, "anotherPrice"); // This will not work

Answer 3

Answer №2

Yaman Abd's previous answer is accurate, however, I have found a slightly more elegant solution:

Resolution

type DesiredType = keyof Pick<Item, 'costNet' | 'costGross'>;

Description

keyof converts a property of an object into a string type
Pick is a utility type that facilitates the selection of properties from the Item type. This guarantees that the property is part of the Item object type.

This solution proposes the properties that can be utilized when defining the DesiredType.

Illustration

An appropriate example would resemble this:

type Item = {
  label: string;
  quantity: number;
  costNet: number;
  costGross: number;
};
    
type DesiredType = keyof Pick<Item, 'costNet' | 'costGross'>;

function calculate(item: Item, costTypeProperty: DesiredType) {
  return item[costTypeProperty] * item.quantity;
}
    
// Implementation
const myItem: Item = {
  label: "Example Label",
  quantity: 5,
  costNet: 10,
  costGross: 12
};
    
const totalCostNet = calculate(myItem, "costNet"); // Functions correctly
const totalCostGross = calculate(myItem, "costGross"); // Also functions as expected
    
const totalOtherPrice = calculate(myItem, "otherCost"); // does not function properly

Answer 4

Yaman Abd's previous answer is accurate, however, I have found a slightly more elegant solution:

Resolution

type DesiredType = keyof Pick<Item, 'costNet' | 'costGross'>;

Description

keyof converts a property of an object into a string type
Pick is a utility type that facilitates the selection of properties from the Item type. This guarantees that the property is part of the Item object type.

This solution proposes the properties that can be utilized when defining the DesiredType.

Illustration

An appropriate example would resemble this:

type Item = {
  label: string;
  quantity: number;
  costNet: number;
  costGross: number;
};
    
type DesiredType = keyof Pick<Item, 'costNet' | 'costGross'>;

function calculate(item: Item, costTypeProperty: DesiredType) {
  return item[costTypeProperty] * item.quantity;
}
    
// Implementation
const myItem: Item = {
  label: "Example Label",
  quantity: 5,
  costNet: 10,
  costGross: 12
};
    
const totalCostNet = calculate(myItem, "costNet"); // Functions correctly
const totalCostGross = calculate(myItem, "costGross"); // Also functions as expected
    
const totalOtherPrice = calculate(myItem, "otherCost"); // does not function properly

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

Answer №1

Answer №2

Resolution

Description

Illustration

Similar questions

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

Disabling the search function when it is clicked (before any actions are taken)

What is the proper method for effectively employing destructuring?

AngularJS directive that performs asynchronous validation upon blur

Enhance the sent server parameters by including extra options in fineuploader

Here's a revised version: "How to link a lambda layer with a function in a serverless.ts file using the

What is the correct way to specify type hints for a Stream of Streams in highlandjs?

Leveraging Angular 2 and RxJs 5 beta observables to continuously stream data from a while loop

Converting a string array to an array object in JavaScript: A step-by-step guide

What is the best way to execute individual API requests for various sheets within the same spreadsheet?

Two distinct controllers: concealing elements through the operation of one of them

Add a unique CSS style to both text and image using anchor tags

Converting a TypeScript object into a JSON string

Store the numeric value in JavaScript as a PHP integer

Guide on using JSZip and VUE to handle an array of promises and store them in a local variable

How to Access a div from another website using jQuery

Guide to iterating through different endpoints in a predetermined sequence

Unforeseen alterations in value occur in JavaScript when converting to JSON format

Step-by-step guide on how to have an AngularJS controller run continuously every 5 seconds once it has been initially called

The printing function for the window system can cause disruptions to the layout of the table