Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I find an array item with TypeScript? (a modern, easier way)

Tags:

typescript

Is there a canonical way to find an item in an array with TypeScript?

ES6+ allows this simple/clean approach

[{"id":1}, {"id":-2}, {"id":3}].find(myObj => myObj.id < 0)  // returns {"id":-2} 

TypeScript implements many ES6+ features and continues to do so. It seems likely it has at least as nice a solution, so:

How can an item be found in a array using TypeScript, considering ease of use, modern best practices, and elegance via simplicity?
(restating the question slightly to seek best approaches)

Notes

  • "item" could be a JavaScript object, or almost anything else. The example above happens to be to find plain ol' native JS objects, but many scenarios exist.

  • "canonical" is just a fancy way in Computer Science (and other fields) to say "general accepted rule or standard formula" (remember everyone here didn't know that at some point)

  • This is not about new features. Any version of JS could do this. However the form to do so gets less and less appealing the farther you go back in time.

  • TypeScript roadmap for reference.

like image 849
whitneyland Avatar asked Jul 16 '15 13:07

whitneyland


People also ask

How do I find a specific item in an array?

To find if an array contains an element in a JavaScript array, use the array includes() method. Javascript includes() is a built-in array function that determines whether an array contains the specified element. It returns true if it consists of an element, otherwise false, without including the element in the array.

How do you find the index of an object in an array in TypeScript?

TypeScript - Array indexOf() indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.


2 Answers

Part One - Polyfill

For browsers that haven't implemented it, a polyfill for array.find. Courtesy of MDN.

if (!Array.prototype.find) {   Array.prototype.find = function(predicate) {     if (this == null) {       throw new TypeError('Array.prototype.find called on null or undefined');     }     if (typeof predicate !== 'function') {       throw new TypeError('predicate must be a function');     }     var list = Object(this);     var length = list.length >>> 0;     var thisArg = arguments[1];     var value;      for (var i = 0; i < length; i++) {       value = list[i];       if (predicate.call(thisArg, value, i, list)) {         return value;       }     }     return undefined;   }; } 

Part Two - Interface

You need to extend the open Array interface to include the find method.

interface Array<T> {     find(predicate: (search: T) => boolean) : T; } 

When this arrives in TypeScript, you'll get a warning from the compiler that will remind you to delete this.

Part Three - Use it

The variable x will have the expected type... { id: number }

var x = [{ "id": 1 }, { "id": -2 }, { "id": 3 }].find(myObj => myObj.id < 0); 
like image 75
Fenton Avatar answered Oct 06 '22 07:10

Fenton


For some projects it's easier to set your target to es6 in your tsconfig.json.

{   "compilerOptions": {     "target": "es6",     ... 
like image 34
Mohsen Avatar answered Oct 06 '22 07:10

Mohsen