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

Can you explain the distinction, if one exists, between a field value and a property within the context of TypeScript and Angular?

Generating a JSON object through the comparison of two other JSON objects

Custom Typescript type that runs concurrently with the base type is disregarded

Sharing information between React components involves passing data as props. By sending data from

"Converting jQuery Form into a Wizard feature with the ability to hide specific steps

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

React, handling various router navigations

Exploring .ENV Variables using Angular 2 Typescript and NodeJS

Using JavaScript to execute a JSON parse function will not work

One-of-a-kind npm module for typescript

What is the best way to iterate through data with ajax and mysql?

When an Ajax call is made, my .html page transforms into a .php page using jQuery

Image loading failure detected in ReactJS

Different categories of properties within a generic function

Efficient Local Database with Javascript

Customize AngularJS checkbox values when checked

Error code 405 (METHOD NOT ALLOWED) is received when attempting to make a post request to an API

Executing a search within the current connection in Node.js

"Encountered an issue with ng-annotate during processing

Transferring files via Bluetooth on PhoneGap