Utilize generic types within methods in TypeScript

Question

Utilize generic types within methods in TypeScript

Here is a snippet of code I'm working on in TypeScript:

public static sortByProperty<T>( array: T[], prop: string ): void 
{
      var availProps: string[] = Object.getOwnPropertyNames( T ); // or something typeof T, anyway I got error

      if(availProps.length>0 && availProps.indexOf(prop) > -1){
          return array.Sort(function(a, b) {
               var aItem = a[prop];
               var bItem = b[prop]; 
               return ((aItem < bItem ) ? -1 : ((aItem > bItem ) ? 1 : 0));
          });
      }
}

In my code, I want to utilize it like this:

Test.sortByProperty<MyObject>(arrayOf_MyObject, "APropertyName");

However, I encountered an error stating that T is unknown.

javascript typescript

Answer 1

Answer №1

Have you considered leveraging the compiler for property checking? By typing your prop parameter as keyof T, you can ensure that the compiler enforces the correct type.

class Example {
  public static sortDataByProperty<T>(array: T[], prop: keyof T): void {

      array.sort(function (a, b) {
        var aProp = a[prop];
        var bProp = b[prop];
        return ((aProp < bProp) ? -1 : ((aProp > bProp) ? 1 : 0));
      });
  }
}

interface CustomObject {
  value: string
}

Example.sortDataByProperty<CustomObject>([{value: "abc"}], "value"); // Success
Example.sortDataByProperty<CustomObject>([{value: "xyz"}], "invalidprop"); // Error

To address your initial query about manually checking properties, you can use Object.getOwnPropertyNames by passing a value like

Object.getOwnPropertyNames(array[0])

assuming there is at least one item in the array.

Answer 2

Have you considered leveraging the compiler for property checking? By typing your prop parameter as keyof T, you can ensure that the compiler enforces the correct type.

class Example {
  public static sortDataByProperty<T>(array: T[], prop: keyof T): void {

      array.sort(function (a, b) {
        var aProp = a[prop];
        var bProp = b[prop];
        return ((aProp < bProp) ? -1 : ((aProp > bProp) ? 1 : 0));
      });
  }
}

interface CustomObject {
  value: string
}

Example.sortDataByProperty<CustomObject>([{value: "abc"}], "value"); // Success
Example.sortDataByProperty<CustomObject>([{value: "xyz"}], "invalidprop"); // Error

To address your initial query about manually checking properties, you can use Object.getOwnPropertyNames by passing a value like

Object.getOwnPropertyNames(array[0])

assuming there is at least one item in the array.

Answer 3

Answer №2

Remember to pass array element when using Object.getOwnPropertyNames(), not T.

In Javascript, T is no longer accessible once it has been compiled. It is specifically for Typescript. Instead, try using

Object.getOwnPropertyNames(array[0])

to iterate through all properties of your T object.

Answer 4

Remember to pass array element when using Object.getOwnPropertyNames(), not T.

In Javascript, T is no longer accessible once it has been compiled. It is specifically for Typescript. Instead, try using

Object.getOwnPropertyNames(array[0])

to iterate through all properties of your T object.

Utilize generic types within methods in TypeScript

Answer №1

Answer №2

Similar questions

Setting the default value for a dropdown in Angular 2 using Kendo UI

Difficulty transferring function to child element

Tips for enhancing the efficiency of a three.js environment within Gatsby.js or react:

Create a loop that depends on the user's ID

injecting a variable from the configuration service into a TypeScript decorator

Is there a way to calculate the word frequency in my text using plain JavaScript?

Is the issue of res.locals not being properly propagated to all requests in Express middleware persisting?

Changing Page Content with Ajax Post-Redirect Pattern

The JSX component cannot utilize 'Home' when working with React and TypeScript

The utilization of `ngSwitch` in Angular for managing and displaying

Extracting data from a JSON array using JavaScript: A guide

What is the best way to retrieve information from a function that returns an AJAX GET JSON response?

Angular throws a 404 error when making a JSONP http request

Having trouble with the Semantic UI popup not showing div content correctly? Need to display table row data as well? Let's troub

Click on the button to send the input field

Ways to navigate to a different page while displaying an alert message?

Retrieving data from MongoDB and presenting it neatly in Bootstrap cards

Efficient - Managing numerous database connections

Sending a result back to a Silverlight user control from a slightly intricate JavaScript function

Transferring the value of a variable from Block to Global Scope in FIRESTORE