Angular에서 Lodash 메서드를 사용하는 방법은 무엇입니까?

이 글은 주로 Angular에서 Lodash를 사용하는 방법을 소개합니다. 필요하신 분들은 참고하시면 됩니다

Lodash는 어떻게 JavaScript, 특히 배열 처리에 사용되는 패키지인가요? Angular에서 기존 JavaScript 패키지를 사용하려면 SOP를 고려하세요.

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

Lodash 설치

~/MyProject $ npm install lodash --save

npm을 사용하여 lodash를 설치하세요.

Lodash Type 정의 파일 설치

~/MyProject $ npm install @types/lodash --save-dev

전통적인 JavaScript에는 유형이 없지만 TypeScript는 유형 외에도 제네릭도 있습니다.

TypeScript. 해결책 해결책은 유형 정의 파일인 *.d.ts를 별도로 사용하는 것입니다.

일반적으로 잘 알려진 JavaScript 라이브러리라면 누군가 이미 유형 정의 파일을 유지 관리하고 있으며 해당 패키지 규칙은 @types/package입니다.

타입 정의 파일은 TypeScript 컴파일에서만 사용되므로 --save-dev를 추가하세요.

tsconfig.json
{
 "compileOnSave": false,
 "compilerOptions": {
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
   "node_modules/@types"
  ],
  "types" : ["lodash"],
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

14행

"types" : ["lodash"],

typeRoots에 유형을 추가하고 배열에 lodash를 추가합니다. 이는 TypeScript가 컴파일할 때 방금 설치된 lodash 유형 정의 파일을 사용함을 나타냅니다.

Import Lodash
app.component.ts
import {Component, OnInit} from '@angular/core';
import * as _ from 'lodash';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'app';
 ngOnInit(): void {
  const scores: number[] = [100, 99, 98];
  _.remove(scores, 2);
  scores.forEach((score) => console.log(score));
 }
}

2번째 줄

import * as _ from 'lodash';

lodash를 로드합니다.

lodash는 _를 사용하는 데 익숙하므로 가져오기는 특별히 _

로 별칭이 지정됩니다. WebStorm은 Angular의 내장 API를 자동으로 가져올 수 있지만 JavaScript 패키지의 경우 현재 WebStorm은 자동으로 가져올 수 있는 방법이 없으며 수동으로 로드해야 합니다.

15줄

_.remove(scores, 2);

배열에서 요소를 제거하는 것은 JavaScript에서 항상 골치 아픈 부분이었습니다. lodash의 제거()를 사용하면 매우 간단하게 사용할 수 있습니다.

결론

실제로 Angular 버전의 패키지가 있는 경우 당연히 이를 먼저 사용하게 되며, JavaScript 패키지를 사용해야 하는 상황에서는 패키지 설치 외에 Angular 패키지도 설치해야 합니다. 유형 정의 파일을 tsconfig.json에 설정하면 Angular에서 올바르게 사용하고 컴파일할 수 있습니다.

샘플 코드

전체 예제는 내 GitHub에서 찾을 수 있습니다.

위는 제가 모든 사람을 위해 컴파일한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

노드를 사용하여 내장 디버깅 구현

vue 모바일 터미널에서 날짜 선택 구성 요소 구현

지정된 JS 파일을 webpack에서 별도로 패키징하는 방법

위 내용은 Angular에서 Lodash 메서드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!