如何使用 TypeScript 查找数组项?(一种现代的,更简单的方法)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31455805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-09 06:43:21  来源:igfitidea点击:

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

typescript

提问by whitneyland

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

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

ES6+ allows this simple/clean approach

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

[{"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:

TypeScript 实现了许多 ES6+ 特性,并且会继续这样做。看起来它至少有一个很好的解决方案,所以:

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)

考虑到易用性、现代最佳实践和简洁优雅,如何使用 TypeScript 在数组中找到项目?
(稍微重述问题以寻求最佳方法)

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 roadmapfor reference.

  • item”可以是一个 JavaScript 对象,或者几乎任何其他东西。上面的例子恰好是寻找普通的 ol' 原生 JS 对象,但是存在很多场景。

  • 规范”只是计算机科学(和其他领域)中表示“普遍接受的规则或标准公式”的一种奇特方式(记住这里的每个人在某些时候都不知道)

  • 这与新功能无关。任何版本的 JS 都可以做到这一点。然而,随着时间的推移,这样做的形式变得越来越不吸引人。

  • 供参考的TypeScript 路线图

采纳答案by Fenton

Part One - Polyfill

第一部分 - Polyfill

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

对于尚未实现它的浏览器,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;
  };
}

Part Two - Interface

第二部分 - 界面

You need to extend the open Array interface to include the findmethod.

您需要扩展开放的 Array 接口以包含该find方法。

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.

当它到达 TypeScript 时,你会收到来自编译器的警告,提醒你删除它。

Part Three - Use it

第三部分 - 使用它

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

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

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

回答by Mohsen

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

对于一些项目,它更容易你的目标设定es6在你的tsconfig.json

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

回答by everblack

Playing with the tsconfig.json You can also targeting es5 like this :

使用 tsconfig.json 您还可以像这样针对 es5:

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

回答by Asaga

You could just use underscore library.

你可以只使用下划线库。

Install it:

安装它:

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

Import it

导入它

   import _ = require('underscore');

Use it

用它

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

回答by Pierre Fiorelli

If you need some es6 improvements not supported by Typescript, you can target es6 in your tsconfig and use Babel to convert your files in es5.

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