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에서 파일을 변환 할 수 있습니다.
'Development Tip' 카테고리의 다른 글
NuGet-repositories.config (0) | 2020.10.24 |
---|---|
다른 앱의 Twitter 앱에서 페이지 열기-Android (0) | 2020.10.24 |
파이썬 소스 코드를 읽고 싶습니다. (0) | 2020.10.24 |
동일한 ASP.NET MVC 작업에 대한 여러 동시 AJAX 호출로 인해 브라우저가 차단되는 이유는 무엇입니까? (0) | 2020.10.24 |
Windows에서 __cdecl 또는 __stdcall? (0) | 2020.10.24 |