Angular에서 타사 라이브러리를 호출하는 방법

이번에는 Angular에서 타사 라이브러리를 호출하는 방법과 Angular에서 타사 라이브러리를 호출할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

Angular의 구성 요소와 모듈은 기존 타사 라이브러리(예: lodash, moment 등)와 약간 호환되지 않는 것 같습니다. 그 주된 이유는 TypeScript로 인한 환상입니다. 프런트엔드의 세 가지 기둥은 실제로 동일합니다. 어떤 종류의 프런트엔드 프레임워크라도 이러한 타사 라이브러리를 사용할 수 있습니다.

아래에서는 Angular가 타사 라이브러리를 사용하는 방법을 또 다른 관점에서 설명하겠습니다.

1. 앞에 작성

시작하기 전에 TypeScript 모듈 시스템을 이해해야 합니다. 모듈은 전역 범위가 아닌 자체 범위에서 실행됩니다. 모듈은 내보내기에 의존합니다. 가져오기와 관계를 설정합니다. 컴파일 프로세스 중에 컴파일러는 이 관계를 사용하여 컴파일해야 하는 파일을 찾습니다.

TypeScript는 여전히 JavaScript 파일 형식으로 클래스 라이브러리를 게시하므로 유형을 표현할 수 없으며 유형을 설명하기 위해 선언 파일이 필요하므로 선언 파일은 클래스 라이브러리에 없어서는 안될 부분이 되었습니다.

2. 분류

Angular는 TypeScript 언어를 사용하여 개발되었습니다. 이전 섹션에서 언급했듯이 클래스 라이브러리를 사용하려면 선언 파일이 있는지 여부가 필요합니다.

선언 파일이 있습니다

클래스 라이브러리에 선언 파일 *.d.ts가 있는지 구별하려면 두 가지 측면에서 이를 확인할 수 있습니다.

1 클래스 라이브러리가 함께 제공됩니다

설치합니다. Npm에서 하나 패키지를 사용한 후 라이브러리의 package.json에 타이핑 노드가 포함되어 있는지 직접 확인할 수 있습니다. 예를 들어 순간:

"typings": "./moment.d.ts"

2, TypeSearch retrieval

TypeScript는 TypeSearch라는 웹 사이트를 제공합니다. 클래스에 라이브러리 선언 파일이 포함되어 있는지 확인하려면 키워드를 직접 입력하세요.

예를 들어 목록에서 lodash를 클릭하면 npm 웹사이트로 이동하고 다음과 같은 명령이 표시됩니다.

npm install --save @types/lodash

No 선언 파일

이러한 상황은 매우 일반적입니다. 예를 들어 G2는 이전에 파일을 선언하지 않았습니다. 이 경우 선언 파일을 직접 작성할 수만 있습니다.

Angular Cli로 생성된 프로젝트에는 전역 선언 정의에 자동으로 포함되는 src/typings.d.ts 선언 파일이 포함되며, 해당 클래스 라이브러리의 선언 정보를 여기에 작성하는 것이 가장 좋습니다.

일반적으로 클래스 라이브러리에 대한 완전한 선언 파일을 작성하는 것은 어렵습니다. 이는 비용 효율적이므로 일부 전역 개체에 대해서만 "any"를 만드는 것이 가능한 경우가 많습니다(정적 유형 검사가 있음을 나타냄). 무시). 예:

// src/typings.d.ts
declare var G2: any;

3. 사용 방법은 무엇입니까?

문 파일은 링크인데, 아직은 어떻게 사용하는지 이렇게 나누어져 있습니다.

선언 파일의 경우 추가 작업을 수행할 필요가 없습니다. 모듈이 필요한 경우 import를 사용하면 됩니다. 예:

import * as moment from 'moment';
moment(); // 当前时间

선언 파일 없음

선언이 없을 때 어떻게 해야 하는지 확인하는 것이 중요합니다. 앞에서 언급했듯이 정적 유형 검사 무시를 나타내기 위해 any를 사용하는 것은 사용자가 선언 파일에서 제공하는 지능적인 프롬프트의 즐거움을 누릴 수 없음을 의미합니다.

G2와 마찬가지로 프로젝트 내 어디에서나 직접 사용할 수 있지만 G2 변수만 인식할 수 있고 인스턴스의 메서드나 속성은 불가지론적입니다.

// app.component.ts
const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

또한 TypeScript는 컴파일 과정에서 G2에 대한 유형 검사를 수행하지 않습니다. G2가 실제로 존재하는지 여부는 사용자가 직접 판단할 수 있습니다. Angular의 경우 이러한 모듈은 .angular-cli.json의 스크립트 노드에 명시적으로 로드되어야 합니다.

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript는 컴파일 후에도 여전히 JavaScript 코드입니다. G2 관련 JavaScript 파일을 수동으로 로드하지 않으면 실행 프로세스 중에 자연스럽게 G2를 찾을 수 없다는 오류가 발생합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vuex

react-redux 플러그인 프로젝트 실제 사용 분석

위 내용은 Angular에서 타사 라이브러리를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!