Как мне найти элемент массива с помощью TypeScript? (современный, более простой способ)

Есть ли канонический способ найти элемент в массиве с помощью TypeScript?

ES6+ позволяет этот простой/чистый подход

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

TypeScript реализует множество функций ES6+ и продолжает это делать. Кажется вероятным, что у него есть хотя бы такое же хорошее решение, поэтому:

Как найти элемент в массиве с использованием TypeScript, учитывая простоту использования, современные лучшие практики и элегантность благодаря простоте?
(немного переформулировав вопрос, чтобы найти лучшие подходы)

Примечания

  • "item" может быть объектом JavaScript или почти любым другим. Вышеприведенный пример состоит в том, чтобы найти простые старые объекты JS, но существует много сценариев.

  • "канонический" - это просто причудливый способ в компьютерных науках (и других областях) сказать "общепринятое правило или стандартная формула" (помните, что все здесь не знали об этом в какой-то момент)

  • Это не о новых функциях. Любая версия JS может сделать это. Однако форма для этого становится все менее привлекательной, чем дальше вы возвращаетесь во времени.

  • Дорожная карта TypeScript для справки.

Ответы

Ответ 1

Часть первая - Polyfill

Для браузеров, которые еще не реализовали это, полифилл для array.find. Предоставлено 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;
  };
}

Часть вторая - интерфейс

Вам необходимо расширить открытый интерфейс 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);

Ответ 2

Для некоторых проектов проще настроить цель на es6 в tsconfig.json.

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

Ответ 3

Игра с tsconfig.json Вы также можете настроить таргетинг на es5 следующим образом:

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

Ответ 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)
    );

Ответ 5

Если вам нужны некоторые улучшения es6, не поддерживаемые Typescript, вы можете настроить таргетинг на es6 в своем tsconfig и использовать Babel для преобразования ваших файлов в es5.