HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng thư viện JavaScript trong ứng dụng Angular 2+


Bạn có nhớ khi bạn học AngularJS (phiên bản 1) và các hướng dẫn liên tục nói với bạn rằng bạn không cần thêm JQuery vào dự án của mình không?

Điều đó không thay đổi – bạn không cần thêm JQuery vào dự án Angular 2+ của mình. Nhưng nếu vì bất kỳ lý do gì, bạn có thể cần sử dụng một số thư viện JavaScript, thì bạn cần biết cách sử dụng chúng trong Angular. Vì vậy, hãy bắt đầu từ con số không.

tôi sẽ thêm gạch dưới.js đến một dự án và cho bạn thấy nó hoạt động như thế nào.

1. Tạo một dự án mới bằng Angular CLI

Nếu bạn chưa cài đặt CLI trên máy của mình, hãy cài đặt nó. Sau khi cài đặt, tạo một dự án mới (nếu bạn chưa có).

học mới

Bây giờ bạn sẽ có một dự án Angular mới có tên là “học hỏi”.

2. Cài đặt gói vào dự án của bạn

Tới dự án chúng tôi vừa thực hiện:

học cd

Sử dụng trình quản lý gói ưa thích của bạn để cài đặt thư viện bạn sẽ sử dụng; tôi sử dụng npm để cài đặt underscore.js.

cài đặt npm –save gạch dưới

Đọc thêm  Dưới mui xe của động cơ V8

3. Nhập thư viện vào Angular (TypeScript)

Chúng tôi đang viết mã trong TypeScript và chúng tôi nên tuân theo các quy tắc của nó. TypeScript cần phải hiểu underscore.js.

Như bạn có thể biết, TypeScript là một tập hợp siêu JavaScript đã nhập để biên dịch thành JavaScript thuần túy. TypeScript có cú pháp, chức năng riêng và các biến có thể có các loại được xác định. Nhưng khi chúng ta định sử dụng một thư viện bên ngoài, chẳng hạn như dấu gạch dưới, chúng ta cần khai báo các định nghĩa kiểu cho TypeScript.

Trong JavaScript, loại đối số không quan trọng và bạn sẽ không gặp lỗi khi viết mã. Nhưng TypeScript sẽ không cho phép bạn cung cấp một mảng cho một hàm chấp nhận một chuỗi làm đầu vào. Sau đó, đây là câu hỏi: chúng ta có nên viết lại underscore.js trong TypeScript và xác định các loại ở đó?

Tất nhiên là không – TypeScript cung cấp các tệp khai báo (*.d.ts) xác định loại và chuẩn hóa tệp/thư viện JavaScript cho TypeScript.

Một số thư viện bao gồm tệp đánh máy và bạn không cần cài đặt đích loại của TypeScript cho chúng. Nhưng trong trường hợp thư viện không có .d.ts tập tin, bạn cần phải cài đặt nó.

Chúng ta chỉ cần tìm và nhập underscore.js gõ tập tin định nghĩa. Tôi khuyên bạn nên sử dụng Type Search để tìm tệp khai báo cho các thư viện bạn cần.

Đọc thêm  Ép buộc và chuyển đổi loại trong JavaScript – Giải thích bằng các ví dụ về mã

Tìm kiếm underscore trong Type Sceach và nó chuyển hướng bạn đếntypes/underscore. Cài đặt tệp khai báo bằng lệnh sau:

npm install --save @types/underscore

4. Nhập khai báo kiểu vào ứng dụng Angular

Giả sử bạn sẽ sử dụng dấu gạch dưới trong app.component.ts tập tin. Mở app.component.ts bởi IDE của bạn và thêm đoạn mã sau vào đầu tệp:

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/

TypeScript trong thành phần đó giờ đã hiểu _ và nó dễ dàng hoạt động như mong đợi.

Câu hỏi: Làm cách nào để sử dụng thư viện không có định nghĩa kiểu (*.d.ts) trong TypeScript và Angular?

Tạo nó nếu src/typings.d.ts không tồn tại. Nếu không, hãy mở nó và thêm gói của bạn vào đó:

declare var 

Trong TypeScript của bạn, bây giờ bạn cần nhập nó theo tên đã cho:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method();

Phần kết luận

Để kết thúc, hãy tạo một ví dụ đơn giản để xem ví dụ hoạt động của _. Mở app.component.ts và bên trong appComponent lớp viết một constructor trả về mục cuối cùng của một mảng bằng cách sử dụng dấu gạch dưới _.last() chức năng:

...
import * as _ from 'underscore';
...
export class AppComponent {
  constructor() {
    const myArray: number[] = [9, 1, 5];
    const lastItem: number = _.last(myArray); //Using underscore
    console.log(lastItem); //5
  }
}

Nếu bạn mở ứng dụng Angular của mình ngay bây giờ, bạn sẽ nhận được 5 trong bảng điều khiển, có nghĩa là chúng tôi có thể thêm chính xác underscore vào dự án của chúng tôi và nó hoạt động như mong đợi.

Đọc thêm  Hướng dẫn về mảng đối tượng JavaScript – Cách tạo, cập nhật và lặp qua các đối tượng bằng các phương thức mảng JS

Bạn có thể thêm bất kỳ thư viện JavaScript nào vào dự án của mình chỉ bằng cách làm theo các bước tương tự.


Bạn có thể theo dõi tôi để biết thêm các bài viết về công nghệ và lập trình.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status