Development Tip

TypeScript로 배열 항목을 어떻게 찾습니까?

yourdevel 2020. 10. 24. 11:58
반응형

TypeScript로 배열 항목을 어떻게 찾습니까? (현대적이고 쉬운 방법)


TypeScript를 사용하여 배열에서 항목을 찾는 표준 방법이 있습니까?

ES6 +는 간단하고 깔끔한 접근을 허용합니다

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

TypeScript는 많은 ES6 + 기능을 구현하며 계속해서 그렇게하고 있습니다. 적어도 좋은 해결책이있는 것 같습니다.

사용의 용이성, 최신 모범 사례 및 단순성을 통한 우아함을 고려하여 TypeScript를 사용하여 배열에서 항목을 어떻게 찾을 수 있습니까?
(최상의 접근 방식을 찾기 위해 질문을 약간 수정)

메모

  • " item "은 JavaScript 객체 또는 거의 모든 것이 될 수 있습니다. 위의 예는 일반 ol '네이티브 JS 객체를 찾는 것이지만 많은 시나리오가 존재합니다.

  • " canonical "은 컴퓨터 과학 (및 기타 분야)에서 "일반적으로 허용되는 규칙 또는 표준 공식"을 말하는 멋진 방법 일뿐입니다 (여기에있는 모든 사람이 어느 시점에서이 사실을 몰랐 음을 기억하십시오).

  • 이것은 새로운 기능에 관한 것이 아닙니다 . JS의 모든 버전이이를 수행 할 수 있습니다. 그러나 그렇게하는 형태는 시간을 거슬러 올라 갈수록 점점 덜 매력적입니다.

  • 참조 용 TypeScript 로드맵 .


1 부-폴리 필

이를 구현하지 않은 브라우저의 경우 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;
  };
}

2 부-인터페이스

find메서드 를 포함하려면 개방형 배열 인터페이스를 확장해야합니다 .

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

이것이 TypeScript에 도착하면 컴파일러에서이를 삭제하라는 경고를 받게됩니다.

3 부-사용

변수 x는 예상 된 유형을 갖습니다.{ id: number }

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

일부 프로젝트의 경우 그것은 당신의 목표를 설정하는 것이 더 쉽습니다 es6당신에 tsconfig.json.

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

tsconfig.json 사용하기 다음과 같이 es5를 대상으로 지정할 수도 있습니다.

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

밑줄 라이브러리를 사용할 수 있습니다.

그것을 설치하십시오 :

   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)
    );

Typescript에서 지원하지 않는 es6 개선이 필요한 경우 tsconfig에서 es6를 대상으로 지정하고 Babel을 사용하여 es5에서 파일을 변환 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/31455805/how-do-i-find-an-array-item-with-typescript-a-modern-easier-way

반응형