如何使用TypeScript查找数组项？ （现代，更简单的方式）

Question

是否存在使用TypeScript在数组中查找项目的规范方法？

ES6 +允许这种简单/干净的方法

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

TypeScript实现了许多ES6 +功能，并且继续这样做。它似乎至少有一个很好的解决方案，所以：

如何使用TypeScript在数组中找到项目，考虑到易用性，现代最佳实践以及简洁优雅？
（略微重述问题以寻求最佳方法）

注释

• ＆＃34;的项目＆＃34;可以是JavaScript对象，或几乎任何其他东西。上面的例子恰好是找到普通的＆＃39;本机JS对象，但存在许多场景。

• ＆＃34;的规范＆＃34;在计算机科学（和其他领域）中说“＃34;普遍接受的规则或标准公式＆＃34; （记住这里的每个人都不知道在某些时候）

• 这不是关于新功能。任何版本的JS都可以做到这一点。然而，这样做的形式越来越少吸引你越来越有吸引力。

• TypeScript roadmap供参考。

Answer 1

第一部分 - Polyfill

对于尚未实现它的浏览器，array.find的polyfill。 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;
  };
}

第二部分 - 界面

您需要扩展open Array接口以包含find方法。

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

当它到达TypeScript时，您将收到编译器的警告，提醒您删除它。

第三部分 - 使用它

变量x将具有预期的类型... { id: number }

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

Answer 2

对于某些项目，您可以更轻松地将目标设置为es6中的tsconfig.json。

{
  "compilerOptions": {
    "target": "es6",
    ...

Answer 3

使用tsconfig.json 你也可以像这样定位es5：

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "module": "commonjs", 
        "target": "es5"
    }
    ...

Answer 4

你可以使用下划线库。

安装它：

   npm install underscore --save
   npm install @types/underscore --save-dev

导入

   import _ = require('underscore');

使用它

    var x = _.filter(
      [{ "id": 1 }, { "id": -2 }, { "id": 3 }],
      myObj => myObj.id < 0)
    );

Answer 5

如果您需要一些不受Typescript支持的es6改进，您可以在tsconfig中定位es6并使用Babel转换es5中的文件。