Вопросы Теги

Как использовать Array.find () в Typcript Transpiling для ES5 [duplicate]

Вместо того, чтобы бросать код на вас, есть два понятия, которые являются ключом к пониманию того, как JS обрабатывает обратные вызовы и асинхронность. (это даже слово?)

Модель цикла события и параллелизма

Есть три вещи, о которых вам нужно знать; Очередь; цикл события и стек

. В широких упрощенных терминах цикл событий подобен диспетчеру проекта, он постоянно прослушивает любые функции, которые хотят запускать и взаимодействовать между очереди и стека. 

while (queue.waitForMessage()) {
   queue.processNextMessage();
}

Как только он получает сообщение для запуска чего-то, он добавляет его в очередь. Очередь - это список вещей, которые ждут выполнения (например, ваш запрос AJAX). Представьте себе это так: 

 1. call foo.com/api/bar using foobarFunc
 2. Go perform an infinite loop
 ... and so on

Когда одно из этих сообщений будет исполнено, оно выталкивает сообщение из очереди и создает стек, стек - это все, что нужно выполнить JS для выполнения инструкции в сообщение. Таким образом, в нашем примере ему говорят позвонить foobarFunc 

function foobarFunc (var) {
  console.log(anotherFunction(var));
}

. Так что все, что foobarFunc должно выполнить (в нашем случае anotherFunction), будет вставлено в стек. исполняемый, а затем забытый - цикл события затем переместится на следующую вещь в очереди (или прослушивает сообщения)

. Главное здесь - порядок выполнения. Это

КОГДА что-то будет запущено

Когда вы совершаете вызов с использованием AJAX для внешней стороны или выполняете любой асинхронный код (например, setTimeout), Javascript зависит от ответ, прежде чем он сможет продолжить.

Большой вопрос, когда он получит ответ? Ответ в том, что мы не знаем, поэтому цикл событий ждет, когда это сообщение скажет: «Эй, забери меня». Если JS просто ждал этого сообщения синхронно, ваше приложение замерзнет, ​​и оно сосать. Таким образом, JS продолжает выполнение следующего элемента в очереди, ожидая, пока сообщение не будет добавлено обратно в очередь.

Вот почему с асинхронной функциональностью мы используем вещи, называемые обратными вызовами. Это похоже на обещание буквально. Как и в I , обещание что-то вернуть в какой-то момент jQuery использует специальные обратные вызовы, называемые deffered.done deffered.fail и deffered.always (среди других). Вы можете увидеть их все здесь

Итак, вам нужно передать функцию, которая в какой-то момент будет выполнена с переданными ей данными.

Поскольку обратный вызов не выполняется немедленно, но в более позднее время важно передать ссылку на функцию, которую она не выполнила. поэтому 

function foo(bla) {
  console.log(bla)
}

, поэтому большую часть времени (но не всегда) вы пройдете foo не foo()

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

64
задан Lee 16 July 2015 в 13:49
поделиться

5 ответов

Часть первая - 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;
  };
}

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

Вам необходимо расширить интерфейс открытого массива, включив метод 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);
65
ответ дан Aluan Haddad 25 August 2018 в 03:26
поделиться

Вы можете просто использовать библиотеку подчёркивания.

Установить: 

   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)
    );
-2
ответ дан Asaga 25 August 2018 в 03:26
поделиться

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

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "module": "commonjs", 
        "target": "es5"
    }
    ...
13
ответ дан everblack 25 August 2018 в 03:26
поделиться

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

{
  "compilerOptions": {
    "target": "es6",
    ...
11
ответ дан Mohsen 25 August 2018 в 03:26
поделиться

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

-2
ответ дан Pierre Fiorelli 25 August 2018 в 03:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: